Search Components

All Components

Browse all available Tailwind CSS components

Carousel Slider Component

A simple carousel slider component designed for e-commerce in dark mode using Tailwind CSS.

                <div class="relative w-full max-w-lg mx-auto">
    <div class="overflow-hidden rounded-lg shadow-lg">
        <div class="carousel-inner dark:bg-gray-800 bg-gray-100">
            <div class="carousel-item active">
                <img src="https://picsum.photos/800/400?1" alt="Product 1" class="w-full h-auto">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-white dark:text-gray-200">Product 1</h2>
                    <p class="text-sm text-gray-700 dark:text-gray-300">Description of product 1</p>
                    <button class="mt-2 px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white rounded hover:bg-teal-600 dark:hover:bg-teal-800">Buy Now</button>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/800/400?2" alt="Product 2" class="w-full h-auto">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-white dark:text-gray-200">Product 2</h2>
                    <p class="text-sm text-gray-700 dark:text-gray-300">Description of product 2</p>
                    <button class="mt-2 px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white rounded hover:bg-teal-600 dark:hover:bg-teal-800">Buy Now</button>
                </div>
            </div>
            <div class="carousel-item">
                <img src="https://picsum.photos/800/400?3" alt="Product 3" class="w-full h-auto">
                <div class="p-4">
                    <h2 class="text-lg font-semibold text-white dark:text-gray-200">Product 3</h2>
                    <p class="text-sm text-gray-700 dark:text-gray-300">Description of product 3</p>
                    <button class="mt-2 px-4 py-2 bg-teal-500 dark:bg-teal-700 text-white rounded hover:bg-teal-600 dark:hover:bg-teal-800">Buy Now</button>
                </div>
            </div>
        </div>

        <!-- Carousel controls (optional) -->
        <button class="absolute top-1/2 left-0 transform -translate-y-1/2 bg-gray-600 dark:bg-gray-700 rounded-full p-2 text-white">
            &#10094;
        </button>
        <button class="absolute top-1/2 right-0 transform -translate-y-1/2 bg-gray-600 dark:bg-gray-700 rounded-full p-2 text-white">
            &#10095;
        </button>
    </div>
</div>

<style>
.carousel-inner {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-item {
    min-width: 100%;
    box-sizing: border-box;
}
</style>

Neumorphism Navigation Component

Neumorphism Navigation Component optimized for Portfolio websites. It features a complex layout with multiple interactive elements, a responsive design, and dark mode support using Tailwind CSS. The color scheme is Analogous.

Open Preview

                <nav class="p-6 bg-gray-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark">
  <div class="container mx-auto flex items-center justify-between">
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="h-10 w-10 rounded-full mr-4 shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
      <span class="text-xl font-bold text-gray-800 dark:text-gray-200">Your Name</span>
    </div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Home</a>
      <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">About</a>
      <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Portfolio</a>
      <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Contact</a>
    </div>
    <div class="md:hidden">
      <button class="text-gray-600 dark:text-gray-400 focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path></svg>
      </button>
    </div>
  </div>
  <div class="mobile-menu hidden md:hidden mt-4 space-y-2">
    <a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Home</a>
    <a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">About</a>
    <a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Portfolio</a>
    <a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-300 ease-in-out shadow-neumorphic-text-light dark:shadow-neumorphic-text-dark">Contact</a>
  </div>
</nav>

<style>
  .shadow-neumorphic-light {
    box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 7px 7px 15px #333333, -7px -7px 15px #555555;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
  }
   .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
  }
    .shadow-neumorphic-text-light {
    text-shadow: 2px 2px 5px #a7a7a7, -2px -2px 5px #ffffff;
  }
     .dark .shadow-neumorphic-text-dark {
    text-shadow: 2px 2px 5px #333333, -2px -2px 5px #555555;
  }
</style>

Product Comparison Component - Retro Corporate Style

A responsive product comparison component with a retro/vintage corporate aesthetic using monochromatic blue color scheme. Features multiple interactive elements and dark mode support. The design includes retro-styled cards with 80s/90s inspired geometric patterns, old-school typography, and pixel-like accents. Perfect for business websites wanting to stand out with nostalgic design while maintaining professionalism.

Open Preview

                <!-- Product Comparison Component with Retro/Vintage 80s/90s Corporate Style -->
<div class="bg-blue-50 dark:bg-blue-900 py-12 px-4 font-mono">
  <!-- Retro Header with pixelated border -->
  <div class="max-w-7xl mx-auto mb-12">
    <div class="border-4 border-blue-600 dark:border-blue-400 p-4 bg-white dark:bg-blue-800 shadow-lg relative overflow-hidden">
      <div class="absolute top-0 right-0 w-24 h-24 bg-blue-300 dark:bg-blue-500 transform rotate-45 translate-x-12 -translate-y-12"></div>
      <h2 class="text-4xl font-bold tracking-wider text-blue-800 dark:text-blue-200 uppercase text-center mb-2 relative z-10">PRODUCT COMPARISON</h2>
      <p class="text-blue-600 dark:text-blue-300 text-center tracking-wide relative z-10">Select the perfect solution for your business needs</p>
      <!-- Pixelated line decoration -->
      <div class="flex justify-center mt-4">
        <div class="flex space-x-1">
          <div class="w-3 h-3 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-3 h-3 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-3 h-3 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-3 h-3 bg-blue-600 dark:bg-blue-200"></div>
          <div class="w-12 h-3 bg-blue-700 dark:bg-blue-100"></div>
          <div class="w-3 h-3 bg-blue-600 dark:bg-blue-200"></div>
          <div class="w-3 h-3 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-3 h-3 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-3 h-3 bg-blue-300 dark:bg-blue-500"></div>
        </div>
      </div>
    </div>
  </div>

  <!-- Filter Controls with Retro Style -->
  <div class="max-w-7xl mx-auto mb-10">
    <div class="bg-blue-100 dark:bg-blue-800 border-2 border-blue-400 dark:border-blue-500 p-4 rounded grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
      <div class="space-y-2">
        <label class="block text-blue-800 dark:text-blue-200 font-bold uppercase text-sm tracking-wider mb-1">Filter By Category</label>
        <select class="w-full bg-white dark:bg-blue-700 border-2 border-blue-500 dark:border-blue-400 text-blue-700 dark:text-blue-100 font-mono p-2 focus:ring-2 focus:ring-blue-600 focus:border-transparent">
          <option>All Categories</option>
          <option>Basic Solutions</option>
          <option>Advanced Solutions</option>
          <option>Enterprise Solutions</option>
        </select>
      </div>
      
      <div class="space-y-2">
        <label class="block text-blue-800 dark:text-blue-200 font-bold uppercase text-sm tracking-wider mb-1">Sort By</label>
        <select class="w-full bg-white dark:bg-blue-700 border-2 border-blue-500 dark:border-blue-400 text-blue-700 dark:text-blue-100 font-mono p-2 focus:ring-2 focus:ring-blue-600 focus:border-transparent">
          <option>Price: Low to High</option>
          <option>Price: High to Low</option>
          <option>Popularity</option>
          <option>Features</option>
        </select>
      </div>
      
      <div class="space-y-2">
        <label class="block text-blue-800 dark:text-blue-200 font-bold uppercase text-sm tracking-wider mb-1">View Style</label>
        <div class="flex space-x-4">
          <button class="flex-1 py-2 bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-400 text-white font-bold border-2 border-blue-800 dark:border-blue-300 shadow-md">
            <span class="block text-xs">Grid</span>
          </button>
          <button class="flex-1 py-2 bg-blue-200 dark:bg-blue-700 hover:bg-blue-300 dark:hover:bg-blue-600 text-blue-800 dark:text-blue-100 font-bold border-2 border-blue-400 dark:border-blue-500 shadow-md">
            <span class="block text-xs">List</span>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Product Comparison Grid -->
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
    <!-- Product 1 -->
    <div class="bg-white dark:bg-blue-800 border-4 border-blue-400 dark:border-blue-500 shadow-lg transform hover:scale-105 transition-all duration-300">
      <!-- Retro Header with zigzag pattern -->
      <div class="bg-blue-300 dark:bg-blue-600 p-4 relative">
        <div class="absolute bottom-0 left-0 right-0 h-2 flex">
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
        </div>
        <h3 class="text-blue-900 dark:text-white text-2xl font-bold text-center uppercase tracking-wider mb-1">BASIC PLAN</h3>
        <div class="text-blue-700 dark:text-blue-200 text-center font-bold">Starter Solution</div>
      </div>
      
      <div class="p-6">
        <div class="text-center mb-6">
          <span class="text-4xl font-bold text-blue-800 dark:text-blue-200">$199</span>
          <span class="text-blue-600 dark:text-blue-300">/month</span>
        </div>
        
        <img src="https://picsum.photos/seed/basic/400/200" alt="Basic Plan" class="w-full h-40 object-cover mb-6 border-2 border-blue-400 dark:border-blue-500">
        
        <ul class="space-y-3 mb-8">
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">5 User Licenses</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">10GB Storage</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Basic Analytics</span>
          </li>
          <li class="flex items-start opacity-50">
            <div class="w-5 h-5 bg-blue-300 dark:bg-blue-600 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Advanced Features</span>
          </li>
          <li class="flex items-start opacity-50">
            <div class="w-5 h-5 bg-blue-300 dark:bg-blue-600 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Premium Support</span>
          </li>
        </ul>
        
        <!-- Satisfaction Rating -->
        <div class="mb-6">
          <div class="text-sm text-blue-700 dark:text-blue-300 font-bold uppercase tracking-wider mb-1">Customer Satisfaction</div>
          <div class="flex">
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
            <div class="w-1/5 h-4 bg-blue-200 dark:bg-blue-700"></div>
          </div>
        </div>
        
        <div class="space-y-4">
          <button class="w-full p-3 bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-400 text-white font-bold border-2 border-blue-800 dark:border-blue-300 uppercase tracking-wider shadow-md">
            SELECT PLAN
          </button>
          <button class="w-full p-2 bg-transparent border-2 border-blue-400 dark:border-blue-500 text-blue-600 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-700 font-bold uppercase tracking-wider text-sm">
            VIEW DETAILS
          </button>
        </div>
      </div>
      
      <!-- Retro Footer Decoration -->
      <div class="h-4 bg-gradient-to-r from-blue-300 via-blue-400 to-blue-300 dark:from-blue-600 dark:via-blue-500 dark:to-blue-600"></div>
    </div>
    
    <!-- Product 2 (Featured) -->
    <div class="bg-white dark:bg-blue-800 border-4 border-blue-600 dark:border-blue-300 shadow-xl transform hover:scale-105 transition-all duration-300 relative -mt-4 md:-mt-8">
      <!-- "MOST POPULAR" badge -->
      <div class="absolute -top-4 left-0 right-0 flex justify-center">
        <div class="bg-blue-600 dark:bg-blue-400 text-white dark:text-blue-900 py-1 px-6 text-sm font-bold uppercase tracking-wider shadow-lg">
          MOST POPULAR
        </div>
      </div>
      
      <!-- Retro Header with zigzag pattern -->
      <div class="bg-blue-500 dark:bg-blue-400 p-4 relative">
        <div class="absolute bottom-0 left-0 right-0 h-2 flex">
          <div class="w-2 h-2 bg-blue-700 dark:bg-blue-200"></div>
          <div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-700 dark:bg-blue-200"></div>
          <div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-700 dark:bg-blue-200"></div>
          <div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-700 dark:bg-blue-200"></div>
          <div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-600 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-700 dark:bg-blue-200"></div>
        </div>
        <h3 class="text-white dark:text-blue-900 text-2xl font-bold text-center uppercase tracking-wider mb-1">PRO PLAN</h3>
        <div class="text-blue-100 dark:text-blue-700 text-center font-bold">Business Solution</div>
      </div>
      
      <div class="p-6">
        <div class="text-center mb-6">
          <span class="text-4xl font-bold text-blue-800 dark:text-blue-200">$499</span>
          <span class="text-blue-600 dark:text-blue-300">/month</span>
        </div>
        
        <img src="https://picsum.photos/seed/pro/400/200" alt="Pro Plan" class="w-full h-40 object-cover mb-6 border-2 border-blue-400 dark:border-blue-500">
        
        <ul class="space-y-3 mb-8">
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-600 dark:bg-blue-300 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">25 User Licenses</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-600 dark:bg-blue-300 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">100GB Storage</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-600 dark:bg-blue-300 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Advanced Analytics</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-600 dark:bg-blue-300 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Advanced Features</span>
          </li>
          <li class="flex items-start opacity-50">
            <div class="w-5 h-5 bg-blue-300 dark:bg-blue-600 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Premium Support</span>
          </li>
        </ul>
        
        <!-- Satisfaction Rating -->
        <div class="mb-6">
          <div class="text-sm text-blue-700 dark:text-blue-300 font-bold uppercase tracking-wider mb-1">Customer Satisfaction</div>
          <div class="flex">
            <div class="w-1/5 h-4 bg-blue-600 dark:bg-blue-300"></div>
            <div class="w-1/5 h-4 bg-blue-600 dark:bg-blue-300"></div>
            <div class="w-1/5 h-4 bg-blue-600 dark:bg-blue-300"></div>
            <div class="w-1/5 h-4 bg-blue-600 dark:bg-blue-300"></div>
            <div class="w-1/5 h-4 bg-blue-600 dark:bg-blue-300"></div>
          </div>
        </div>
        
        <div class="space-y-4">
          <button class="w-full p-3 bg-blue-700 dark:bg-blue-300 hover:bg-blue-800 dark:hover:bg-blue-200 text-white dark:text-blue-900 font-bold border-2 border-blue-900 dark:border-blue-400 uppercase tracking-wider shadow-md">
            SELECT PLAN
          </button>
          <button class="w-full p-2 bg-transparent border-2 border-blue-500 dark:border-blue-400 text-blue-600 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-700 font-bold uppercase tracking-wider text-sm">
            VIEW DETAILS
          </button>
        </div>
      </div>
      
      <!-- Retro Footer Decoration -->
      <div class="h-4 bg-gradient-to-r from-blue-500 via-blue-600 to-blue-500 dark:from-blue-400 dark:via-blue-300 dark:to-blue-400"></div>
    </div>
    
    <!-- Product 3 -->
    <div class="bg-white dark:bg-blue-800 border-4 border-blue-400 dark:border-blue-500 shadow-lg transform hover:scale-105 transition-all duration-300">
      <!-- Retro Header with zigzag pattern -->
      <div class="bg-blue-300 dark:bg-blue-600 p-4 relative">
        <div class="absolute bottom-0 left-0 right-0 h-2 flex">
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-300 dark:bg-blue-500"></div>
          <div class="w-2 h-2 bg-blue-400 dark:bg-blue-400"></div>
          <div class="w-2 h-2 bg-blue-500 dark:bg-blue-300"></div>
        </div>
        <h3 class="text-blue-900 dark:text-white text-2xl font-bold text-center uppercase tracking-wider mb-1">ENTERPRISE</h3>
        <div class="text-blue-700 dark:text-blue-200 text-center font-bold">Complete Solution</div>
      </div>
      
      <div class="p-6">
        <div class="text-center mb-6">
          <span class="text-4xl font-bold text-blue-800 dark:text-blue-200">$999</span>
          <span class="text-blue-600 dark:text-blue-300">/month</span>
        </div>
        
        <img src="https://picsum.photos/seed/enterprise/400/200" alt="Enterprise Plan" class="w-full h-40 object-cover mb-6 border-2 border-blue-400 dark:border-blue-500">
        
        <ul class="space-y-3 mb-8">
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Unlimited Users</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">1TB Storage</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Enterprise Analytics</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Advanced Features</span>
          </li>
          <li class="flex items-start">
            <div class="w-5 h-5 bg-blue-500 dark:bg-blue-400 mr-2 mt-1 flex-shrink-0"></div>
            <span class="text-blue-800 dark:text-blue-100">Premium Support 24/7</span>
          </li>
        </ul>
        
        <!-- Satisfaction Rating -->
        <div class="mb-6">
          <div class="text-sm text-blue-700 dark:text-blue-300 font-bold uppercase tracking-wider mb-1">Customer Satisfaction</div>
          <div class="flex">
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
            <div class="w-1/5 h-4 bg-blue-500 dark:bg-blue-400"></div>
          </div>
        </div>
        
        <div class="space-y-4">
          <button class="w-full p-3 bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-400 text-white font-bold border-2 border-blue-800 dark:border-blue-300 uppercase tracking-wider shadow-md">
            SELECT PLAN
          </button>
          <button class="w-full p-2 bg-transparent border-2 border-blue-400 dark:border-blue-500 text-blue-600 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-700 font-bold uppercase tracking-wider text-sm">
            VIEW DETAILS
          </button>
        </div>
      </div>
      
      <!-- Retro Footer Decoration -->
      <div class="h-4 bg-gradient-to-r from-blue-300 via-blue-400 to-blue-300 dark:from-blue-600 dark:via-blue-500 dark:to-blue-600"></div>
    </div>
  </div>

  <!-- Comparison Table -->
  <div class="max-w-7xl mx-auto mt-16 bg-white dark:bg-blue-800 border-4 border-blue-500 dark:border-blue-400 shadow-lg overflow-x-auto">
    <div class="text-center py-6 bg-blue-200 dark:bg-blue-700 uppercase tracking-wider font-bold text-blue-800 dark:text-blue-100 text-2xl">
      Detailed Comparison
    </div>
    <table class="w-full border-collapse">
      <thead class="bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100">
        <tr>
          <th class="p-4 border-b-2 border-r-2 border-blue-300 dark:border-blue-600 text-left">Features</th>
          <th class="p-4 border-b-2 border-r-2 border-blue-300 dark:border-blue-600 text-center">Basic Plan</th>
          <th class="p-4 border-b-2 border-r-2 border-blue-300 dark:border-blue-600 text-center bg-blue-200 dark:bg-blue-600">Pro Plan</th>
          <th class="p-4 border-b-2 border-blue-300 dark:border-blue-600 text-center">Enterprise</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-b-2 border-blue-200 dark:border-blue-700">
          <td class="p-4 text-blue-800 dark:text-blue-200 font-bold border-r-2 border-blue-200 dark:border-blue-700">User Licenses</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700">5 Users</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-750">25 Users</td>
          <td class="p-4 text-center">Unlimited</td>
        </tr>
        <tr class="border-b-2 border-blue-200 dark:border-blue-700">
          <td class="p-4 text-blue-800 dark:text-blue-200 font-bold border-r-2 border-blue-200 dark:border-blue-700">Storage Capacity</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700">10GB</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-750">100GB</td>
          <td class="p-4 text-center">1TB</td>
        </tr>
        <tr class="border-b-2 border-blue-200 dark:border-blue-700">
          <td class="p-4 text-blue-800 dark:text-blue-200 font-bold border-r-2 border-blue-200 dark:border-blue-700">Analytics</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700">Basic</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-750">Advanced</td>
          <td class="p-4 text-center">Enterprise</td>
        </tr>
        <tr class="border-b-2 border-blue-200 dark:border-blue-700">
          <td class="p-4 text-blue-800 dark:text-blue-200 font-bold border-r-2 border-blue-200 dark:border-blue-700">Support</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700">Email Only</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-750">Email & Phone</td>
          <td class="p-4 text-center">24/7 Priority</td>
        </tr>
        <tr>
          <td class="p-4 text-blue-800 dark:text-blue-200 font-bold border-r-2 border-blue-200 dark:border-blue-700">Custom Reports</td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700">
            <div class="inline-block w-6 h-6 bg-blue-200 dark:bg-blue-700 relative">
              <div class="absolute inset-0 transform rotate-45 bg-blue-500 dark:bg-blue-400" style="clip-path: polygon(0 0, 100% 100%, 0 100%);"></div>
            </div>
          </td>
          <td class="p-4 text-center border-r-2 border-blue-200 dark:border-blue-700 bg-blue-50 dark:bg-blue-750">
            <div class="inline-block w-6 h-6 bg-blue-600 dark:bg-blue-300"></div>
          </td>
          <td class="p-4 text-center">
            <div class="inline-block w-6 h-6 bg-blue-600 dark:bg-blue-300"></div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Customer Testimonial with Retro Style -->
  <div class="max-w-5xl mx-auto mt-16 bg-gradient-to-r from-blue-100 via-blue-200 to-blue-100 dark:from-blue-700 dark:via-blue-600 dark:to-blue-700 p-1">
    <div class="bg-white dark:bg-blue-800 p-8">
      <div class="flex flex-col md:flex-row items-center">
        <div class="mb-6 md:mb-0 md:mr-8 flex-shrink-0">
          <img src="https://randomuser.me/api/portraits/women/42.jpg" alt="Customer" class="w-24 h-24 rounded-full border-4 border-blue-400 dark:border-blue-500">
        </div>
        <div>
          <p class="text-blue-800 dark:text-blue-200 italic mb-4">"This product comparison tool helped our company make the right decision for our business needs. The intuitive interface and detailed feature breakdown made it easy to understand the value proposition of each plan."</p>
          <div class="font-bold text-blue-600 dark:text-blue-300">Sarah Johnson</div>
          <div class="text-blue-500 dark:text-blue-400 text-sm">CTO, TechCorp Industries</div>
        </div>
      </div>
    </div>
  </div>

  <!-- FAQ Section -->
  <div class="max-w-5xl mx-auto mt-16 mb-16">
    <h3 class="text-2xl font-bold text-blue-800 dark:text-blue-200 mb-6 text-center uppercase tracking-wider">Frequently Asked Questions</h3>
    
    <div class="space-y-4">
      <div class="bg-white dark:bg-blue-800 border-2 border-blue-400 dark:border-blue-500">
        <div class="p-4 cursor-pointer flex justify-between items-center bg-blue-100 dark:bg-blue-700">
          <h4 class="font-bold text-blue-800 dark:text-blue-200">Can I upgrade or downgrade my plan later?</h4>
          <span class="text-blue-600 dark:text-blue-300 text-2xl">+</span>
        </div>
        <div class="p-4 border-t-2 border-blue-200 dark:border-blue-600">
          <p class="text-blue-700 dark:text-blue-300">Yes, you can easily upgrade or downgrade your plan at any time. Changes will be reflected on your next billing cycle.</p>
        </div>
      </div>
      
      <div class="bg-white dark:bg-blue-800 border-2 border-blue-400 dark:border-blue-500">
        <div class="p-4 cursor-pointer flex justify-between items-center bg-blue-100 dark:bg-blue-700">
          <h4 class="font-bold text-blue-800 dark:text-blue-200">Is there a free trial available?</h4>
          <span class="text-blue-600 dark:text-blue-300 text-2xl">+</span>
        </div>
        <div class="p-4 border-t-2 border-blue-200 dark:border-blue-600">
          <p class="text-blue-700 dark:text-blue-300">We offer a 14-day free trial on all our plans. No credit card required to start your trial period.</p>
        </div>
      </div>
      
      <div class="bg-white dark:bg-blue-800 border-2 border-blue-400 dark:border-blue-500">
        <div class="p-4 cursor-pointer flex justify-between items-center bg-blue-100 dark:bg-blue-700">
          <h4 class="font-bold text-blue-800 dark:text-blue-200">Do you offer custom enterprise solutions?</h4>
          <span class="text-blue-600 dark:text-blue-300 text-2xl">+</span>
        </div>
        <div class="p-4 border-t-2 border-blue-200 dark:border-blue-600">
          <p class="text-blue-700 dark:text-blue-300">Yes, we can tailor our Enterprise plan to meet your specific business requirements. Contact our sales team for a custom quote.</p>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Retro Footer -->
  <div class="max-w-7xl mx-auto mt-8 bg-blue-800 dark:bg-blue-950 text-white p-4 text-center">
    <div class="flex space-x-1 justify-center mb-4">
      <div class="w-3 h-3 bg-blue-500 dark:bg-blue-400"></div>
      <div class="w-3 h-3 bg-blue-400 dark:bg-blue-500"></div>
      <div class="w-3 h-3 bg-blue-300 dark:bg-blue-600"></div>
      <div class="w-20 h-3 bg-blue-200 dark:bg-blue-700"></div>
      <div class="w-3 h-3 bg-blue-300 dark:bg-blue-600"></div>
      <div class="w-3 h-3 bg-blue-400 dark:bg-blue-500"></div>
      <div class="w-3 h-3 bg-blue-500 dark:bg-blue-400"></div>
    </div>
    <p class="uppercase tracking-widest text-sm font-bold">© 2023 Your Professional Business</p>
  </div>
</div>

FiltersComponentNeumorphism

A simple responsive filters component styled with Neumorphism soft UI, using a grayscale color scheme, designed for business/corporate websites. The component supports dark mode and is built with Tailwind CSS without any JavaScript.

Open Preview

                <!-- Filters Component - Neumorphism Style, Grayscale, Responsive, Dark Mode -->
<section
  aria-label="Filter section"
  class="bg-gray-100 dark:bg-gray-800 p-6 rounded-xl flex flex-col md:flex-row md:items-center md:justify-between space-y-4 md:space-y-0 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)]"
>
  <!-- Search Input -->
  <div class="flex-1">
    <label for="filter-search" class="sr-only">Search</label>
    <input
      type="text"
      id="filter-search"
      placeholder="Search..."
      class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
    />
  </div>
  <!-- Category Select -->
  <div class="flex-1">
    <label for="filter-category" class="sr-only">Category</label>
    <select
      id="filter-category"
      class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
    >
      <option>All Categories</option>
      <option>Marketing</option>
      <option>Finance</option>
      <option>HR</option>
    </select>
  </div>
  <!-- Status Select -->
  <div class="flex-1">
    <label for="filter-status" class="sr-only">Status</label>
    <select
      id="filter-status"
      class="w-full px-4 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
    >
      <option>All Status</option>
      <option>Active</option>
      <option>Inactive</option>
    </select>
  </div>
  <!-- Apply Button -->
  <div>
    <button
      type="button"
      class="px-6 py-2 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 shadow-[8px_8px_16px_rgba(163,163,163,0.2),-8px_-8px_16px_rgba(255,255,255,0.7)] dark:shadow-[8px_8px_16px_rgba(0,0,0,0.6),-8px_-8px_16px_rgba(0,0,0,0.2)] transition"
    >
      Apply Filters
    </button>
  </div>
</section>

3D Shopping Cart Component

A visually striking shopping cart component with 3D design elements that create depth and engagement. Uses a triadic color scheme (primary blue, vivid red, and amber yellow) for visual interest. This complex interface includes product listings with images, quantity controls, price summaries, and hover effects that simulate 3D movement. Fully responsive with dark theme support. The component is designed for a content/blog environment where readers might purchase recommended products while consuming content.

Open Preview

                <!-- 3D Shopping Cart Component with Triadic Color Scheme -->
<div class="w-full max-w-4xl mx-auto bg-white dark:bg-gray-900 rounded-xl overflow-hidden shadow-2xl transform transition-all duration-300 hover:scale-[1.02] perspective-1000">
  <!-- Cart Header with 3D Effect -->
  <div class="relative bg-blue-600 dark:bg-blue-800 text-white p-6 transform hover:skew-x-1 transition-transform duration-200">
    <div class="flex justify-between items-center">
      <h2 class="text-2xl font-bold transform translate-z-4 relative z-10">Shopping Cart</h2>
      <span class="bg-amber-500 dark:bg-amber-600 px-4 py-2 rounded-full font-bold shadow-lg transform hover:-translate-y-1 hover:shadow-xl transition-all duration-300">4 Items</span>
    </div>
    <!-- Decorative 3D Elements -->
    <div class="absolute -bottom-3 left-0 w-full h-3 bg-blue-700 dark:bg-blue-900 skew-x-2 transform-gpu"></div>
  </div>

  <!-- Cart Items Container -->
  <div class="divide-y divide-gray-200 dark:divide-gray-700">
    <!-- Product 1 -->
    <div class="p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200 transform hover:-translate-y-1">
      <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
        <!-- Product Image with 3D Effect -->
        <div class="relative w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0">
          <img src="https://picsum.photos/seed/prod1/200/200" alt="Product" class="w-full h-full object-cover rounded-lg shadow-md transform transition-all duration-300 hover:rotate-2 hover:scale-110 z-10" />
          <div class="absolute inset-0 bg-amber-500 dark:bg-amber-600 opacity-30 rounded-lg transform translate-x-1 translate-y-1 -z-10"></div>
        </div>
        
        <!-- Product Details -->
        <div class="flex-grow space-y-2">
          <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start">
            <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">Premium Headphones</h3>
            <div class="text-lg font-bold text-red-600 dark:text-red-400">$129.99</div>
          </div>
          <p class="text-sm text-gray-600 dark:text-gray-300">Noise-cancelling wireless headphones with premium sound quality</p>
          
          <!-- Interactive Elements -->
          <div class="flex flex-wrap gap-4 mt-3 items-center">
            <!-- Quantity Selector with 3D effect -->
            <div class="flex items-center space-x-1 bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden shadow-inner p-1">
              <button class="w-8 h-8 flex items-center justify-center bg-blue-600 dark:bg-blue-700 text-white rounded-md transform transition-transform hover:scale-105 active:scale-95">-</button>
              <span class="w-8 text-center font-medium text-gray-800 dark:text-gray-200">1</span>
              <button class="w-8 h-8 flex items-center justify-center bg-blue-600 dark:bg-blue-700 text-white rounded-md transform transition-transform hover:scale-105 active:scale-95">+</button>
            </div>
            
            <!-- Save and Remove Buttons -->
            <button class="text-amber-600 dark:text-amber-400 font-medium hover:underline transform hover:translate-y-[-2px] transition-all">Save for Later</button>
            <button class="text-red-600 dark:text-red-400 font-medium hover:underline transform hover:translate-y-[-2px] transition-all">Remove</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Product 2 -->
    <div class="p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200 transform hover:-translate-y-1">
      <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
        <!-- Product Image with 3D Effect -->
        <div class="relative w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0">
          <img src="https://picsum.photos/seed/prod2/200/200" alt="Product" class="w-full h-full object-cover rounded-lg shadow-md transform transition-all duration-300 hover:rotate-2 hover:scale-110 z-10" />
          <div class="absolute inset-0 bg-red-500 dark:bg-red-600 opacity-30 rounded-lg transform translate-x-1 translate-y-1 -z-10"></div>
        </div>
        
        <!-- Product Details -->
        <div class="flex-grow space-y-2">
          <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start">
            <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">Smart Watch Pro</h3>
            <div class="text-lg font-bold text-red-600 dark:text-red-400">$249.99</div>
          </div>
          <p class="text-sm text-gray-600 dark:text-gray-300">Fitness tracker with heart rate monitor and GPS</p>
          
          <!-- Interactive Elements -->
          <div class="flex flex-wrap gap-4 mt-3 items-center">
            <!-- Quantity Selector with 3D effect -->
            <div class="flex items-center space-x-1 bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden shadow-inner p-1">
              <button class="w-8 h-8 flex items-center justify-center bg-blue-600 dark:bg-blue-700 text-white rounded-md transform transition-transform hover:scale-105 active:scale-95">-</button>
              <span class="w-8 text-center font-medium text-gray-800 dark:text-gray-200">2</span>
              <button class="w-8 h-8 flex items-center justify-center bg-blue-600 dark:bg-blue-700 text-white rounded-md transform transition-transform hover:scale-105 active:scale-95">+</button>
            </div>
            
            <!-- Save and Remove Buttons -->
            <button class="text-amber-600 dark:text-amber-400 font-medium hover:underline transform hover:translate-y-[-2px] transition-all">Save for Later</button>
            <button class="text-red-600 dark:text-red-400 font-medium hover:underline transform hover:translate-y-[-2px] transition-all">Remove</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Product 3 -->
    <div class="p-4 sm:p-6 hover:bg-gray-50 dark:hover:bg-gray-800 transition-all duration-200 transform hover:-translate-y-1">
      <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4">
        <!-- Product Image with 3D Effect -->
        <div class="relative w-24 h-24 sm:w-28 sm:h-28 flex-shrink-0">
          <img src="https://picsum.photos/seed/prod3/200/200" alt="Product" class="w-full h-full object-cover rounded-lg shadow-md transform transition-all duration-300 hover:rotate-2 hover:scale-110 z-10" />
          <div class="absolute inset-0 bg-blue-500 dark:bg-blue-600 opacity-30 rounded-lg transform translate-x-1 translate-y-1 -z-10"></div>
        </div>
        
        <!-- Product Details -->
        <div class="flex-grow space-y-2">
          <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start">
            <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100">Digital Camera</h3>
            <div class="text-lg font-bold text-red-600 dark:text-red-400">$349.99</div>
          </div>
          <p class="text-sm text-gray-600 dark:text-gray-300">20MP digital camera with 4K video recording and image stabilization</p>
          
          <!-- Interactive Elements -->
          <div class="flex flex-wrap gap-4 mt-3 items-center">
            <!-- Quantity Selector with 3D effect -->
            <div class="flex items-center space-x-1 bg-gray-100 dark:bg-gray-800 rounded-lg overflow-hidden shadow-inner p-1">
              <button class="w-8 h-8 flex items-center justify-center bg-blue-600 dark:bg-blue-700 text-white rounded-md transform transition-transform hover:scale-105 active:scale-95">-</button>
              <span class="w-8 text-center font-medium text-gray-800 dark:text-gray-200">1</span>
              <button class="w-8 h-8 flex items-center justify-center bg-blue-600 dark:bg-blue-700 text-white rounded-md transform transition-transform hover:scale-105 active:scale-95">+</button>
            </div>
            
            <!-- Save and Remove Buttons -->
            <button class="text-amber-600 dark:text-amber-400 font-medium hover:underline transform hover:translate-y-[-2px] transition-all">Save for Later</button>
            <button class="text-red-600 dark:text-red-400 font-medium hover:underline transform hover:translate-y-[-2px] transition-all">Remove</button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Cart Summary with 3D Effect -->
  <div class="relative bg-gray-50 dark:bg-gray-800 p-6 transform hover:skew-x-1 transition-transform duration-300">
    <!-- Decorative 3D Element -->
    <div class="absolute -top-3 left-0 w-full h-3 bg-gray-200 dark:bg-gray-700 skew-x-2 transform-gpu"></div>
    
    <div class="space-y-4">
      <!-- Pricing Summary -->
      <div class="space-y-2">
        <div class="flex justify-between text-gray-600 dark:text-gray-300">
          <span>Subtotal</span>
          <span>$729.97</span>
        </div>
        <div class="flex justify-between text-gray-600 dark:text-gray-300">
          <span>Shipping</span>
          <span>$9.99</span>
        </div>
        <div class="flex justify-between text-gray-600 dark:text-gray-300">
          <span>Tax</span>
          <span>$58.40</span>
        </div>
        <div class="h-px bg-gray-200 dark:bg-gray-700 my-2"></div>
        <div class="flex justify-between font-bold text-lg text-gray-900 dark:text-white">
          <span>Total</span>
          <span>$798.36</span>
        </div>
      </div>
      
      <!-- Promo Code Input -->
      <div class="flex flex-wrap gap-2">
        <input type="text" placeholder="Promo code" class="flex-grow px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent shadow-sm transform transition-all duration-200 focus:scale-[1.02]" />
        <button class="px-4 py-2 bg-amber-500 dark:bg-amber-600 text-white font-medium rounded-lg shadow-md transform transition-all duration-200 hover:scale-105 hover:shadow-lg active:scale-95">Apply</button>
      </div>
      
      <!-- Checkout Button with 3D Effect -->
      <button class="relative w-full py-3 bg-red-600 dark:bg-red-700 text-white text-lg font-bold rounded-lg shadow-lg transform transition-all duration-300 hover:translate-y-[-2px] hover:shadow-xl active:translate-y-0 active:shadow-md overflow-hidden">
        <div class="absolute inset-0 flex items-center justify-center">
          <span class="transform transition-transform group-hover:translate-z-4">Checkout</span>
        </div>
        <div class="absolute bottom-0 left-0 w-full h-1 bg-red-800 dark:bg-red-900"></div>
      </button>
      
      <!-- Continue Shopping Link -->
      <div class="text-center">
        <a href="#" class="inline-flex items-center text-blue-600 dark:text-blue-400 font-medium hover:underline transform transition-all duration-200 hover:translate-y-[-2px]">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
          </svg>
          Continue Reading
        </a>
      </div>
    </div>
  </div>
  
  <!-- Recently Viewed Section -->
  <div class="p-6 bg-white dark:bg-gray-900 border-t border-gray-200 dark:border-gray-700">
    <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 mb-4">Recently Viewed</h3>
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
      <!-- Item 1 -->
      <div class="group relative overflow-hidden rounded-lg shadow-md transform transition-all duration-300 hover:scale-105 hover:rotate-1 hover:shadow-xl">
        <img src="https://picsum.photos/seed/recent1/200/200" alt="Recent item" class="w-full h-24 object-cover" />
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
          <div class="absolute bottom-2 left-2 text-white text-sm font-medium">Wireless Earbuds</div>
        </div>
      </div>
      
      <!-- Item 2 -->
      <div class="group relative overflow-hidden rounded-lg shadow-md transform transition-all duration-300 hover:scale-105 hover:rotate-1 hover:shadow-xl">
        <img src="https://picsum.photos/seed/recent2/200/200" alt="Recent item" class="w-full h-24 object-cover" />
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
          <div class="absolute bottom-2 left-2 text-white text-sm font-medium">Portable Speaker</div>
        </div>
      </div>
      
      <!-- Item 3 -->
      <div class="group relative overflow-hidden rounded-lg shadow-md transform transition-all duration-300 hover:scale-105 hover:rotate-1 hover:shadow-xl">
        <img src="https://picsum.photos/seed/recent3/200/200" alt="Recent item" class="w-full h-24 object-cover" />
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
          <div class="absolute bottom-2 left-2 text-white text-sm font-medium">Smart Light Bulb</div>
        </div>
      </div>
      
      <!-- Item 4 -->
      <div class="group relative overflow-hidden rounded-lg shadow-md transform transition-all duration-300 hover:scale-105 hover:rotate-1 hover:shadow-xl">
        <img src="https://picsum.photos/seed/recent4/200/200" alt="Recent item" class="w-full h-24 object-cover" />
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity">
          <div class="absolute bottom-2 left-2 text-white text-sm font-medium">Tablet Stand</div>
        </div>
      </div>
    </div>
  </div>
</div>

Wishlist Component

A responsive Wishlist component designed for a dashboard, featuring a monochromatic color scheme and a 3D design style.

Open Preview

                <div class="flex flex-col items-center justify-center p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform transition-transform hover:scale-105">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">Wishlist</h2>
    <ul class="w-full">
        <li class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md mb-4 transform transition-all hover:shadow-xl hover:scale-105">
            <div class="flex items-center">
                <img src="https://picsum.photos/60/60" alt="Item Image" class="w-16 h-16 rounded-full mr-4">
                <div>
                    <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Item Title 1</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description of item 1.</p>
                </div>
            </div>
            <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none">Add</button>
        </li>
        <li class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md mb-4 transform transition-all hover:shadow-xl hover:scale-105">
            <div class="flex items-center">
                <img src="https://picsum.photos/60/60" alt="Item Image" class="w-16 h-16 rounded-full mr-4">
                <div>
                    <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Item Title 2</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description of item 2.</p>
                </div>
            </div>
            <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none">Add</button>
        </li>
        <li class="flex items-center justify-between p-4 bg-white dark:bg-gray-700 rounded-lg shadow-md mb-4 transform transition-all hover:shadow-xl hover:scale-105">
            <div class="flex items-center">
                <img src="https://picsum.photos/60/60" alt="Item Image" class="w-16 h-16 rounded-full mr-4">
                <div>
                    <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Item Title 3</h3>
                    <p class="text-gray-600 dark:text-gray-400">Description of item 3.</p>
                </div>
            </div>
            <button class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 focus:outline-none">Add</button>
        </li>
    </ul>
</div>

Shopping Cart Component

A responsive shopping cart component designed for an e-commerce platform, featuring a 3D design style and a pastel color scheme. It is equipped with multiple interactive elements such as product listings, quantities, and a checkout button, supporting dark theme.

Open Preview

                <div class="min-h-screen bg-white dark:bg-gray-800 transition-all p-6 rounded-lg shadow-lg transform hover:scale-105 ease-in-out duration-300">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 text-center">Shopping Cart</h2>
    <div class="mt-4">
        <div class="space-y-4">
            <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/80/80" alt="Product Image" class="rounded-lg shadow-lg" />
                <div class="flex-1 mx-4">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-200">Product Title</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-300">$19.99</p>
                </div>
                <div class="flex items-center">
                    <button class="px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 ease-in-out duration-200">+</button>
                    <span class="mx-2 text-gray-800 dark:text-gray-100">1</span>
                    <button class="px-3 py-1 text-sm bg-red-500 text-white rounded hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 ease-in-out duration-200">-</button>
                </div>
            </div>
            <div class="flex items-center justify-between p-4 bg-gray-100 dark:bg-gray-700 rounded-lg shadow-md">
                <img src="https://picsum.photos/80/80?random=1" alt="Product Image" class="rounded-lg shadow-lg" />
                <div class="flex-1 mx-4">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-gray-200">Another Product</h3>
                    <p class="text-sm text-gray-600 dark:text-gray-300">$29.99</p>
                </div>
                <div class="flex items-center">
                    <button class="px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 ease-in-out duration-200">+</button>
                    <span class="mx-2 text-gray-800 dark:text-gray-100">1</span>
                    <button class="px-3 py-1 text-sm bg-red-500 text-white rounded hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 ease-in-out duration-200">-</button>
                </div>
            </div>
        </div>
        <div class="mt-6 flex justify-between items-center p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-lg">
            <span class="text-xl font-semibold text-gray-800 dark:text-gray-100">Total</span>
            <span class="text-xl font-semibold text-gray-800 dark:text-gray-100">$49.98</span>
        </div>
        <div class="mt-4">
            <button class="w-full bg-green-500 text-white text-lg font-semibold rounded-lg py-2 hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-800 transition duration-200">
                Checkout
            </button>
        </div>
    </div>
</div>

Product Comparison Component

A Product Comparison Component with a Brutalist design style, featuring vibrant colors and moderate complexity to showcase products or work in a portfolio.

Open Preview

                <div class="bg-gray-900 dark:bg-gray-800 text-white p-5 rounded-lg shadow-lg">
  <h1 class="text-3xl font-bold text-violet-500">Product Comparison</h1>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-5 mt-5">
    <div class="bg-red-600 p-4 rounded-lg shadow-md">
      <img src="https://picsum.photos/200/150?random=1" alt="Product 1" class="w-full h-auto rounded-lg mb-2">
      <h2 class="text-2xl font-semibold">Product One</h2>
      <p class="mt-2">Description of Product One. This product is amazing!</p>
      <div class="mt-3 flex justify-between">
        <span class="font-bold text-lg">$99</span>
        <button class="bg-white text-red-600 px-4 py-2 rounded-lg">Compare</button>
      </div>
    </div>
    <div class="bg-green-600 p-4 rounded-lg shadow-md">
      <img src="https://picsum.photos/200/150?random=2" alt="Product 2" class="w-full h-auto rounded-lg mb-2">
      <h2 class="text-2xl font-semibold">Product Two</h2>
      <p class="mt-2">Description of Product Two. A fantastic choice!</p>
      <div class="mt-3 flex justify-between">
        <span class="font-bold text-lg">$149</span>
        <button class="bg-white text-green-600 px-4 py-2 rounded-lg">Compare</button>
      </div>
    </div>
    <div class="bg-blue-600 p-4 rounded-lg shadow-md">
      <img src="https://picsum.photos/200/150?random=3" alt="Product 3" class="w-full h-auto rounded-lg mb-2">
      <h2 class="text-2xl font-semibold">Product Three</h2>
      <p class="mt-2">Description of Product Three. Best-selling product!</p>
      <div class="mt-3 flex justify-between">
        <span class="font-bold text-lg">$199</span>
        <button class="bg-white text-blue-600 px-4 py-2 rounded-lg">Compare</button>
      </div>
    </div>
  </div>
  <div class="mt-8">
    <h1 class="text-2xl font-bold text-violet-500">User Reviews</h1>
    <div class="flex flex-col space-y-4 mt-3">
      <div class="flex bg-gray-700 dark:bg-gray-600 p-3 rounded-lg">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
        <div>
          <p class="font-semibold">John Doe</p>
          <p class="text-gray-300 dark:text-gray-200">"Loved this product, it changed my life!"</p>
        </div>
      </div>
      <div class="flex bg-gray-700 dark:bg-gray-600 p-3 rounded-lg">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3">
        <div>
          <p class="font-semibold">Jane Smith</p>
          <p class="text-gray-300 dark:text-gray-200">"I wasn't sure at first, but now I can't live without it!"</p>
        </div>
      </div>
    </div>
  </div>
</div>

360° Viewer Component

A Material Design inspired 360° Viewer Component with vibrant colors for showcasing work or products, with responsive design and dark mode support.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <div class="relative w-full max-w-lg rounded-lg shadow-lg overflow-hidden">
        <!-- 360 Viewer Wrapper -->
        <div class="aspect-w-16 aspect-h-9">
            <img class="rounded-lg object-cover" src="https://picsum.photos/800/600" alt="360° Product View" />
        </div>
        <div class="absolute inset-0 flex items-center justify-center">
            <div class="bg-white dark:bg-gray-800 rounded-full p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
                <img class="w-16 h-16 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" />
            </div>
        </div>
    </div>

    <div class="mt-4 text-center">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Product Name</h2>
        <p class="text-gray-600 dark:text-gray-300">A brief description of the product showcasing its features and benefits.</p>
    </div>

    <div class="flex justify-center mt-4 space-x-4">
        <button class="bg-blue-500 dark:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">View Details</button>
        <button class="bg-green-500 dark:bg-green-700 text-white font-semibold py-2 px-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 ease-in-out">Buy Now</button>
    </div>
</div>

User Mentions Component

A simple User Mentions Component designed in a Brutalist style with a grayscale color scheme, suitable for business and corporate websites. It includes user mentions with avatars and is responsive with dark theme support.

Open Preview

                <div class="bg-white dark:bg-gray-800 p-6 rounded-lg shadow-md">
  <h2 class="text-2xl font-bold text-black dark:text-white">User Mentions</h2>
  <ul class="mt-4 space-y-4">
    <li class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full">
      <p class="text-gray-800 dark:text-gray-200">@john_doe</p>
    </li>
    <li class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full">
      <p class="text-gray-800 dark:text-gray-200">@jane_smith</p>
    </li>
    <li class="flex items-center space-x-4">
      <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full">
      <p class="text-gray-800 dark:text-gray-200">@mark_twain</p>
    </li>
  </ul>
  <button class="mt-4 px-4 py-2 bg-gray-800 dark:bg-white text-white dark:text-gray-800 rounded-lg hover:bg-gray-700 dark:hover:bg-gray-300 focus:outline-none">See More Mentions</button>
</div>

1 ... 168 169 170 171 172 ... 335