Composant Suivre le bouton
Un composant complexe de bouton de suivi conçu avec un effet de glassmorphism, utilisant une palette de couleurs complémentaires, adapté aux applications de commerce électronique, avec un design réactif et une prise en charge du thème sombre.
HTML Code
<div class="flex justify-center items-center h-screen bg-gray-900 dark:bg-gray-800">
<div class="bg-white bg-opacity-30 backdrop-blur-lg border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg p-6 w-80">
<div class="flex flex-col items-center">
<img class="rounded-full w-16 h-16 mb-4" src="https://i.pravatar.cc/300" alt="User Avatar">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Follow Us</h2>
<p class="text-gray-600 dark:text-gray-300 text-center mb-4">Join our community and stay updated with the latest deals and offers!</p>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-400 dark:focus:ring-blue-600">
Follow
</button>
<div class="flex items-center justify-between mt-4 w-full">
<img class="rounded-full w-8 h-8 border-2 border-white" src="https://picsum.photos/50/50?random=1" alt="Image 1">
<img class="rounded-full w-8 h-8 border-2 border-white" src="https://picsum.photos/50/50?random=2" alt="Image 2">
<img class="rounded-full w-8 h-8 border-2 border-white" src="https://picsum.photos/50/50?random=3" alt="Image 3">
</div>
</div>
</div>
</div>Composants associés
Bouton Suivre
Un simple bouton de suivi avec un style Material Design, des effets réactifs et la prise en charge du thème sombre.
Composant Suivre le bouton
Un composant de bouton de suivi réactif conçu selon les principes de Material Design, avec prise en charge du mode sombre et des styles personnalisés à l’aide de Tailwind CSS.
Bouton Suivre
Composant de bouton de suivi de l’interface utilisateur en mode sombre avec effets réactifs et prise en charge du thème sombre.