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
Bouton de suivi avec micro-interactions
Composant de bouton de suivi réactif avec prise en charge du thème sombre et micro-interactions, conçu pour les applications de médias sociaux utilisant Tailwind CSS. Comprend une palette de couleurs monochromatiques et des éléments interactifs complexes.
Glassmorphism Suivre le bouton
Un bouton de suivi réactif avec le design Glassmorphism, la prise en charge du mode sombre, utilisant Tailwind CSS.
Composant Suivre le bouton
Un composant de bouton de suivi conçu dans le style brutalisme avec un contraste élevé et une apparence brute et audacieuse. Il est réactif et prend en charge les thèmes sombres.