JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Ventana de Login</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="login-container">
        <h2>Iniciar Sesión</h2>

        <div id="user-type-selection">
            <button onclick="showForm('student')">Estudiante</button>
            <button onclick="showForm('teacher')">Profesor</button>
            <button onclick="showForm('admin')">Administrador</button>
        </div>

        <form id="student-form" style="display:none;">
            <input type="text" placeholder="Matrícula">
            <input type="password" placeholder="Contraseña">
            <button type="submit">Iniciar Sesión</button>
        </form>

        <form id="teacher-form" style="display:none;">
            <input type="text" placeholder="Número de Empleado">
            <input type="password" placeholder="Contraseña">
            <button type="submit">Iniciar Sesión</button>
        </form>

        <form id="admin-form" style="display:none;">
            <input type="text" placeholder="Usuario">
            <input type="password" placeholder="Contraseña">
            <button type="submit">Iniciar Sesión</button>
        </form>
    </div>

    <script src="script.js"></script>
</body>
</html>

CSS

.login-container {
    width: 300px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#user-type-selection {
    margin-bottom: 20px;
}

form {
    display: none; /* Oculta todos los formularios al principio */
}

form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

form button {
    width: 100%;
    padding: 10px;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
}

JavaScript

function showForm(userType) {
    // Oculta todos los formularios
    document.getElementById('student-form').style.display = 'none';
    document.getElementById('teacher-form').style.display = 'none';
    document.getElementById('admin-form').style.display = 'none';

    // Muestra el formulario correspondiente al tipo de usuario
    document.getElementById(userType + '-form').style.display = 'block';
}