Follow Button Component
A responsive Follow Button Component designed in Material Design style 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-800">
<div class="flex flex-col items-center p-6 bg-white dark:bg-gray-900 rounded-lg shadow-lg space-y-4">
<img src="https://picsum.photos/100" alt="User Avatar" class="w-24 h-24 rounded-full border-2 border-indigo-500 shadow-md">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">Software Developer</p>
<button class="flex items-center justify-center w-full px-4 py-2 font-semibold text-white bg-blue-600 rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300 dark:bg-blue-500 dark:hover:bg-blue-600">
<span>Follow</span>
</button>
</div>
</div>
Related Components
Follow Button Component
A complex follow button component designed with a glassmorphism effect, using a complementary color scheme, suitable for e-commerce applications, featuring responsive design and dark theme support.
Follow Button Component
A responsive Follow Button Component designed with Material Design principles, featuring support for dark mode and tailored styles using Tailwind CSS.
Follow Button
Dark Mode UI Follow Button Component with responsive effects and dark theme support.