Компонент кнопки «Следовать»
Чистая, минималистичная кнопка «Подписаться», выполненная в ретро/винтажной цветовой палитре, подходит для панели управления или страницы профиля. Она имеет интерактивное состояние наведения и поддержку темного режима, воплощая принципы швейцарской/международной типографики.
HTML-код
<div class="p-4 sm:p-6 bg-rose-50 dark:bg-zinc-800 rounded-lg shadow-md max-w-sm mx-auto font-sans">
<div class="flex flex-col items-center space-y-4">
<img class="w-20 h-20 rounded-full object-cover border-2 border-indigo-400 dark:border-indigo-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div class="text-center">
<p class="text-lg font-semibold text-zinc-800 dark:text-zinc-100">Jane Doe</p>
<p class="text-sm text-zinc-600 dark:text-zinc-400">@janedoe_official</p>
</div>
<button class="px-6 py-2 rounded-full border-2 border-indigo-500 bg-indigo-400 text-white font-bold text-sm tracking-wide uppercase shadow-md
hover:bg-indigo-500 hover:border-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2
dark:bg-indigo-600 dark:border-indigo-700 dark:hover:bg-indigo-700 dark:focus:ring-offset-zinc-800
transition duration-300 ease-in-out">
Follow
</button>
</div>
</div>Связанные компоненты
Компонент кнопки «Следовать»
Отзывчивый компонент Follow Button, разработанный в стиле Material Design с поддержкой темного режима с использованием Tailwind CSS.
Компонент кнопки «Следовать»
Кнопка «Подписаться» в стиле «Подписаться» в стиле «Ньюморфизм» для панели управления с поддержкой темной темы.
Компонент кнопки «Нейморфное следование»
Сложный, выполненный в неморфном стиле компонент кнопки «Следовать» в теплых тонах, разработанный для платформ недвижимости. Он отличается адаптивным дизайном и поддержкой темного режима, благодаря чему элементы кажутся вытянутыми из фона с помощью тонких теней.