<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - A Pen by lopezcristianrafae@gmail.com</title>
  <link rel="stylesheet" href="./style.css">
<style>
.container1 {
  max-width: 400px;
  padding: 40px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin: 0 auto;
}

h1 {
  text-align: center;
  color: #333;
}
.tabs {
  margin-top: 20px;
}
.tabs input[type="radio"] {
  display: none;
}
.tabs label {
  display: inline-block;
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border-radius: 5px 5px 0 0;
  cursor: pointer;
}
.tabs label:hover {
  background-color: #0056b3;
}
.tab-content {
  display: none;
  padding: 20px;
  background-color: #f2f2f2;
  border-radius: 0 0 5px 5px;
  animation: fade 0.5s ease-in-out;
}
@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.tabs input[type="radio"]:checked + label {
  background-color: #0056b3;
}
.tabs input[type="radio"]:checked ~ .tab-content {
  display: block;
}
input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}
button {
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
button:hover {
  background-color: #0056b3;
}</style>
</head>
<body>
<!-- partial:index.partial.html -->
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<body>
  <div class="container1">
    <h1 class="animate__animated animate__fadeIn">Register As</h1>
    <div class="tabs">
      <input type="radio" name="tab" id="tab1" checked>
      <label for="tab1">Clinic</label>
      <input type="radio" name="tab" id="tab2">
      <label for="tab2">Doctor</label>
      <input type="radio" name="tab" id="tab3">
      <label for="tab3">Patient</label>
    </div>
    <div class="tab-content" id="content1">
      <!-- Contenido de la pestaña "Iniciar sesión" -->
      <form>
        <input type="text" placeholder="Usuario">
        <input type="password" placeholder="Contraseña">
        <button>Iniciar sesión</button>
      </form>
    </div>
    <div class="tab-content" id="content2">
      <!-- Contenido de la pestaña "Páginas y apps" -->
      <ul>
        <li>Página 1</li>
        <li>Página 2</li>
        <li>Página 3</li>
      </ul>
    </div>
  </div>
  <script src="script.js"></script>
</body>

</html>
<!-- partial -->
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script  src="">// Agregar clase de animación a los elementos al cargar la página
window.addEventListener("load", () => {
  const elements = document.querySelectorAll(".animate__animated");
  elements.forEach((element) => {
    element.classList.add("animate__fadeIn");
  });
});

// Código adicional relacionado con la funcionalidad de las pestañas, si es necesario

// Obtener los elementos de las pestañas y los contenidos
const tabs = document.querySelectorAll('.tabs input[type="radio"]');
const tabContents = document.querySelectorAll(".tab-content");

// Agregar evento de cambio a las pestañas
tabs.forEach((tab, index) => {
  tab.addEventListener("change", () => {
    tabContents.forEach((content, contentIndex) => {
      if (contentIndex === index) {
        content.style.display = "block";
        content.classList.add("fade-in");
      } else {
        content.style.display = "none";
        content.classList.remove("fade-in");
      }
    });
  });
});</script>

</body>
</html>
