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

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

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

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

HTML-код

<div class="bg-gray-900 dark:bg-gray-800 p-5 rounded-lg shadow-lg max-w-lg mx-auto">
    <h2 class="text-2xl font-extrabold text-center text-yellow-300 mb-4">React with Nostalgia!</h2>
    <div class="flex justify-around mb-4">
        <button class="bg-red-500 hover:bg-red-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">❤️ Like</button>
        <button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">😂 Haha</button>
        <button class="bg-yellow-500 hover:bg-yellow-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">😢 Sad</button>
        <button class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 px-4 rounded-full shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">😡 Angry</button>
    </div>
    <hr class="border-gray-600 mb-4">
    <div class="flex items-center justify-center">
        <img class="w-12 h-12 rounded-full border-2 border-yellow-300 mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <span class="text-lg text-gray-300">John Doe</span>
    </div>
    <div class="mt-4">
        <p class="text-gray-400 text-center">React to the content with your feelings!</p>
    </div>
</div>

<div class="bg-gray-900 dark:bg-gray-800 p-5 rounded-lg shadow-lg max-w-lg mx-auto mt-6">
    <h3 class="text-xl font-semibold text-center text-yellow-300 mb-4">Select Your Mood</h3>
    <div class="grid grid-cols-2 gap-4">
        <button class="bg-red-500 hover:bg-red-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Excited</button>
        <button class="bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Happy</button>
        <button class="bg-yellow-500 hover:bg-yellow-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Sad</button>
        <button class="bg-green-500 hover:bg-green-400 text-white font-bold py-2 rounded-lg shadow-lg transition duration-300">Angry</button>
    </div>
</div>

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

Аналогичные кнопки «Нравится» / «Реакция» в темном режиме

Сложный, отзывчивый компонент кнопок «Нравится»/«Реакция» для портфолио, с темным режимом пользовательского интерфейса и аналогичной цветовой схемой, реализованный с использованием чистого HTML и Tailwind CSS. Он поддерживает темный режим с помощью префикса Tailwind dark:.

Открытый