Компонент кнопок "Нравится/Реакция"
Компонент кнопок "Нравится/Реакция", написанный на HTML с использованием Tailwind CSS, с дизайном Brutalism, цветовой гаммой Earth tones и умеренной сложностью, подходит для электронной коммерции. Включает адаптивный дизайн и поддержку темного режима.
HTML-код
<div class="flex flex-col items-center p-4 bg-stone-200 dark:bg-stone-800 font-mono">
<!-- Like Button -->
<button class="flex items-center justify-center px-6 py-3 mb-4 text-lg font-bold text-stone-900 uppercase bg-stone-400 border-t-4 border-l-4 border-b-0 border-r-0 border-stone-900 dark:text-stone-100 dark:bg-stone-700 dark:border-stone-100">
<svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4v6m0 0l-4 4m4-4L8 4m7 10l-2 2m0 0l-2-2m2 2l2 2"></path></svg>
Like (120)
</button>
<!-- Reactions -->
<div class="flex space-x-4">
<button class="p-3 text-xl bg-stone-500 border-t-2 border-l-2 border-b-0 border-r-0 border-stone-900 dark:bg-stone-600 dark:border-stone-100">👍 50</button>
<button class="p-3 text-xl bg-stone-500 border-t-2 border-l-2 border-b-0 border-r-0 border-stone-900 dark:bg-stone-600 dark:border-stone-100">😂 30</button>
<button class="p-3 text-xl bg-stone-500 border-t-2 border-l-2 border-b-0 border-r-0 border-stone-900 dark:bg-stone-600 dark:border-stone-100">😢 10</button>
<button class="p-3 text-xl bg-stone-500 border-t-2 border-l-2 border-b-0 border-r-0 border-stone-900 dark:bg-stone-600 dark:border-stone-100">😍 25</button>
</div>
</div>Связанные компоненты
Компонент кнопок "Нравится/Реакция"
Веб-компонент с кнопками «Нравится» и «Реакция» с микровзаимодействиями и поддержкой темной темы с использованием Tailwind CSS.
Компонент кнопок "Нравится/Реакция"
Отзывчивый компонент кнопок "Нравится"/Реакция с поддержкой темного режима с использованием Tailwind CSS. Он имеет дополнительную цветовую схему, подходящую для приборной панели, с умеренной сложностью для интерактивных кнопок реакции.
Аналогичные кнопки «Нравится» / «Реакция» в темном режиме
Сложный, отзывчивый компонент кнопок «Нравится»/«Реакция» для портфолио, с темным режимом пользовательского интерфейса и аналогичной цветовой схемой, реализованный с использованием чистого HTML и Tailwind CSS. Он поддерживает темный режим с помощью префикса Tailwind dark:.