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

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

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

Предварительный просмотр

HTML-код

<div class="flex flex-col items-center justify-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-semibold text-brown-800 dark:text-brown-300 mb-4">
        Share Your Reaction!
    </h2>
    <div class="flex space-x-4">
        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1005/50/50" alt="Like" class="mb-1 rounded-full" />
            <span>👍 Like</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1006/50/50" alt="Love" class="mb-1 rounded-full" />
            <span>❤️ Love</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1007/50/50" alt="Haha" class="mb-1 rounded-full" />
            <span>😂 Haha</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1008/50/50" alt="Wow" class="mb-1 rounded-full" />
            <span>😮 Wow</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1009/50/50" alt="Sad" class="mb-1 rounded-full" />
            <span>😢 Sad</span>
        </button>

        <button class="flex flex-col items-center bg-brown-300 dark:bg-brown-700 hover:bg-brown-400 dark:hover:bg-brown-600 text-white rounded-lg shadow-md p-2 transition duration-300">
            <img src="https://picsum.photos/id/1010/50/50" alt="Angry" class="mb-1 rounded-full" />
            <span>😠 Angry</span>
        </button>
    </div>
</div>

Связанные компоненты

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

Веб-компонент с кнопками «Нравится» и «Реакция», выполненными в скевоморфном стиле, с отзывчивыми эффектами и поддержкой темной темы с использованием Tailwind CSS.

Открытый

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

Отзывчивый компонент кнопок "Нравится"/Реакция с поддержкой темного режима с использованием Tailwind CSS. Он имеет дополнительную цветовую схему, подходящую для приборной панели, с умеренной сложностью для интерактивных кнопок реакции.

Открытый

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

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

Открытый