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

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

Компонент облака тегов с дизайном Glassmorphism, с отзывчивыми эффектами и поддержкой темных тем.

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

HTML-код

<div class="flex flex-wrap justify-center gap-2 p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <div class="glass-tag bg-white dark:bg-gray-800 text-gray-800 dark:text-white p-2 rounded-md shadow-md backdrop-filter backdrop-blur-sm bg-opacity-20 dark:bg-opacity-20 transition-colors duration-300 hover:scale-105 transform cursor-pointer">#Technology</div>
  <div class="glass-tag bg-white dark:bg-gray-800 text-gray-800 dark:text-white p-2 rounded-md shadow-md backdrop-filter backdrop-blur-sm bg-opacity-20 dark:bg-opacity-20 transition-colors duration-300 hover:scale-105 transform cursor-pointer">#WebDevelopment</div>
  <div class="glass-tag bg-white dark:bg-gray-800 text-gray-800 dark:text-white p-2 rounded-md shadow-md backdrop-filter backdrop-blur-sm bg-opacity-20 dark:bg-opacity-20 transition-colors duration-300 hover:scale-105 transform cursor-pointer">#Glassmorphism</div>
  <div class="glass-tag bg-white dark:bg-gray-800 text-gray-800 dark:text-white p-2 rounded-md shadow-md backdrop-filter backdrop-blur-sm bg-opacity-20 dark:bg-opacity-20 transition-colors duration-300 hover:scale-105 transform cursor-pointer">#TailwindCSS</div>
  <div class="glass-tag bg-white dark:bg-gray-800 text-gray-800 dark:text-white p-2 rounded-md shadow-md backdrop-filter backdrop-blur-sm bg-opacity-20 dark:bg-opacity-20 transition-colors duration-300 hover:scale-105 transform cursor-pointer">#Frontend</div>
  <div class="glass-tag bg-white dark:bg-gray-800 text-gray-800 dark:text-white p-2 rounded-md shadow-md backdrop-filter backdrop-blur-sm bg-opacity-20 dark:bg-opacity-20 transition-colors duration-300 hover:scale-105 transform cursor-pointer">#DarkMode</div>
  <div class="glass-tag bg-white dark:bg-gray-800 text-gray-800 dark:text-white p-2 rounded-md shadow-md backdrop-filter backdrop-blur-sm bg-opacity-20 dark:bg-opacity-20 transition-colors duration-300 hover:scale-105 transform cursor-pointer">#ResponsiveDesign</div>
</div>

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

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

Адаптивный компонент облака тегов, разработанный в соответствии с принципами Material Design, с высококонтрастной цветовой схемой, подходящей для панелей мониторинга. Включает поддержку темного режима и семантический HTML для специальных возможностей. Для интерактивности включены эффекты наведения.

Открытый

Облако тегов Компонент Стекломорфизм Монохроматический Сложный Электронная коммерция

Компонент облака тегов Glassmorphism для электронной коммерции

Открытый

Компонент облака тегов для сельского хозяйства/фермерства

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

Открытый