Tag Cloud Component
A Tag Cloud Component with Glassmorphism design, featuring responsive effects and dark theme support.
HTML Code
<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>Related Components
Tag Cloud Component 13
A Tag Cloud component designed with Neumorphism style. It features a soft UI style with elements appearing to extrude from the background using subtle shadows. The component supports responsive design and dark themes.
Tag Cloud Component
A responsive Tag Cloud component designed for social media interfaces with a dark mode UI and pastel color scheme.
Tag Cloud Component
A responsive Tag Cloud Component with Material Design styles, a complementary color scheme, and moderate complexity for e-commerce purposes, featuring dark theme support.