CCHub Logo CCHub Tailwind Collection
コンポーネント タグクラウド タグクラウドコンポーネント

タグクラウドコンポーネント

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>

関連コンポーネント

タグ クラウド コンポーネント ガラスモルフィズム 単色 複雑な 電子商取引

Glassmorphism Eコマース用タグクラウドコンポーネント

開ける

アールデコ調のタグクラウドコンポーネント

アールデコ調の美学でデザインされたレスポンシブタグクラウドコンポーネントで、幾何学模様と豪華なブルーの色調が特徴で、ソーシャルメディアインターフェースに適しています。ダークモードのサポートが含まれています。

開ける

農業/農業のためのタグクラウドコンポーネント

農業および農業のWebサイト向けに設計されたミニマリストでレスポンシブなタグクラウドコンポーネントで、クールなニュートラルカラーとダークモードのサポートが特徴です。

開ける