Modulo di accesso e-commerce minimalista
Un modulo di accesso dal design minimalista e piatto con colori pastello, progettato per i siti di e-commerce. È semplice, reattivo e supporta la modalità oscura utilizzando Tailwind CSS.
Codice HTML
<div
class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900"
>
<div
class="max-w-md w-full p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md"
>
<h2
class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-6"
>
Login
</h2>
<form>
<div class="mb-4">
<label
for="email"
class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
>
Email Address
</label>
<input
type="email"
id="email"
name="email"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
placeholder="Enter your email"
/>
</div>
<div class="mb-6">
<label
for="password"
class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-2"
>
Password
</label>
<input
type="password"
id="password"
name="password"
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
placeholder="Enter your password"
/>
</div>
<button
type="submit"
class="w-full bg-pastel-blue text-black py-2 px-4 rounded-md hover:bg-pastel-darker-blue focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-opacity-50 transition duration-200"
>
Login
</button>
</form>
<div class="mt-6 text-center">
<p class="text-sm text-gray-600 dark:text-gray-300">
Don't have an account? <a href="#" class="text-pastel-blue hover:underline">Sign Up</a>
</p>
</div>
</div>
</div>Componenti correlati
Modulo di accesso retrò
Un componente del modulo di accesso in stile retrò/vintage con effetti reattivi e supporto per temi scuri, progettato utilizzando Tailwind CSS.
Componente Modulo di accesso
Un componente Modulo di accesso semplice e reattivo realizzato con una tavolozza di colori pastello (rosa tenui e grigi complementari) e microinterazioni coinvolgenti, come transizioni fluide e sottili effetti di hover/focus. Progettato per siti Web aziendali o aziendali, presenta un layout pulito, è completamente reattivo e include un supporto completo per il tema scuro. Costruito esclusivamente con HTML e Tailwind CSS.
Componente Modulo di accesso
Un componente del modulo di accesso progettato con Glassmorphism, con elementi traslucidi simili al vetro smerigliato ed effetti reattivi, che supporta temi scuri utilizzando Tailwind CSS.