Компонент кнопки «Следовать»
Отзывчивый компонент Follow Button, разработанный в стиле Material Design с поддержкой темного режима с использованием Tailwind CSS.
HTML-код
<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>
Связанные компоненты
3D-Яркая-Кнопка-Следования
Простой компонент кнопки «Подписаться», вдохновленный 3D, с яркими цветами для бизнес-сайтов. Он адаптивный и включает поддержку темных тем, использующих только HTML и Tailwind CSS.
Кнопка «Подписаться»
Компонент кнопки Follow Button в темном режиме с отзывчивыми эффектами и поддержкой темной темы.
Кнопка следования за стекломорфизмом
Отзывчивая кнопка подписки с дизайном Glassmorphism, поддержкой темного режима, использованием Tailwind CSS.