Composant Boutons OAuth
Composant OAuth Buttons de style Neumorphism conçu pour un blog ou une plate-forme de consommation de contenu. Le composant comporte des boutons pour divers fournisseurs OAuth avec un design réactif, une prise en charge du thème sombre et une palette de couleurs monochromatiques.
HTML Code
<div class="flex flex-col items-center justify-center h-screen bg-gray-200 dark:bg-gray-800 p-4">
<h2 class="text-gray-800 dark:text-gray-200 font-semibold text-2xl mb-6">Sign in with</h2>
<div class="space-y-4">
<a href="#" class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 shadow-neumorphism p-4 rounded-xl transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
<img src="https://picsum.photos/30/30" alt="OAuth Provider" class="rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200">Provider 1</span>
</a>
<a href="#" class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 shadow-neumorphism p-4 rounded-xl transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
<img src="https://picsum.photos/30/30" alt="OAuth Provider" class="rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200">Provider 2</span>
</a>
<a href="#" class="flex items-center justify-between bg-gray-300 dark:bg-gray-700 shadow-neumorphism p-4 rounded-xl transition duration-300 ease-in-out transform hover:scale-105 hover:shadow-lg">
<img src="https://picsum.photos/30/30" alt="OAuth Provider" class="rounded-full mr-3">
<span class="text-gray-800 dark:text-gray-200">Provider 3</span>
</a>
</div>
</div>
<style>
.shadow-neumorphism {
box-shadow: 5px 5px 15px rgba(255, 255, 255, 0.2),
-5px -5px 15px rgba(0, 0, 0, 0.2);
}
</style>Composants associés
Composant Boutons OAuth - Aquarelle/Artistique
Un composant de boutons OAuth artistique et rétro conçu pour les marques de mode et de beauté. Présente des textures douces et peintes, des couleurs vintage atténuées et comprend des options de connexion à Google, Apple et Facebook. Entièrement réactif et prend en charge le mode sombre.
Composant Boutons OAuth
Rétro/Vintage/années 80/90 sur le thème OAuth Buttons Component avec palette de couleurs analogue, complexité modérée, pour les médias sociaux, conception réactive avec prise en charge du mode sombre. Pas de JS, seulement du HTML avec des classes Tailwind.
Composant Boutons OAuth
Un composant Web pour les boutons d’authentification OAuth stylisé avec neumorphisme, conçu pour un portfolio, et comprend une mise en page réactive avec prise en charge du thème sombre.