Componente Modulo di accesso
Un modulo di accesso semplice e reattivo progettato con uno stile scheumorfico che imita gli elementi del mondo reale utilizzando una combinazione di colori vivaci. È adatto per le interfacce dei social media e supporta la modalità oscura.
Codice HTML
<div class="flex items-center justify-center min-h-screen bg-gradient-to-r from-blue-500 to-purple-600 dark:from-blue-800 dark:to-purple-900"> <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-8 max-w-sm w-full"> <h2 class="text-2xl font-semibold text-center text-gray-800 dark:text-gray-200">Welcome Back!</h2> <div class="mt-6"> <div class="mb-4"> <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Email</label> <input type="email" id="email" class="mt-1 block w-full p-3 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="[email protected]" required/> </div> <div class="mb-6"> <label for="password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Password</label> <input type="password" id="password" class="mt-1 block w-full p-3 border border-gray-300 rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-gray-200 focus:outline-none focus:ring focus:ring-blue-500 dark:focus:ring-blue-400" placeholder="••••••••" required/> </div> <button type="submit" class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 rounded-md focus:outline-none focus:ring focus:ring-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 dark:focus:ring-blue-400">Login</button> </div> <div class="mt-4 text-center"> <img src="https://picsum.photos/50/50" alt="Login Illustration" class="mx-auto rounded-full"/> </div> <div class="mt-2 text-center text-sm text-gray-600 dark:text-gray-400"> Don't have an account? <a href="#" class="text-blue-500 dark:text-blue-400">Sign up</a> </div> </div> </div>Componenti correlati
Componente Modulo di Accesso - Modalità Oscura Vibrante
Un componente per modulo di accesso complesso e reattivo progettato per uso aziendale/aziendale con una combinazione di colori vivaci e il supporto completo della modalità scura, con l'obiettivo di ridurre l'affaticamento degli occhi.
Modulo di accesso minimalista
Un modulo di accesso minimalista per i siti di e-commerce, con supporto per il design reattivo e la modalità scura. Utilizza una combinazione di colori analoga. Niente JavaScript.
Componente Modulo di accesso
Un componente del modulo di accesso reattivo con design Skeuomorphic, combinazione di colori monocromatici e supporto per temi scuri, adatto per siti Web aziendali.