Composants Bouton Suivre Composant Suivre le bouton

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.

Aperçu

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

Composant du bouton de suivi cyberpunk

Il s’agit d’un composant de bouton « Suivre » complexe, sur le thème du cyberpunk, pour les outils CRM/professionnels, avec une palette de couleurs forêt/vert, des arrière-plans sombres et des accents néon brillants, avec une réactivité totale et une prise en charge du mode sombre.

Ouvrir