Brutalist Social Login (Mode/Beauté)
Un composant de connexion sociale brutaliste complexe et dynamique conçu pour les marques de mode et de beauté, avec un contraste élevé, des éléments audacieux et une réactivité totale avec la prise en charge du mode sombre.
HTML Code
<div class="min-h-screen bg-pink-300 dark:bg-zinc-900 flex items-center justify-center p-4 sm:p-8 font-mono">
<div class="relative w-full max-w-sm sm:max-w-md lg:max-w-lg xl:max-w-xl bg-orange-400 dark:bg-zinc-800 border-8 border-black dark:border-white shadow-[15px_15px_0_0_#000,20px_20px_0_0_#F00] dark:shadow-[15px_15px_0_0_#FFF,20px_20px_0_0_#FFF] transition-all duration-300 transform -rotate-1 skew-y-1 sm:skew-y-0">
<div class="absolute -top-4 -left-4 w-12 h-12 bg-lime-400 dark:bg-purple-600 border-4 border-black dark:border-white"></div>
<div class="absolute -bottom-4 -right-4 w-12 h-12 bg-cyan-400 dark:bg-yellow-500 border-4 border-black dark:border-white"></div>
<div class="p-6 sm:p-8 lg:p-10 text-black dark:text-white relative z-10">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold mb-4 sm:mb-6 text-black dark:text-white uppercase tracking-widest leading-tight border-b-4 border-black dark:border-white pb-2">
JOIN THE REVOLUTION
</h2>
<p class="text-sm sm:text-base mb-6 sm:mb-8 text-black dark:text-gray-300">
Unlock exclusive looks and limited-edition drops. Step into a bolder reality.
</p>
<div class="grid grid-cols-1 gap-4">
<button class="w-full flex items-center justify-center space-x-3 px-6 py-3 sm:py-4 bg-purple-600 dark:bg-indigo-600 text-white dark:text-white text-lg sm:text-xl font-bold uppercase border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#FFF] hover:shadow-[4px_4px_0_0_#000] dark:hover:shadow-[4px_4px_0_0_#FFF] transition-all duration-200 transform -skew-x-3 hover:translate-x-1 hover:translate-y-1">
<svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm2.473 18.99v-6.27h2.1l.31-2.45h-2.41v-1.57c0-.7.19-1.18.96-1.18h1.26V7.4c-.22-.03-.97-.09-1.85-.09-1.84 0-3.1 1.13-3.1 3.2V12h-2.1v2.45h2.1v6.54h3.7z" />
</svg>
<span>LOG IN WITH FACEBOOK</span>
</button>
<button class="w-full flex items-center justify-center space-x-3 px-6 py-3 sm:py-4 bg-red-600 dark:bg-rose-700 text-white dark:text-white text-lg sm:text-xl font-bold uppercase border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#FFF] hover:shadow-[4px_4px_0_0_#000] dark:hover:shadow-[4px_4px_0_0_#FFF] transition-all duration-200 transform skew-x-3 hover:-translate-x-1 hover:translate-y-1">
<svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.82 12.3c0 .24-.02.48-.05.7-.35 2.14-1.97 3.65-4.54 3.65-2.98 0-5.4-2.42-5.4-5.4s2.42-5.4 5.4-5.4c1.62 0 2.94.7 3.86 1.62l-1.1 1.08c-.5-.39-1.2-.84-2.76-.84-1.92 0-3.32 1.62-3.32 3.74 0 2.12 1.4 3.74 3.32 3.74 1.28 0 2.05-.54 2.5-1.02a3.86 3.86 0 0 0 .5-.7c.08-.18.15-.36.2-.56h-2.75V12.3h4.94zm0 0" />
</svg>
<span>SIGN UP WITH GOOGLE</span>
</button>
<button class="w-full flex items-center justify-center space-x-3 px-6 py-3 sm:py-4 bg-blue-600 dark:bg-sky-700 text-white dark:text-white text-lg sm:text-xl font-bold uppercase border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#FFF] hover:shadow-[4px_4px_0_0_#000] dark:hover:shadow-[4px_4px_0_0_#FFF] transition-all duration-200 transform rotate-1 hover:-rotate-1">
<svg class="w-7 h-7 sm:w-8 sm:h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 .29c-6.63 0-12 5.37-12 12 0 5.3 3.43 9.8 8.2 11.3-.6-.1-1.3-.2-1.9-.2-2.1 0-3.9 1.1-4.7 2.7-.4.9-.7 2.1-.7 3.4 0 1.2.3 2.3.7 3.3.4.9 1.1 1.7 1.9 2.3 1.1.8 2.5 1.2 4.1 1.2s3-.4 4.1-1.2c.8-.6 1.5-1.4 1.9-2.3.4-1 .7-2.1.7-3.3 0-1.3-.3-2.5-.7-3.4-.8-1.6-2.6-2.7-4.7-2.7-.6 0-1.3.1-1.9.2 4.7-1.5 8.2-6 8.2-11.3 0-6.63-5.37-12-12-12zM9.54 19.34c-.2-.04-.4-.07-.6-.1-.5-.1-1.1-.1-1.7-.1-.9 0-1.8.2-2.7.5-.9.3-1.8.7-2.6 1.3-.4-.6-.7-1.3-.7-2.1 0-.9.2-1.8.7-2.6.4-.8 1.1-1.4 1.9-1.9.8-.5 1.6-.7 2.5-.7h.9c.7 0 1.3.1 1.9.3.6.2 1.1.4 1.6.7-.4.6-.7 1.3-.7 2.1 0 .9.2 1.8.7 2.6.4.8 1.1 1.4 1.9 1.9.8.5 1.6.7 2.5.7h.9c.7 0 1.3.1 1.9.3.6.2 1.1.4 1.6.7-.4.6-.7 1.3-.7 2.1 0 .9.2 1.8.7 2.6.4.8 1.1 1.4 1.9 1.9.8.5 1.6.7 2.5.7h.9c.7 0 1.3.1 1.9.3.6.2 1.1.4 1.6.7z" />
</svg>
<span>CONTINUE WITH X</span>
</button>
</div>
<div class="my-8 sm:my-10 flex items-center">
<div class="flex-grow border-t-4 border-black dark:border-white"></div>
<span class="flex-shrink mx-4 text-lg sm:text-xl font-bold uppercase text-black dark:text-white bg-orange-400 dark:bg-zinc-800 px-4 py-2 border-4 border-black dark:border-white transform rotate-3">OR</span>
<div class="flex-grow border-t-4 border-black dark:border-white"></div>
</div>
<form class="grid grid-cols-1 gap-5">
<div>
<label for="email" class="block text-sm sm:text-base font-bold uppercase mb-2 text-black dark:text-white">Email Address</label>
<input type="email" id="email" placeholder="[email protected]" class="w-full px-5 py-3 sm:py-4 bg-yellow-200 dark:bg-zinc-700 text-black dark:text-white placeholder-black dark:placeholder-gray-400 border-4 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-lime-500 dark:focus:ring-purple-500 transform skew-y-2 hover:skew-y-0 transition-all duration-200" aria-label="Email Address">
</div>
<div>
<label for="password" class="block text-sm sm:text-base font-bold uppercase mb-2 text-black dark:text-white">Password</label>
<input type="password" id="password" placeholder="********" class="w-full px-5 py-3 sm:py-4 bg-yellow-200 dark:bg-zinc-700 text-black dark:text-white placeholder-black dark:placeholder-gray-400 border-4 border-black dark:border-white focus:outline-none focus:ring-4 focus:ring-lime-500 dark:focus:ring-purple-500 transform -skew-y-2 hover:skew-y-0 transition-all duration-200" aria-label="Password">
</div>
<button type="submit" class="w-full px-6 py-4 sm:py-5 bg-lime-500 dark:bg-purple-500 text-black dark:text-white text-xl sm:text-2xl font-extrabold uppercase mt-4 sm:mt-6 border-4 border-black dark:border-white shadow-[10px_10px_0_0_#000] dark:shadow-[10px_10px_0_0_#FFF] hover:shadow-[5px_5px_0_0_#000] dark:hover:shadow-[5px_5px_0_0_#FFF] transition-all duration-200 transform rotate-2 hover:-rotate-2">
SECURE ACCESS
</button>
</form>
<div class="text-center mt-8 sm:mt-10 text-sm sm:text-base text-black dark:text-gray-300">
<p class="mb-2 sm:mb-3">
Don't have an account? <a href="#" class="font-bold underline text-blue-700 dark:text-cyan-500 hover:text-blue-900 dark:hover:text-cyan-400 transform hover:scale-105 inline-block">REGISTER NOW</a>
</p>
<p>
<a href="#" class="font-bold underline text-blue-700 dark:text-cyan-500 hover:text-blue-900 dark:hover:text-cyan-400 transform hover:scale-105 inline-block">FORGOT MY PASSWORD</a>
</p>
</div>
<div class="mt-10 text-center text-xs text-black dark:text-gray-400 opacity-80">
<p>© 2024 FASHION/BEAUTY. ALL RIGHTS SERVED (NO, REALLY).</p>
</div>
</div>
</div>
</div>Composants associés
Composant de connexion sociale
Un composant de connexion sociale simple avec un design skeuomorphique, des tons de terre et une mise en page réactive avec prise en charge du mode sombre. Ce composant convient aux sites de blog ou de consommation de contenu, offrant une expérience de connexion visuellement attrayante et conviviale.
Composant de connexion sociale
Un composant de social login à l’esthétique industrielle et brute utilisant des couleurs neutres et froides, adapté aux systèmes de réservation et de réservation. Il dispose de boutons de connexion sociale et d’un séparateur avec une option de connexion manuelle, tous réactifs et avec prise en charge du mode sombre.
Composant de connexion sociale
Composant de connexion sociale réactif conçu pour le mode sombre à l’aide d’une palette de couleurs monochromatiques. Convient pour la consommation de blogs et de contenu avec des fonctionnalités interactives.