Follow Button Component
A complex, responsive follow button component with glassmorphism style and vibrant colors, designed for business websites with dark mode support using 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>
Related Components
Glassmorphism Follow Button
Glassmorphism Follow Button Component for Social Media with Dark Theme
Follow Button
Dark Mode UI Follow Button Component with responsive effects and dark theme support.
Glassmorphism Follow Button
A responsive follow button with Glassmorphism design, dark mode support, using Tailwind CSS.