Компонент облака тегов
Компонент облака тегов в стиле ретро/винтаж с отзывчивыми эффектами и поддержкой темного режима с использованием Tailwind CSS.
HTML-код
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-md">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Tag Cloud</h2>
<div class="flex flex-wrap gap-2">
<span class="bg-yellow-500 dark:bg-yellow-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Retro</span>
<span class="bg-teal-500 dark:bg-teal-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Vintage</span>
<span class="bg-fuchsia-500 dark:bg-fuchsia-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">80s</span>
<span class="bg-purple-500 dark:bg-purple-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">90s</span>
<span class="bg-pink-500 dark:bg-pink-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Nostalgia</span>
<span class="bg-red-500 dark:bg-red-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Classic</span>
<span class="bg-blue-500 dark:bg-blue-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Design</span>
<span class="bg-green-500 dark:bg-green-600 text-gray-900 dark:text-white px-3 py-1 rounded-full text-sm font-semibold shadow-sm">Style</span>
</div>
</div>Связанные компоненты
Компонент облака тегов Neumorphism
Отзывчивый компонент облака тегов с дизайном в стиле неоморфизм, пастельной цветовой гаммой и сложными взаимодействиями, адаптированный для электронной коммерции. Включает поддержку темного режима и использует Tailwind CSS.
Компонент облака тегов
Компонент облака 3D Tag с яркими цветами для панелей визуализации данных.
Компонент облака тегов
Компонент облака тегов с дизайном Glassmorphism, с отзывчивыми эффектами и поддержкой темных тем.