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.
HTML Code
<div class="flex flex-wrap justify-center p-8 bg-gray-100 dark:bg-gray-900 rounded-lg shadow-lg">
<div class="m-4">
<a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
Tag 1
</a>
</div>
<div class="m-4">
<a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
Tag 2
</a>
</div>
<div class="m-4">
<a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
Tag 3
</a>
</div>
<div class="m-4">
<a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
Tag 4
</a>
</div>
<div class="m-4">
<a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
Tag 5
</a>
</div>
<div class="m-4">
<a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
Tag 6
</a>
</div>
<div class="m-4">
<a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
Tag 7
</a>
</div>
<div class="m-4">
<a href="#" class="bg-white dark:bg-gray-800 shadow-neumorphism text-gray-800 dark:text-white font-semibold py-2 px-4 rounded-full hover:shadow-lg transition-transform transform hover:scale-105">
Tag 8
</a>
</div>
</div>
<style>
.shadow-neumorphism {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.1),
-10px -10px 20px rgba(255, 255, 255, 0.5);
}
</style>Related Components
Tag Cloud Component
A simple, clean, and vibrant tag cloud component suitable for business environments, specifically designed for booking/reservation systems. It's responsive and includes dark mode support.
Tag Cloud Component
A retro/vintage tag cloud component with responsive effects and dark mode support using Tailwind CSS.
Tag Cloud Component
A responsive tag cloud component with engaging animations, using a monochromatic color scheme suitable for a portfolio.