Компоненты Кнопки «Нравится»/«Реакция» Компонент кнопок "Нравится/Реакция"

Компонент кнопок "Нравится/Реакция"

Компонент кнопок «Нравится»/«Реакция», выполненный в стиле брутализма с использованием 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. Для аватаров используются изображения-заполнители.

Открытый

Monospace_Developer_Reaction_Buttons

Простой, отзывчивый компонент кнопок «Нравится»/«Реакция», вдохновленный эстетикой монопространства/разработчика, с цветовой гаммой ретро/винтаж, подходит для новостных и журналистских сайтов. Включает поддержку темного режима.

Открытый

Компонент кнопок "Нравится/Реакция"

Компонент кнопок «Нравится»/«Реакция» со стилем дизайна Glassmorphism, с эффектами матового стекла, адаптивным дизайном и поддержкой темной темы с использованием Tailwind CSS.

Открытый