Компоненты Облако тегов Компонент облака тегов

Компонент облака тегов

Темный режим компонента облака тегов

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

HTML-код

<div class="dark:bg-gray-900 dark:text-gray-200 min-h-screen p-8">
  <div class="max-w-4xl mx-auto">
    <h2 class="text-2xl font-bold mb-6 text-amber-600 dark:text-amber-400">Popular Product Tags</h2>
    <div class="flex flex-wrap gap-3">
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Electronics</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Home Goods</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Apparel</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Books</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Sports & Outdoors</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Beauty</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Toys</a>
      <a href="#" class="px-4 py-2 bg-stone-200 text-stone-800 rounded-full hover:bg-stone-300 dark:bg-stone-700 dark:text-stone-200 dark:hover:bg-stone-600 transition duration-300">Automotive</a>
    </div>
  </div>
</div>

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

Компонент облака тегов 13

Компонент облака тегов, выполненный в стиле неоморфизма. Он отличается мягким стилем пользовательского интерфейса с элементами, которые кажутся выступающими из фона с помощью тонких теней. Компонент поддерживает адаптивный дизайн и темные темы.

Открытый

Компонент облака тегов

Компонент облака тегов в стиле ретро/винтаж с отзывчивыми эффектами и поддержкой темного режима с использованием Tailwind CSS.

Открытый

Компонент облака тегов

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

Открытый