Composant Suivre le bouton
Un composant de bouton de suivi complexe et réactif avec un style glassmorphism et des couleurs vives, conçu pour les sites Web d’entreprise avec prise en charge du mode sombre à l’aide de Tailwind CSS.
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 px-4">
<div class="w-full max-w-sm bg-white dark:bg-gray-800/50 p-6 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 backdrop-filter backdrop-blur-lg glass glass-vibrant">
<div class="flex flex-col items-center">
<img class="w-24 h-24 rounded-full mb-4 object-cover border-4 border-blue-500 dark:border-teal-400" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-1">John Doe</h2>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-4">Senior Developer</p>
<button class="px-6 py-2 rounded-full bg-gradient-to-r from-blue-500 to-teal-500 text-white font-semibold shadow-lg transform transition duration-300 hover:scale-105 hover:from-blue-600 hover:to-teal-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:focus:ring-teal-400">
Follow
</button>
<div class="flex mt-6 space-x-4 text-gray-700 dark:text-gray-300">
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-2 0c0 .993-.241 1.929-.668 2.754l-1.524-1.524A3 3 0 0010 9a3 3 0 00-2.254.98l-1.524 1.524A8.01 8.01 0 012 10c0-4.411 3.589-8 8-8s8 3.589 8 8z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M10 12a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" />
</svg>
<span>1.2k Followers</span>
</div>
<div class="flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path d="M11 6a3 3 0 11-6 0 3 3 0 016 0zM14 10a4 4 0 01-8 0H5a6 6 0 0012 0h-1z" />
</svg>
<span>250 Following</span>
</div>
</div>
</div>
</div>
</div>
<style>
.glass {
background-color: rgba(255, 255, 255, 0.2);
}
.dark .glass {
background-color: rgba(50, 50, 50, 0.2);
}
.glass-vibrant {
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}
</style>Composants associés
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.
Composant Suivre le bouton
Un bouton « Suivre » épuré et minimaliste conçu avec une palette de couleurs rétro/vintage, adapté à un tableau de bord ou à une page de profil. Il dispose d’un état de survol interactif et d’une prise en charge du mode sombre, incarnant les principes de la typographie suisse et internationale.
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.