Компонент кнопки «Следовать»
Отзывчивый компонент Follow Button, разработанный в соответствии с принципами Material Design, с поддержкой темного режима и настраиваемыми стилями с использованием Tailwind CSS.
HTML-код
<div class="flex items-center justify-center p-4">
<div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-5 transition-shadow duration-300 hover:shadow-lg">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg mr-3">
<div class="flex-1">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Me</h2>
<p class="text-gray-600 dark:text-gray-400">Join my journey and stay updated!</p>
</div>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
Follow
</button>
</div>
</div>
</div>
Связанные компоненты
3D-Яркая-Кнопка-Следования
Простой компонент кнопки «Подписаться», вдохновленный 3D, с яркими цветами для бизнес-сайтов. Он адаптивный и включает поддержку темных тем, использующих только HTML и Tailwind CSS.
Кнопка «Подписаться» с микровзаимодействиями
Адаптивный компонент кнопки «Подписаться» с поддержкой темной темы и микровзаимодействиями, разработанный для приложений социальных сетей с использованием Tailwind CSS. Отличается монохроматической цветовой гаммой и сложными интерактивными элементами.
Компонент кнопки «Следовать»
Кнопка «Подписаться» в стиле «Подписаться» в стиле «Ньюморфизм» для панели управления с поддержкой темной темы.