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 du bouton de suivi rétro
Un composant de bouton de suivi simple et réactif avec une esthétique rétro/vintage, une palette de couleurs complémentaires et un objectif de jeu, y compris la prise en charge du mode sombre.
Composant Suivre le bouton
Il s’agit d’un composant de bouton de suivi complexe, inspiré du papier/de l’impression, pour les sites Web de jeux, doté d’un design monochrome en noir et blanc avec une couleur d’accent vive, optimisé pour la réactivité et le mode sombre.
Glassmorphism Suivre le bouton
Composant de bouton de suivi Glassmorphism pour les médias sociaux avec thème sombre