Composant Formes neumorphes
Un composant de formulaires simple avec une conception à neumorphisme, conçu pour les applications de commerce électronique, avec une palette de couleurs monochromatiques et la prise en charge du mode sombre.
HTML Code
<!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>Composants associés
Formulaire de médias sociaux brutaliste
Un composant de forme simple et brutaliste pour les médias sociaux avec une palette de couleurs triadique et une prise en charge du thème sombre.
Composant Retro Vintage Forms
Un composant de formulaires complexe conçu dans un style rétro/vintage avec une palette de couleurs pastel, adapté aux sites Web d’entreprise professionnels et réactif avec prise en charge du mode sombre.
Glassmorphism Forms Component
Glassmorphism Forms Component avec des tons de terre, un design réactif et une prise en charge du thème sombre pour un site Web de blog/contenu.