Search Components

All Components

Browse all available Tailwind CSS components

Neumorphism Badges

This is a Neumorphism-style Badges Component with a Pastel color scheme, designed for a Portfolio and using Tailwind CSS.

Open Preview

                <div class="flex flex-wrap justify-center gap-4 p-4 bg-gray-200 dark:bg-gray-800">
  <span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
    HTML
  </span>
  <span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
    CSS
  </span>
  <span class="inline-flex items-center px-3 py-1 text-sm font-medium text-gray-700 bg-gray-200 rounded-full dark:text-gray-200 dark:bg-gray-700 shadow-neumorphism-light dark:shadow-neumorphism-dark">
    Tailwind CSS
  </span>
  nocode
</div>

<style>
.shadow-neumorphism-light {
  box-shadow: 5px 5px 10px #a3b1c6, -5px -5px 10px #ffffff;
}

.dark .shadow-neumorphism-dark {
  box-shadow: 5px 5px 10px #454545, -5px -5px 10px #3a3a3a;
}
</style>

Retro E-commerce Navigation Bar

A retro/vintage-styled grayscale navigation component for e-commerce, featuring moderate complexity with interactive elements like hovers and dropdowns. It is responsive and includes dark mode support using Tailwind CSS.

Open Preview

                <nav class="bg-white text-gray-700 dark:bg-gray-900 dark:text-gray-300 shadow-md">
  <div class="container mx-auto px-4 py-4 flex justify-between items-center">
    <div class="text-lg font-bold">RetroShop</div>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">Home</a>
      <div class="relative group">
        <button class="hover:text-gray-900 dark:hover:text-white transition duration-300">Shop</button>
        <div class="absolute hidden group-hover:block bg-white dark:bg-gray-800 shadow-lg mt-2 py-2 w-48">
          <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">All Products</a>
          <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Category 1</a>
          <a href="#" class="block px-4 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Category 2</a>
        </div>
      </div>
      <a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">About</a>
      <a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">Contact</a>
    </div>
    <div class="flex items-center space-x-4">
      <a href="#" class="hover:text-gray-900 dark:hover:text-white transition duration-300">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
      </a>
      <button class="md:hidden">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </div>
  </div>
  </nav>

Pastel3DBlogContentCard

A responsive Content Display Component for blogs or content sections, designed with Tailwind CSS. It features a simple layout with a 3D-inspired aesthetic using shadows and hover effects. The color scheme is soft pastel for light mode, with a compatible dark mode theme. The component includes an image, title, metadata (author/date), excerpt, and a 'Read More' button. Placeholder images are used from picsum.photos and randomuser.me.

Open Preview

                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pastel 3D Blog Content Card</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        // You can define specific pastel colors here if needed,
                        // but for this example, we primarily use Tailwind's default palette
                        // that offers pastel-like shades (e.g., sky-50, sky-100, sky-200).
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-sky-50 dark:bg-slate-900 font-sans">

    <div class="min-h-screen flex flex-col justify-center items-center p-4 sm:p-8">
        <div class="text-center mb-8">
            <h1 class="text-3xl sm:text-4xl font-bold text-slate-800 dark:text-white">Content Display Component</h1>
            <p class="text-slate-600 dark:text-slate-400">3D Design, Pastel Colors, Simple Complexity</p>
        </div>

        <article class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-[1.02] transition-transform duration-300 ease-out max-w-2xl w-full group">
            <!-- Image Section -->
            <div class="relative aspect-video overflow-hidden">
                <img src="https://picsum.photos/seed/contentcard3d/800/450" alt="Abstract tech background" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-black/10 to-transparent"></div>
            </div>

            <!-- Content Section -->
            <div class="p-6 sm:p-8">
                <!-- Title -->
                <h2 class="text-2xl sm:text-3xl font-bold text-sky-600 dark:text-sky-300 mb-3 group-hover:text-sky-500 dark:group-hover:text-sky-200 transition-colors duration-300">
                    Exploring the Depths of 3D Web Design
                </h2>

                <!-- Meta Information -->
                <div class=

Image Lightbox Component

A responsive Image Lightbox component designed with 3D elements, vibrant colors and moderate complexity for business/corporate websites. It supports dark mode styling using Tailwind CSS.

Open Preview

                <div class="relative p-4 max-w-lg mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <!-- Thumbnail Images -->
        <div class="group">
            <div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
                <img src="https://picsum.photos/400/300?random=1" alt="Image 1" class="w-full h-full object-cover rounded-lg">
                <div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
                    <button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
                </div>
            </div>
        </div>
        <div class="group">
            <div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
                <img src="https://picsum.photos/400/300?random=2" alt="Image 2" class="w-full h-full object-cover rounded-lg">
                <div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
                    <button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
                </div>
            </div>
        </div>
        <div class="group">
            <div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
                <img src="https://picsum.photos/400/300?random=3" alt="Image 3" class="w-full h-full object-cover rounded-lg">
                <div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
                    <button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
                </div>
            </div>
        </div>
        <div class="group">
            <div class="relative overflow-hidden rounded-lg shadow-lg transform hover:scale-105 transition-transform duration-300">
                <img src="https://picsum.photos/400/300?random=4" alt="Image 4" class="w-full h-full object-cover rounded-lg">
                <div class="absolute inset-0 flex items-center justify-center transition-opacity duration-300 opacity-0 group-hover:opacity-100 bg-black bg-opacity-50">
                    <button class="bg-vibrant-500 text-white rounded-full p-2 focus:outline-none">View</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Dark Mode Support -->
<style>
    .bg-vibrant-500 {
        background-color: #ff4c4c; /* Example vibrant color */
    }

    @media (prefers-color-scheme: dark) {
        .bg-vibrant-500 {
            background-color: #ff6b6b; /* Dark mode vibrant color */
        }
    }
</style>

Back to Top Button

A simple and elegant back-to-top button that appears fixed at the bottom-right corner of the screen. Features a subtle pastel color scheme and smooth hover/focus microinteractions. The button includes a responsive design with built-in dark mode support. When hovered, the button gently scales up and changes background color to provide visual feedback. The component uses Tailwind CSS classes only, with no JavaScript required.

Open Preview

                <button onclick="window.scrollTo({top: 0, behavior: 'smooth'})" class="fixed bottom-6 right-6 p-3 rounded-full bg-pink-200 dark:bg-pink-900 text-pink-700 dark:text-pink-200 shadow-md hover:bg-pink-300 dark:hover:bg-pink-800 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-700 hover:scale-110 focus:scale-110 transition-all duration-300 group">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform group-hover:-translate-y-1 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
    <path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18" />
  </svg>
  <span class="sr-only">Back to top</span>
</button>

Accordion Component

Responsive Accordion Component with dark theme support, monochromatic color scheme, and microinteractions for a portfolio website.

Open Preview

                <div class="w-full max-w-md mx-auto my-8">
  <div class="shadow-md rounded-md overflow-hidden dark:bg-gray-800">
    <div class="border-b border-gray-200 dark:border-gray-700">
      <button class="flex justify-between items-center w-full py-4 px-6 text-left text-gray-700 dark:text-gray-300 font-semibold focus:outline-none">
        <span>Section 1</span>
        <svg class="w-4 h-4 transform transition-transform duration-300" 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="M19 9l-7 7-7-7"></path></svg>
      </button>
      <div class="p-6 border-t border-gray-200 dark:border-gray-700" style="display: none;">
        <p class="text-gray-600 dark:text-gray-400">Content for section 1 goes here.</p>
      </div>
    </div>

    <div class="border-b border-gray-200 dark:border-gray-700">
      <button class="flex justify-between items-center w-full py-4 px-6 text-left text-gray-700 dark:text-gray-300 font-semibold focus:outline-none">
        <span>Section 2</span>
        <svg class="w-4 h-4 transform transition-transform duration-300" 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="M19 9l-7 7-7-7"></path></svg>
      </button>
      <div class="p-6 border-t border-gray-200 dark:border-gray-700" style="display: none;">
        <p class="text-gray-600 dark:text-gray-400">Content for section 2 goes here.</p>
      </div>
    </div>

    <div>
      <button class="flex justify-between items-center w-full py-4 px-6 text-left text-gray-700 dark:text-gray-300 font-semibold focus:outline-none">
        <span>Section 3</span>
        <svg class="w-4 h-4 transform transition-transform duration-300" 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="M19 9l-7 7-7-7"></path></svg>
      </button>
      <div class="p-6 border-t border-gray-200 dark:border-gray-700" style="display: none;">
        <p class="text-gray-600 dark:text-gray-400">Content for section 3 goes here.</p>
      </div>
    </div>
  </div>
</div>

RetroTooltip

A simple and responsive tooltip component with Retro/Vintage style and Grayscale color scheme, suitable for business websites. Supports dark theme.

Open Preview

                <div class="relative inline-block">
  <button class="text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 px-3 py-1 rounded-md font-mono">Hover Me</button>
  <div class="invisible absolute z-10 top-full left-1/2 transform -translate-x-1/2 mt-2 w-48 p-2 bg-gray-800 dark:bg-gray-200 text-gray-200 dark:text-gray-800 text-sm rounded shadow-lg opacity-0 transition-all duration-300 group-hover:visible group-hover:opacity-100">
    <p class="font-mono">This is a retro-style tooltip!</p>
  </div>
</div>

EarthyProductComparison

A responsive product comparison component for e-commerce, featuring three product cards. Styled with Tailwind CSS using an earth tone color scheme (browns, greens, ambers) and simple 3D design elements like shadows and accent bars for depth and engagement. Includes dark mode support and uses placeholder images from picsum.photos.

Open Preview

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl sm:text-5xl font-extrabold text-center text-stone-800 dark:text-stone-100 mb-6">
      Compare Our Outdoor Gear
    </h1>
    <p class="text-lg text-center text-stone-600 dark:text-stone-300 mb-12">
      Find the perfect gear that fits your adventurous needs and budget.
    </p>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Product 1 -->
      <div class="bg-white dark:bg-stone-800 rounded-xl shadow-2xl transform transition-all duration-300 hover:scale-105 flex flex-col">
        <div class="h-3 bg-lime-700 dark:bg-lime-600 rounded-t-xl"></div>
        <div class="p-6 flex flex-col flex-grow">
          <img src="https://picsum.photos/seed/ecotent/400/300" alt="Eco Nomad Tent" class="w-full h-48 object-cover rounded-md mb-6 self-center shadow-lg">
          <h3 class="text-2xl font-semibold text-stone-700 dark:text-stone-200 mb-2 text-center">Eco Nomad Tent</h3>
          <p class="text-sm text-stone-500 dark:text-stone-400 mb-4 text-center min-h-[4.5rem] sm:min-h-[3rem]">Durable and eco-friendly tent for the conscious explorer. Made with recycled materials.</p>
          
          <div class="my-4 border-t border-stone-200 dark:border-stone-700"></div>

          <ul class="space-y-3 text-sm text-stone-600 dark:text-stone-300 flex-grow mb-6">
            <li class="flex items-start">
              <svg class="w-5 h-5 text-lime-600 dark:text-lime-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Recycled PET Fabrics
            </li>
            <li class="flex items-start">
              <svg class="w-5 h-5 text-lime-600 dark:text-lime-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Sleeps 2-3 People
            </li>
            <li class="flex items-start">
              <svg class="w-5 h-5 text-lime-600 dark:text-lime-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Excellent Ventilation
            </li>
             <li class="flex items-start">
              <svg class="w-5 h-5 text-stone-400 dark:text-stone-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 000 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>
              Basic Weatherproofing
            </li>
          </ul>
          
          <div class="mt-auto">
            <div class="text-3xl font-bold text-amber-700 dark:text-amber-500 mb-6 text-center">$199</div>
            <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600 text-white font-semibold py-3 px-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
              View Details
            </button>
          </div>
        </div>
      </div>

      <!-- Product 2 (Highlight/Most Popular) -->
      <div class="bg-white dark:bg-stone-800 rounded-xl shadow-2xl transform transition-all duration-300 hover:scale-105 ring-2 ring-amber-600 dark:ring-amber-500 flex flex-col relative">
        <div class="absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10">
            <span class="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-semibold bg-amber-600 text-white shadow-lg">
                Most Popular
            </span>
        </div>
        <div class="h-3 bg-amber-600 dark:bg-amber-500 rounded-t-xl"></div>
        <div class="p-6 flex flex-col flex-grow pt-8">
          <img src="https://picsum.photos/seed/terrapack/400/300" alt="Terra Peak Backpack" class="w-full h-48 object-cover rounded-md mb-6 self-center shadow-lg">
          <h3 class="text-2xl font-semibold text-stone-700 dark:text-stone-200 mb-2 text-center">Terra Peak Backpack</h3>
          <p class="text-sm text-stone-500 dark:text-stone-400 mb-4 text-center min-h-[4.5rem] sm:min-h-[3rem]">All-weather backpack with ergonomic design for long treks. Premium, sustainable materials.</p>
          
          <div class="my-4 border-t border-stone-200 dark:border-stone-700"></div>

          <ul class="space-y-3 text-sm text-stone-600 dark:text-stone-300 flex-grow mb-6">
            <li class="flex items-start">
              <svg class="w-5 h-5 text-lime-600 dark:text-lime-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Sustainable Hemp & Cork Accents
            </li>
            <li class="flex items-start">
              <svg class="w-5 h-5 text-lime-600 dark:text-lime-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              50L Capacity with Smart Pockets
            </li>
            <li class="flex items-start">
               <svg class="w-5 h-5 text-lime-600 dark:text-lime-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Fully Waterproof Shell
            </li>
            <li class="flex items-start">
               <svg class="w-5 h-5 text-lime-600 dark:text-lime-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Integrated Rain Cover & Hydration Sleeve
            </li>
          </ul>
          
          <div class="mt-auto">
            <div class="text-3xl font-bold text-amber-700 dark:text-amber-500 mb-6 text-center">$279</div>
            <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600 text-white font-semibold py-3 px-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
              Add to Cart
            </button>
          </div>
        </div>
      </div>

      <!-- Product 3 -->
      <div class="bg-white dark:bg-stone-800 rounded-xl shadow-2xl transform transition-all duration-300 hover:scale-105 flex flex-col">
        <div class="h-3 bg-emerald-700 dark:bg-emerald-600 rounded-t-xl"></div>
        <div class="p-6 flex flex-col flex-grow">
          <img src="https://picsum.photos/seed/pathboots/400/300" alt="Pathfinder Boots" class="w-full h-48 object-cover rounded-md mb-6 self-center shadow-lg">
          <h3 class="text-2xl font-semibold text-stone-700 dark:text-stone-200 mb-2 text-center">Pathfinder Boots</h3>
          <p class="text-sm text-stone-500 dark:text-stone-400 mb-4 text-center min-h-[4.5rem] sm:min-h-[3rem]">Lightweight and comfortable boots for day hikes and trail walking. Great value for beginners.</p>
          
          <div class="my-4 border-t border-stone-200 dark:border-stone-700"></div>

          <ul class="space-y-3 text-sm text-stone-600 dark:text-stone-300 flex-grow mb-6">
            <li class="flex items-start">
              <svg class="w-5 h-5 text-lime-600 dark:text-lime-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Breathable Mesh Uppers
            </li>
            <li class="flex items-start">
              <svg class="w-5 h-5 text-lime-600 dark:text-lime-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Good Traction Rubber Sole
            </li>
            <li class="flex items-start">
              <svg class="w-5 h-5 text-stone-400 dark:text-stone-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 000 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>
              Minimal Ankle Support
            </li>
             <li class="flex items-start">
              <svg class="w-5 h-5 text-stone-400 dark:text-stone-500 mr-2 flex-shrink-0 mt-0.5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 000 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path></svg>
              Not Fully Waterproof
            </li>
          </ul>
          
          <div class="mt-auto">
             <div class="text-3xl font-bold text-amber-700 dark:text-amber-500 mb-6 text-center">$129</div>
            <button class="w-full bg-amber-600 hover:bg-amber-700 dark:bg-amber-500 dark:hover:bg-amber-600 text-white font-semibold py-3 px-6 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">
              Learn More
            </button>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

Badges Component - Dark Mode Earth Tones

A complex badges component system designed with earth tones for a dark mode blog/content interface. The component includes various badge types for article categories, user status, content tags, notifications, and achievement indicators. All using natural earth tone colors with dark mode support. The design is fully responsive and adapts to different screen sizes.

Open Preview

                <!-- Badges Component for Dark Mode Blog with Earth Tones -->
<div class="bg-gray-900 p-6 min-h-screen text-gray-200">
  <div class="max-w-6xl mx-auto space-y-8">
    
    <!-- Badge Showcase Section -->
    <section class="mb-10">
      <h2 class="text-2xl font-semibold text-amber-100 mb-6 border-b border-amber-800/40 pb-2">Badge Components</h2>
      
      <!-- Category Badges -->
      <div class="mb-8">
        <h3 class="text-amber-200 text-lg mb-3">Category Badges</h3>
        <div class="flex flex-wrap gap-3">
          <span class="px-3 py-1 rounded-full text-xs font-medium bg-amber-900/60 text-amber-200 border border-amber-700/70 hover:bg-amber-800/70 transition duration-200">Nature</span>
          <span class="px-3 py-1 rounded-full text-xs font-medium bg-green-900/60 text-green-200 border border-green-800/70 hover:bg-green-800/70 transition duration-200">Environment</span>
          <span class="px-3 py-1 rounded-full text-xs font-medium bg-brown-900/60 text-amber-100 border border-yellow-900/70 hover:bg-yellow-800/70 transition duration-200">Earth</span>
          <span class="px-3 py-1 rounded-full text-xs font-medium bg-teal-900/60 text-teal-200 border border-teal-800/70 hover:bg-teal-800/70 transition duration-200">Science</span>
          <span class="px-3 py-1 rounded-full text-xs font-medium bg-stone-800/60 text-stone-200 border border-stone-700/70 hover:bg-stone-700/70 transition duration-200">Geology</span>
        </div>
      </div>
      
      <!-- Status Badges -->
      <div class="mb-8">
        <h3 class="text-amber-200 text-lg mb-3">Status Badges</h3>
        <div class="flex flex-wrap gap-3">
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-green-900/40 text-green-200 border border-green-700/50">
            <div class="w-2 h-2 bg-green-400 rounded-full mr-1.5 animate-pulse"></div>Active
          </span>
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-amber-900/40 text-amber-200 border border-amber-700/50">
            <div class="w-2 h-2 bg-amber-400 rounded-full mr-1.5"></div>Pending
          </span>
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-red-900/40 text-red-200 border border-red-700/50">
            <div class="w-2 h-2 bg-red-400 rounded-full mr-1.5"></div>Closed
          </span>
          <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium bg-blue-900/40 text-blue-200 border border-blue-700/50">
            <div class="w-2 h-2 bg-blue-400 rounded-full mr-1.5"></div>In Review
          </span>
        </div>
      </div>
      
      <!-- Interactive Tag Badges -->
      <div class="mb-8">
        <h3 class="text-amber-200 text-lg mb-3">Interactive Tag Badges</h3>
        <div class="flex flex-wrap gap-2">
          <button class="flex items-center px-3 py-1 bg-stone-800 hover:bg-stone-700 rounded-lg text-xs font-medium text-stone-200 border border-stone-700 transition duration-200">
            Forest <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 ml-1.5 text-stone-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
          </button>
          <button class="flex items-center px-3 py-1 bg-amber-900/70 hover:bg-amber-800 rounded-lg text-xs font-medium text-amber-100 border border-amber-800 transition duration-200">
            Desert <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 ml-1.5 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
          </button>
          <button class="flex items-center px-3 py-1 bg-emerald-900/70 hover:bg-emerald-800 rounded-lg text-xs font-medium text-emerald-100 border border-emerald-800 transition duration-200">
            Vegetation <svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 ml-1.5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
          </button>
        </div>
      </div>
      
      <!-- Notification Badges -->
      <div class="mb-8">
        <h3 class="text-amber-200 text-lg mb-3">Notification Badges</h3>
        <div class="flex flex-wrap gap-4">
          <div class="relative inline-flex">
            <button class="p-2 bg-stone-800 rounded-full hover:bg-stone-700 transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-stone-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
              </svg>
            </button>
            <span class="absolute top-0 right-0 h-4 w-4 bg-amber-600 rounded-full flex items-center justify-center text-xs font-bold text-white">3</span>
          </div>
          
          <div class="relative inline-flex">
            <button class="p-2 bg-stone-800 rounded-full hover:bg-stone-700 transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-stone-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
            </button>
            <span class="absolute top-0 right-0 h-4 w-4 bg-green-700 rounded-full flex items-center justify-center text-xs font-bold text-white">2</span>
          </div>
          
          <div class="relative inline-flex">
            <button class="p-2 bg-stone-800 rounded-full hover:bg-stone-700 transition-colors">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-stone-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
              </svg>
            </button>
            <span class="absolute top-0 right-0 h-4 w-4 bg-red-700 rounded-full flex items-center justify-center text-xs font-bold text-white">5</span>
          </div>
        </div>
      </div>
      
      <!-- Achievement Badges -->
      <div class="mb-8">
        <h3 class="text-amber-200 text-lg mb-3">Achievement Badges</h3>
        <div class="flex flex-wrap gap-4">
          <div class="flex flex-col items-center">
            <div class="w-12 h-12 bg-gradient-to-br from-amber-700 to-amber-900 rounded-full flex items-center justify-center shadow-lg border-2 border-amber-600">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-amber-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
              </svg>
            </div>
            <span class="text-xs mt-1.5 font-medium text-amber-200">Gold</span>
          </div>
          
          <div class="flex flex-col items-center">
            <div class="w-12 h-12 bg-gradient-to-br from-stone-500 to-stone-700 rounded-full flex items-center justify-center shadow-lg border-2 border-stone-400">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-stone-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <span class="text-xs mt-1.5 font-medium text-stone-200">Silver</span>
          </div>
          
          <div class="flex flex-col items-center">
            <div class="w-12 h-12 bg-gradient-to-br from-yellow-800 to-amber-900 rounded-full flex items-center justify-center shadow-lg border-2 border-yellow-700">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-yellow-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
              </svg>
            </div>
            <span class="text-xs mt-1.5 font-medium text-yellow-200">Bronze</span>
          </div>
          
          <div class="flex flex-col items-center">
            <div class="w-12 h-12 bg-gradient-to-br from-emerald-800 to-teal-900 rounded-full flex items-center justify-center shadow-lg border-2 border-emerald-600">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-emerald-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
            </div>
            <span class="text-xs mt-1.5 font-medium text-emerald-200">Earth</span>
          </div>
        </div>
      </div>
    </section>
    
    <!-- Usage Example in Content Context -->
    <section class="bg-gray-800/50 rounded-xl p-6 border border-gray-700">
      <h2 class="text-2xl font-semibold text-amber-100 mb-6">Implementation Example</h2>
      
      <!-- Article Card with Badges -->
      <div class="bg-gray-800 rounded-lg overflow-hidden shadow-md border border-gray-700 hover:shadow-lg transition duration-300 mb-8">
        <img src="https://picsum.photos/id/29/800/400" alt="Article cover" class="w-full h-56 object-cover object-center">
        
        <div class="p-5">
          <div class="flex flex-wrap gap-2 mb-3">
            <span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-900/60 text-green-200 border border-green-800/70">Environment</span>
            <span class="px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-900/60 text-amber-200 border border-amber-700/70">Conservation</span>
            <span class="inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-green-900/40 text-green-200 border border-green-700/50">
              <div class="w-1.5 h-1.5 bg-green-400 rounded-full mr-1.5"></div>New
            </span>
          </div>
          
          <h3 class="text-xl font-semibold text-amber-50 mb-2">Exploring Forest Ecosystems in the Pacific Northwest</h3>
          <p class="text-gray-300 mb-4">An in-depth look at the diverse ecology and conservation efforts in the temperate rainforests...</p>
          
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <div class="relative">
                <img src="https://randomuser.me/api/portraits/women/24.jpg" alt="Author avatar" class="w-8 h-8 rounded-full border border-amber-600">
                <div class="absolute -bottom-1 -right-1 w-4 h-4 bg-gradient-to-br from-amber-700 to-amber-900 rounded-full flex items-center justify-center shadow-lg border border-amber-600">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-2.5 w-2.5 text-amber-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                  </svg>
                </div>
              </div>
              <div>
                <p class="text-sm font-medium text-amber-100">Olivia Matthews</p>
                <p class="text-xs text-gray-400">Environmental Scientist</p>
              </div>
            </div>
            
            <div class="flex items-center text-gray-400 text-sm">
              <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="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
              </svg>
              2.4k
              <span class="mx-2">•</span>
              <span class="inline-flex items-center">
                <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="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z" />
                </svg>
                42
              </span>
            </div>
          </div>
        </div>
      </div>
      
      <!-- User Profile with Badges -->
      <div class="bg-gray-800 rounded-lg overflow-hidden shadow-md border border-gray-700 p-5">
        <div class="flex flex-col sm:flex-row items-center sm:items-start gap-5">
          <div class="relative">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User profile" class="w-20 h-20 rounded-full border-2 border-amber-700 object-cover">
            <div class="absolute -bottom-1 -right-1 w-5 h-5 bg-green-700 rounded-full flex items-center justify-center shadow-lg border border-green-600">
              <div class="w-2.5 h-2.5 bg-green-400 rounded-full"></div>
            </div>
          </div>
          
          <div class="flex-1 text-center sm:text-left">
            <div class="flex flex-col sm:flex-row sm:items-center gap-2 mb-2">
              <h3 class="text-xl font-bold text-amber-50">Daniel Harrison</h3>
              <div class="flex flex-wrap justify-center sm:justify-start gap-1.5">
                <span class="px-2 py-0.5 rounded-md text-xs font-medium bg-emerald-900/70 text-emerald-200 border border-emerald-800">Contributor</span>
                <span class="flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-amber-900/60 text-amber-200 border border-amber-700/70">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z" />
                  </svg>
                  Verified
                </span>
              </div>
            </div>
            
            <p class="text-gray-300 mb-3">Environmental journalist focused on climate change and conservation efforts around the globe.</p>
            
            <div class="flex flex-wrap justify-center sm:justify-start gap-2 mb-3">
              <div class="flex flex-col items-center bg-stone-700/40 rounded-lg px-3 py-1.5 border border-stone-600/50">
                <span class="text-lg font-semibold text-amber-100">42</span>
                <span class="text-xs text-gray-400">Articles</span>
              </div>
              <div class="flex flex-col items-center bg-stone-700/40 rounded-lg px-3 py-1.5 border border-stone-600/50">
                <span class="text-lg font-semibold text-amber-100">2.1k</span>
                <span class="text-xs text-gray-400">Followers</span>
              </div>
              <div class="flex flex-col items-center bg-stone-700/40 rounded-lg px-3 py-1.5 border border-stone-600/50">
                <span class="text-lg font-semibold text-amber-100">186</span>
                <span class="text-xs text-gray-400">Following</span>
              </div>
            </div>
            
            <div class="flex flex-wrap justify-center sm:justify-start items-center gap-3">
              <p class="text-sm text-gray-400">Achievements:</p>
              <div class="flex space-x-1.5">
                <div class="w-8 h-8 bg-gradient-to-br from-amber-700 to-amber-900 rounded-full flex items-center justify-center shadow-md border border-amber-600" title="Top Contributor">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-amber-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z" />
                  </svg>
                </div>
                <div class="w-8 h-8 bg-gradient-to-br from-emerald-800 to-teal-900 rounded-full flex items-center justify-center shadow-md border border-emerald-600" title="Conservation Expert">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-emerald-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
                <div class="w-8 h-8 bg-gradient-to-br from-stone-500 to-stone-700 rounded-full flex items-center justify-center shadow-md border border-stone-400" title="5 Year Member">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-stone-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</div>

Product Cards Component

A simple e-commerce product card component designed in Material Design style using a grayscale color scheme and responsive design with dark theme support.

Open Preview

                <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3 p-4">
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/200/300" alt="Product Image">
        <div class="p-4">
            <h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title</h2>
            <p class="text-gray-600 dark:text-gray-400">A brief description of the product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$99.99</span>
                <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/200/300?random=2" alt="Product Image">
        <div class="p-4">
            <h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title 2</h2>
            <p class="text-gray-600 dark:text-gray-400">A brief description of the second product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$89.99</span>
                <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/200/300?random=3" alt="Product Image">
        <div class="p-4">
            <h2 class="text-gray-800 dark:text-gray-200 text-lg font-semibold">Product Title 3</h2>
            <p class="text-gray-600 dark:text-gray-400">A brief description of the third product goes here.</p>
            <div class="flex items-center justify-between mt-4">
                <span class="text-gray-800 dark:text-gray-200 text-xl font-bold">$79.99</span>
                <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 rounded px-4 py-2 hover:bg-gray-700 dark:hover:bg-gray-300 transition duration-300">Add to Cart</button>
            </div>
        </div>
    </div>
</div>

1 ... 162 163 164 165 166 ... 335

Search Components

Categories

All Components