Categorías

Componentes Componentes de autenticación

Componentes de autenticación

Componentes relacionados con la autenticación y la seguridad de los usuarios

Componentes de autenticación

Un componente de autenticación responsivo que admite el modo oscuro, que utiliza CSS de Tailwind con fondos oscuros, un formulario de inicio de sesión y registro, e imágenes de marcador de posición aleatorias para los elementos de la interfaz de usuario.

Abrir vista previa

                <div class="flex items-center justify-center min-h-screen bg-gray-900 text-white">
    <div class="w-full max-w-sm">
        <div class="mb-6 text-center">
            <h1 class="text-2xl font-bold">Authentication</h1>
            <p class="text-gray-400">Please sign in or create an account</p>
        </div>
        <div class="bg-gray-800 rounded-lg shadow-lg p-6">
            <form>
                <div class="mb-4">
                    <label for="email" class="block mb-2 text-sm font-medium">Email</label>
                    <input type="email" id="email" placeholder="[email protected]" class="w-full px-3 py-2 text-gray-900 bg-gray-200 rounded focus:outline-none focus:ring focus:ring-blue-500" required>
                </div>
                <div class="mb-4">
                    <label for="password" class="block mb-2 text-sm font-medium">Password</label>
                    <input type="password" id="password" placeholder="********" class="w-full px-3 py-2 text-gray-900 bg-gray-200 rounded focus:outline-none focus:ring focus:ring-blue-500" required>
                </div>
                <div class="flex items-center justify-between mb-6">
                    <div>
                        <input type="checkbox" id="remember" class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                        <label for="remember" class="ml-2 text-sm">Remember me</label>
                    </div>
                    <a href="#" class="text-sm text-blue-500 hover:underline">Forgot password?</a>
                </div>
                <button type="submit" class="w-full py-2 mt-2 text-white bg-blue-600 rounded hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-500">Sign In</button>
            </form>
            <div class="mt-4 text-center">
                <p class="text-gray-400">or</p>
                <button class="w-full py-2 mt-2 text-white bg-gray-700 rounded hover:bg-gray-600 focus:outline-none">Sign Up</button>
            </div>
        </div>
        <div class="mt-6 text-center">
            <img src="https://picsum.photos/100/100" alt="Random placeholder" class="rounded-full mx-auto mb-2">
            <p class="text-gray-400 text-sm">Random User Avatar</p>
        </div>
    </div>
</div>

Componentes de autenticación

Un componente de autenticación minimalista con un formulario de inicio de sesión y registro con soporte para temas oscuros, diseño receptivo e imágenes de marcador de posición.

Abrir vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-8 w-full max-w-sm">
        <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">Welcome Back!</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Please login to your account</p>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" name="email" class="w-full p-2 border rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" name="password" class="w-full p-2 border rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400" required>
            </div>
            <button type="submit" class="w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 transition duration-150">Login</button>
        </form>
        <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Don't have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Sign up</a></p>
    </div>
 </div>

<div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-8 w-full max-w-sm mt-8">
        <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">Create Account</h2>
        <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Join us today</p>
        <form>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="username">Username</label>
                <input type="text" id="username" name="username" class="w-full p-2 border rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-700 dark:text-gray-300" for="email">Email</label>
                <input type="email" id="email" name="email" class="w-full p-2 border rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-700 dark:text-gray-300" for="password">Password</label>
                <input type="password" id="password" name="password" class="w-full p-2 border rounded-lg border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500 dark:focus:border-blue-400" required>
            </div>
            <button type="submit" class="w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400 transition duration-150">Sign Up</button>
        </form>
        <p class="mt-4 text-center text-gray-600 dark:text-gray-400">Already have an account? <a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Login</a></p>
    </div>
</div>

Componente de componentes de autenticación

Un componente de autenticación receptivo diseñado para la interfaz de usuario del modo oscuro, con un formulario de inicio de sesión y registro con el estilo CSS de Tailwind.

Abrir vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-900 text-white">
  <div class="bg-gray-800 rounded-lg shadow-lg p-8 w-96">
    <h2 class="text-2xl font-bold mb-6 text-center">Welcome Back!</h2>
    <form>
      <div class="mb-4">
        <label class="block text-sm font-semibold mb-2" for="email">Email</label>
        <input type="email" id="email" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="[email protected]" required />
      </div>
      <div class="mb-4">
        <label class="block text-sm font-semibold mb-2" for="password">Password</label>
        <input type="password" id="password" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="********" required />
      </div>
      <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300">Login</button>
    </form>
    <div class="mt-4 text-center">
      <a href="#" class="text-sm text-indigo-400 hover:underline">Forgot your password?</a>
    </div>
    <div class="mt-6 border-t border-gray-600"></div>
    <h2 class="text-2xl font-bold mt-6 text-center">Create an Account</h2>
    <form>
      <div class="mb-4">
        <label class="block text-sm font-semibold mb-2" for="new-email">Email</label>
        <input type="email" id="new-email" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="[email protected]" required />
      </div>
      <div class="mb-4">
        <label class="block text-sm font-semibold mb-2" for="new-password">Password</label>
        <input type="password" id="new-password" class="w-full p-2 bg-gray-700 text-white rounded focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="********" required />
      </div>
      <div class="mb-4">
        <label class="block text-sm font-semibold mb-2" for="avatar">Upload Avatar</label>
        <input type="file" id="avatar" class="block w-full text-sm text-gray-500 bg-gray-600 rounded focus:outline-none" />
      </div>
      <button type="submit" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-2 rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300">Sign Up</button>
    </form>
    <div class="mt-4 text-center">
      <small>Or sign up using</small>
      <div class="flex justify-center mt-2">
        <img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
        <img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
        <img src="https://picsum.photos/30/30" class="rounded-full mx-1" alt="Random Avatar" />
      </div>
    </div>
  </div>
</div>

Componentes de autenticación

Un componente de autenticación responsivo diseñado en la interfaz de usuario del modo oscuro, con formularios de inicio de sesión y registro con imágenes de marcador de posición.

Abrir vista previa

                <div class="min-h-screen flex items-center justify-center bg-gray-900 p-4">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm w-full">
        <h2 class="text-white text-2xl mb-6 text-center">Welcome Back</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="email">Email</label>
                <input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="email" id="email" placeholder="[email protected]" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-300 mb-2" for="password">Password</label>
                <input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="password" id="password" placeholder="********" required>
            </div>
            <button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 rounded focus:outline-none focus:ring focus:ring-indigo-400 transition duration-200">Login</button>
        </form>
        <div class="mt-4 text-center">
            <span class="text-gray-400">or</span>
        </div>
        <div class="mt-4">
            <p class="text-gray-400 text-center">Don't have an account? <a href="#" class="text-indigo-400 hover:underline">Sign up</a></p>
        </div>
    </div>
</div>

<div class="min-h-screen flex items-center justify-center bg-gray-900 p-4 mt-10">
    <div class="bg-gray-800 rounded-lg shadow-lg p-6 max-w-sm w-full">
        <h2 class="text-white text-2xl mb-6 text-center">Create Account</h2>
        <form>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="name">Name</label>
                <input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="text" id="name" placeholder="John Doe" required>
            </div>
            <div class="mb-4">
                <label class="block text-gray-300 mb-2" for="email-signup">Email</label>
                <input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="email" id="email-signup" placeholder="[email protected]" required>
            </div>
            <div class="mb-6">
                <label class="block text-gray-300 mb-2" for="password-signup">Password</label>
                <input class="w-full px-4 py-2 rounded bg-gray-700 text-white focus:outline-none focus:ring focus:ring-indigo-500" type="password" id="password-signup" placeholder="********" required>
            </div>
            <button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 rounded focus:outline-none focus:ring focus:ring-indigo-400 transition duration-200">Sign Up</button>
        </form>
        <div class="mt-4 text-center">
            <span class="text-gray-400">or</span>
        </div>
        <div class="mt-4">
            <p class="text-gray-400 text-center">Already have an account? <a href="#" class="text-indigo-400 hover:underline">Login</a></p>
        </div>
    </div>
</div>