Componente Forme Neumorfiche
Un componente di forme semplici con design a neumorfismo, su misura per applicazioni di e-commerce, caratterizzato da una combinazione di colori monocromatica e supporto per la modalità scura.
Codice HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<title>Neumorphic Forms Component</title>
</head>
<body class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center min-h-screen">
<div class="bg-gray-200 dark:bg-gray-700 rounded-xl shadow-xl p-8 w-4/5 max-w-md">
<h2 class="text-center text-gray-800 dark:text-gray-200 text-2xl font-bold mb-6">Create Account</h2>
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Name</label>
<input class="bg-gray-300 dark:bg-gray-600 appearance-none border-2 border-gray-200 dark:border-gray-600 rounded w-full py-2 px-4 text-gray-700 dark:text-gray-300 shadow-inner focus:outline-none focus:border-gray-500 dark:focus:border-gray-400" id="name" type="text" placeholder="John Doe">
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email</label>
<input class="bg-gray-300 dark:bg-gray-600 appearance-none border-2 border-gray-200 dark:border-gray-600 rounded w-full py-2 px-4 text-gray-700 dark:text-gray-300 shadow-inner focus:outline-none focus:border-gray-500 dark:focus:border-gray-400" id="email" type="email" placeholder="[email protected]">
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
<input class="bg-gray-300 dark:bg-gray-600 appearance-none border-2 border-gray-200 dark:border-gray-600 rounded w-full py-2 px-4 text-gray-700 dark:text-gray-300 shadow-inner focus:outline-none focus:border-gray-500 dark:focus:border-gray-400" id="password" type="password" placeholder="••••••••">
</div>
<div class="flex items-center justify-between">
<button class="bg-blue-500 hover:bg-blue-700 dark:bg-blue-600 dark:hover:bg-blue-500 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="submit">Sign Up</button>
</div>
</form>
<div class="text-center text-gray-600 dark:text-gray-400 mt-4">
<p>Already have an account? <a href="#" class="text-blue-500 hover:text-blue-700">Log In</a></p>
</div>
</div>
</body>
</html>Componenti correlati
Componente Forme Brutaliste
Un semplice componente di forme in stile brutalista per i social media. Presenta un design grezzo ad alto contrasto che utilizza colori in scala di grigi ed è reattivo con il supporto della modalità oscura.
Componente modulo per social media con design 3D e colori vivaci
Un componente di modulo per social media complesso, reattivo e vibrante ispirato al 3D con supporto per temi scuri.
Componente Moduli
Un componente di moduli reattivi progettato in stile minimalista, adatto per le interfacce dei social media, con colori vivaci, supporto per la modalità oscura e interazioni complesse.