Composant de formulaire de médias sociaux avec conception 3D et couleurs vives
Un composant de formulaire de réseau social complexe, réactif et dynamique inspiré de la 3D avec prise en charge du thème sombre.
HTML Code
<div class="min-h-screen bg-gradient-to-br from-purple-600 to-pink-500 dark:from-gray-900 dark:to-black p-10">
<div class="max-w-md mx-auto bg-white dark:bg-gray-800 rounded-xl shadow-2xl overflow-hidden md:max-w-2xl">
<div class="md:flex">
<div class="md:flex-shrink-0">
<img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/social/400/600" alt="Social media background">
</div>
<div class="p-8 flex flex-col justify-between">
<div>
<div class="uppercase tracking-wide text-sm text-indigo-700 dark:text-indigo-400 font-semibold">Connect & Share</div>
<a href="#" class="block mt-1 text-lg leading-tight font-medium text-black dark:text-white hover:underline">Join the Conversation</a>
<p class="mt-2 text-gray-600 dark:text-gray-400 text-sm">Enter your details below to connect with friends and family and share your moments.</p>
</div>
<div class="mt-6">
<form>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="username">
Username
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="username" type="text" placeholder="Choose a username">
</div>
<div class="mb-4">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="email">
Email
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="Enter your email">
</div>
<div class="mb-6">
<label class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2" for="password">
Password
</label>
<input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="Create a password">
</div>
<div class="flex items-center justify-between">
<button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full focus:outline-none focus:shadow-outline transform transition duration-500 hover:scale-105" type="button">
Sign Up
</button>
<a class="inline-block align-baseline font-bold text-sm text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-600" href="#">
Forgot Password?
</a>
</div>
</form>
</div>
</div>
</div>
</div>
</div>Composants associés
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.
Composante des formes brutalistes
Un simple composant de formes de style brutaliste pour les médias sociaux. Il présente un design brut à contraste élevé utilisant des couleurs en niveaux de gris et est réactif avec la prise en charge du mode sombre.
Forme industrielle brutaliste en niveaux de gris
Un composant de forme complexe, de style brutaliste avec une palette de couleurs en niveaux de gris, conçu pour les applications industrielles et manufacturières. Comprend des éléments très contrastés, des mises en page inhabituelles et une réactivité totale avec la prise en charge du mode sombre.