Компонент кнопок "Нравится/Реакция"
Компонент кнопок «Нравится»/«Реакция», выполненный в стиле брутализма с использованием Tailwind CSS, с отзывчивыми эффектами и поддержкой темной темы.
HTML-код
<div class="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-300 dark:border-gray-700 space-y-4">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">React to this!</h2>
<div class="grid grid-cols-2 gap-4">
<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-500 rounded-md">
👍 Like
</button>
<button class="bg-red-500 text-white font-bold py-2 px-4 rounded-md hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-50 dark:bg-red-700 dark:hover:bg-red-800 dark:focus:ring-red-500 rounded-md">
❤️ Love
</button>
<button class="bg-yellow-500 text-white font-bold py-2 px-4 rounded-md hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-opacity-50 dark:bg-yellow-700 dark:hover:bg-yellow-800 dark:focus:ring-yellow-500 rounded-md">
😂 Haha
</button>
<button class="bg-green-500 text-white font-bold py-2 px-4 rounded-md hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-400 focus:ring-opacity-50 dark:bg-green-700 dark:hover:bg-green-800 dark:focus:ring-green-500 rounded-md">
😮 Wow
</button>
</div>
<div class="flex space-x-4">
<img src="https://picsum.photos/40/40" alt="User Avatar" class="rounded-full border-2 border-white dark:border-gray-800" />
<img src="https://picsum.photos/40/40?random=1" alt="User Avatar" class="rounded-full border-2 border-white dark:border-gray-800" />
<img src="https://picsum.photos/40/40?random=2" alt="User Avatar" class="rounded-full border-2 border-white dark:border-gray-800" />
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
}
}
</style>
Связанные компоненты
Компонент кнопок "Нравится/Реакция"
Ретро/винтажный компонент кнопок «Нравится»/«Реакция», разработанный для корпоративных сайтов, с земляными тонами и адаптивным дизайном с поддержкой темного режима.
Компонент кнопок "Нравится/Реакция"
Сложный, отзывчивый, монохроматический компонент кнопок "Нравится/Реакция" с анимацией, ориентированной на микровзаимодействие, для бизнес/корпоративных сайтов, поддерживающий темную тему.
Скевоморфные кнопки реакции
Набор кнопок «Нравится» и «Реакция» со скевоморфным стилем оформления, поддержкой адаптивных макетов и темного режима. Кнопки реализованы исключительно с помощью HTML и Tailwind CSS, без JavaScript. Темный режим обрабатывается с помощью классов CSS. Для аватаров используются изображения-заполнители.