Glassmorphism Suivre le bouton
Composant de bouton de suivi Glassmorphism pour les médias sociaux avec thème sombre
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 dark:from-gray-800 dark:to-gray-900">
<div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-lg border border-gray-100 border-opacity-20 dark:bg-gray-700 dark:bg-opacity-10 dark:border-gray-600 dark:border-opacity-20">
<div class="flex items-center space-x-4">
<img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<h3 class="text-lg font-semibold text-white dark:text-gray-200">John Doe</h3>
<p class="text-sm text-gray-200 dark:text-gray-400">@johndoe</p>
</div>
<button class="ml-auto px-6 py-2 bg-blue-500 text-white font-semibold rounded-full hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105 dark:bg-blue-600 dark:hover:bg-blue-700">
Follow
</button>
</div>
</div>
</div>
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 composant de bouton de suivi simple et réactif conçu pour les plateformes de rencontres/sociales avec une palette de couleurs pastel et une prise en charge du mode sombre.
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.