Search Components

E-commerce Components

Components specifically designed for online stores

Forum_Community_Component

A responsive and thematic forum/community discussion component with a corporate/professional design style and ocean/blue color scheme, including dark mode support.

Open Preview

                <div class="bg-blue-50 dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8 font-sans">

  <!-- Component Header -->
  <div class="max-w-7xl mx-auto mb-8">
    <h1 class="text-3xl sm:text-4xl font-extrabold text-blue-900 dark:text-blue-200 mb-2">Community Discussions</h1>
    <p class="text-lg text-blue-700 dark:text-blue-300">Engage with our professionals, share insights, and get support.</p>
  </div>

  <!-- Main Content Area - Grid Layout for Topics/Posts -->
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">

    <!-- Left Column: Forum Categories/Topics -->
    <div class="md:col-span-2 space-y-6">

      <!-- Search and Filter Bar -->
      <div class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-sm flex flex-col sm:flex-row items-center gap-4">
        <input type="text" placeholder="Search discussions..." class="flex-grow p-2 border border-blue-200 dark:border-gray-700 rounded-md focus:ring-blue-500 focus:border-blue-500 bg-blue-50 dark:bg-gray-700 text-blue-900 dark:text-white placeholder-blue-400 dark:placeholder-gray-500">
        <select class="p-2 border border-blue-200 dark:border-gray-700 rounded-md bg-blue-50 dark:bg-gray-700 text-blue-900 dark:text-white">
          <option>All Categories</option>
          <option>Product Feedback</option>
          <option>Technical Support</option>
          <option>General Discussion</option>
          <option>Announcements</option>
        </select>
        <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-300 ease-in-out flex-shrink-0">
          New Topic
        </button>
      </div>

      <!-- Discussion Post Card (Repeated for multiple posts) -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden animate-fade-in">
        <div class="p-4 sm:p-6 border-b border-blue-100 dark:border-gray-700">
          <div class="flex items-center mb-2">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar">
            <div>
              <a href="#" class="font-semibold text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-300">John Doe</a>
              <span class="text-sm text-gray-500 dark:text-gray-400 block">Posted on April 15, 2024</span>
            </div>
          </div>
          <h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-100 mb-2">How to best integrate analytics with our new CRM?</h2>
          <p class="text-blue-700 dark:text-blue-300 line-clamp-3">We're looking for the most efficient way to connect Google Analytics and our in-house CRM system to get a unified view of customer data. Any recommended tools or best practices?</p>
          <div class="mt-4 flex items-center justify-between">
            <div class="flex space-x-4 text-gray-600 dark:text-gray-400 text-sm">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4-1l-3 1 1-3A8.84 8.84 0 012 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0zm-7 4a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0z" clip="evenodd"></path></svg>56 Replies</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12.586l4.293 4.293a1 1 0 001.414-1.414L11.414 11l4.293-4.293a1 1 0 00-1.414-1.414L10 9.586 5.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-4.293 4.293a1 1 0 101.414 1.414L10 12.586z"></path></svg>Category: CRM</span>
            </div>
            <a href="#" class="px-3 py-1 bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm font-medium rounded-full cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-600 transition-colors">View Discussion</a>
          </div>
        </div>
      </div>

      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden animate-fade-in">
        <div class="p-4 sm:p-6 border-b border-blue-100 dark:border-gray-700">
          <div class="flex items-center mb-2">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Avatar">
            <div>
              <a href="#" class="font-semibold text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-300">Jane Doe</a>
              <span class="text-sm text-gray-500 dark:text-gray-400 block">Posted on April 14, 2024</span>
            </div>
          </div>
          <h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-100 mb-2">Seeking advice on enhancing team collaboration with new tools.</h2>
          <p class="text-blue-700 dark:text-blue-300 line-clamp-3">Our team is growing, and we're looking for innovative tools or strategies to improve our daily collaboration and project management. Any suggestions beyond the usual suspects?</p>
          <div class="mt-4 flex items-center justify-between">
            <div class="flex space-x-4 text-gray-600 dark:text-gray-400 text-sm">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4-1l-3 1 1-3A8.84 8.84 0 012 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0zm-7 4a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0z" clip="evenodd"></path></svg>32 Replies</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12.586l4.293 4.293a1 1 0 001.414-1.414L11.414 11l4.293-4.293a1 1 0 00-1.414-1.414L10 9.586 5.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-4.293 4.293a1 1 0 101.414 1.414L10 12.586z"></path></svg>Category: Productivity</span>
            </div>
            <a href="#" class="px-3 py-1 bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm font-medium rounded-full cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-600 transition-colors">View Discussion</a>
          </div>
        </div>
      </div>

       <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden animate-fade-in">
        <div class="p-4 sm:p-6 border-b border-blue-100 dark:border-gray-700">
          <div class="flex items-center mb-2">
            <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/21.jpg" alt="Avatar">
            <div>
              <a href="#" class="font-semibold text-blue-800 dark:text-blue-200 hover:text-blue-600 dark:hover:text-blue-300">Michael Scott</a>
              <span class="text-sm text-gray-500 dark:text-gray-400 block">Posted on April 13, 2024</span>
            </div>
          </div>
          <h2 class="text-xl sm:text-2xl font-bold text-blue-900 dark:text-blue-100 mb-2">Best practices for secure cloud deployments?</h2>
          <p class="text-blue-700 dark:text-blue-300 line-clamp-3">Looking for advice on maintaining robust security for our cloud infrastructure. What are the essential guidelines and tools for a corporate environment?</p>
          <div class="mt-4 flex items-center justify-between">
            <div class="flex space-x-4 text-gray-600 dark:text-gray-400 text-sm">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4-1l-3 1 1-3A8.84 8.84 0 012 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0zm-7 4a1 1 0 100-2 1 1 0 000 2zm7-2a1 1 0 11-2 0 1 1 0 012 0z" clip="evenodd"></path></svg>78 Replies</span>
              <span class="flex items-center"><svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 12.586l4.293 4.293a1 1 0 001.414-1.414L11.414 11l4.293-4.293a1 1 0 00-1.414-1.414L10 9.586 5.707 5.293a1 1 0 00-1.414 1.414L8.586 10l-4.293 4.293a1 1 0 101.414 1.414L10 12.586z"></path></svg>Category: Cloud Security</span>
            </div>
            <a href="#" class="px-3 py-1 bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm font-medium rounded-full cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-600 transition-colors">View Discussion</a>
          </div>
        </div>
      </div>

    </div>

    <!-- Right Column: Sidebar (Popular Topics, Recent Activity etc.) -->
    <div class="space-y-6">

      <!-- Popular Topics -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 sm:p-6">
        <h3 class="text-lg font-bold text-blue-900 dark:text-blue-100 mb-4">Popular Topics</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 text-truncate block font-medium">Future of AI in Business Operations</a></li>
          <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 text-truncate block">Optimizing Remote Workflows</a></li>
          <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 text-truncate block">Cybersecurity Threats 2024 Report</a></li>
          <li><a href="#" class="text-blue-700 dark:text-blue-300 hover:text-blue-500 dark:hover:text-blue-200 text-truncate block">Sustainable Business Practices</a></li>
        </ul>
      </div>

      <!-- Recent Activity -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 sm:p-6">
        <h3 class="text-lg font-bold text-blue-900 dark:text-blue-100 mb-4">Recent Activity</h3>
        <ul class="space-y-3">
          <li class="flex items-start">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
            <div>
              <p class="text-sm text-blue-700 dark:text-blue-300"><span class="font-semibold">Sarah L.</span> replied to "Challenges in Hybrid Cloud Adoption"</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">5 minutes ago</span>
            </div>
          </li>
          <li class="flex items-start">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div>
              <p class="text-sm text-blue-700 dark:text-blue-300"><span class="font-semibold">David K.</span> started "Best Practices for Q2 Planning"</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">1 hour ago</span>
            </div>
          </li>
          <li class="flex items-start">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/7.jpg" alt="Avatar">
            <div>
              <p class="text-sm text-blue-700 dark:text-blue-300"><span class="font-semibold">Emily R.</span> voted on "Effective Communication Strategies"</p>
              <span class="text-xs text-gray-500 dark:text-gray-400">3 hours ago</span>
            </div>
          </li>
        </ul>
      </div>

      <!-- Pinned Announcements -->
      <div class="bg-blue-600 dark:bg-blue-900 text-white dark:text-blue-100 rounded-lg shadow-md p-4 sm:p-6">
        <h3 class="text-lg font-bold mb-3">📢 Important Announcement</h3>
        <p class="text-sm opacity-90">Our annual system maintenance will occur on May 1st from 2 AM to 6 AM UTC. Expect brief service interruptions. Thank you for your understanding.</p>
        <a href="#" class="mt-3 inline-block bg-blue-700 dark:bg-blue-800 hover:bg-blue-800 dark:hover:bg-blue-700 text-white text-xs font-semibold px-3 py-1 rounded-full transition duration-300">Read More</a>
      </div>

    </div>

  </div>

  <!-- Pagination (Example) -->
  <div class="max-w-7xl mx-auto mt-8 flex justify-center">
    <nav class="relative z-0 inline-flex shadow-sm -space-x-px" aria-label="Pagination">
      <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-gray-700">
        <span class="sr-only">Previous</span>
        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip="evenodd" />
        </svg>
      </a>
      <a href="#" aria-current="page" class="relative inline-flex items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-blue-600 text-sm font-medium text-white hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600 transition-colors z-10">
        1
      </a>
      <a href="#" class="relative inline-flex items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-gray-700">
        2
      </a>
      <a href="#" class="hidden md:inline-flex relative items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-gray-700">
        3
      </a>
      <span class="relative inline-flex items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-400">
        ...
      </span>
      <a href="#" class="relative inline-flex items-center px-4 py-2 border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-gray-700">
        10
      </a>
      <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-blue-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm font-medium text-blue-700 dark:text-blue-300 hover:bg-blue-50 dark:hover:bg-gray-700">
        <span class="sr-only">Next</span>
        <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip="evenodd" />
        </svg>
      </a>
    </nav>
  </div>

</div>

Neumorphic E-commerce Product Card

A soft UI (Neumorphism) style e-commerce product card component with grayscale colors, designed for business/corporate websites. It features a product image, title, price, and an 'Add to Cart' button, fully responsive and with dark mode support.

Open Preview

                <div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">

  <!-- Product Card Container -->
  <div class="max-w-xs w-full rounded-2xl p-6 shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-100 dark:bg-gray-800 transition-all duration-300 ease-in-out">

    <!-- Product Image -->
    <div class="relative w-full h-48 rounded-xl overflow-hidden mb-6 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark flex items-center justify-center">
      <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="absolute inset-0 w-full h-full object-cover rounded-xl transition-transform duration-300 hover:scale-105">
    </div>

    <!-- Product Details -->
    <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 transition-colors duration-300">
      Sleek Wireless Headphones
    </h3>
    <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 transition-colors duration-300 line-clamp-2">
      Experience immersive sound with active noise cancellation and comfortable earcups.
    </p>

    <div class="flex items-end justify-between mb-6">
      <span class="text-2xl font-bold text-gray-900 dark:text-gray-50 transition-colors duration-300">
        $199.99
      </span>
      <!-- Star Rating Placeholder -->
      <div class="flex space-x-1 text-gray-400 dark:text-gray-600">
        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
        <svg class="w-5 h-5 fill-current" viewBox="0 0 24 24"><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63L2 9.24l5.46 4.73L5.82 21z"></path></svg>
      </div>
    </div>

    <!-- Add to Cart Button -->
    <button class="w-full py-3 rounded-xl font-medium text-lg text-gray-800 dark:text-gray-100 bg-gray-100 dark:bg-gray-800 shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset hover:shadow-neumorphic-light hover:dark:shadow-neumorphic-dark hover:text-gray-900 hover:dark:text-white transition-all duration-300 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-300 dark:focus:ring-gray-600 active:shadow-neumorphic-light-inset active:dark:shadow-neumorphic-dark-inset">
      Add to Cart
    </button>

  </div>

  <!-- Custom Styles for Neumorphism Shadows (can be added to a global CSS file or <style> tag) -->
  <style>
    .shadow-neumorphic-light {
      box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-dark {
      box-shadow: 6px 6px 12px #1c1c1c, -6px -6px 12px #2c2c2c;
    }
    .shadow-neumorphic-light-inset {
      box-shadow: inset 6px 6px 12px #bebebe, inset -6px -6px 12px #ffffff;
    }
    .dark .shadow-neumorphic-dark-inset {
      box-shadow: inset 6px 6px 12px #1c1c1c, inset -6px -6px 12px #2c2c2c;
    }
    .shadow-inner-neumorphic-light {
      box-shadow: inset 2px 2px 5px #bebebe, inset -2px -2px 5px #ffffff;
    }
    .dark .shadow-inner-neumorphic-dark {
      box-shadow: inset 2px 2px 5px #1c1c1c, inset -2px -2px 5px #2c2c2c;
    }
  </style>
</div>

E-commerce Dashboard Component

A simple e-commerce dashboard component with a brutalist and vibrant design, featuring a responsive layout and dark theme support.

Open Preview

                <div class="min-h-screen bg-neutral-100 dark:bg-zinc-900 p-8">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Card 1: Sales Overview -->
    <div class="bg-fuchsia-500 dark:bg-fuchsia-800 p-6 shadow-[-8px_8px_0px_rgba(0,0,0,0.7)] dark:shadow-[-8px_8px_0px_rgba(255,255,255,0.7)] border-4 border-black dark:border-white animate-fade-in">
      <h2 class="text-3xl font-extrabold text-black dark:text-white mb-4 uppercase">Sales</h2>
      <p class="text-5xl font-black text-black dark:text-white mb-2">$12,345</p>
      <p class="text-lg text-black dark:text-white">+8% from last month</p>
    </div>

    <!-- Card 2: New Orders -->
    <div class="bg-lime-400 dark:bg-lime-700 p-6 shadow-[-8px_8px_0px_rgba(0,0,0,0.7)] dark:shadow-[-8px_8px_0px_rgba(255,255,255,0.7)] border-4 border-black dark:border-white animate-fade-in animation-delay-100">
      <h2 class="text-3xl font-extrabold text-black dark:text-white mb-4 uppercase">Orders</h2>
      <p class="text-5xl font-black text-black dark:text-white mb-2">2,100</p>
      <p class="text-lg text-black dark:text-white">+15% from last month</p>
    </div>

    <!-- Card 3: Top Product -->
    <div class="bg-yellow-300 dark:bg-yellow-600 p-6 shadow-[-8px_8px_0px_rgba(0,0,0,0.7)] dark:shadow-[-8px_8px_0px_rgba(255,255,255,0.7)] border-4 border-black dark:border-white animate-fade-in animation-delay-200">
      <h2 class="text-3xl font-extrabold text-black dark:text-white mb-4 uppercase">Top Product</h2>
      <div class="flex items-center space-x-4">
        <img src="https://picsum.photos/seed/product1/80/80" alt="Product Image" class="w-20 h-20 object-cover border-2 border-black dark:border-white">
        <div>
          <p class="text-xl font-bold text-black dark:text-white">Radical Widget X</p>
          <p class="text-lg text-black dark:text-white">$79.99</p>
        </div>
      </div>
    </div>

    <!-- Card 4: Customer Satisfaction -->
    <div class="bg-blue-400 dark:bg-blue-700 p-6 shadow-[-8px_8px_0px_rgba(0,0,0,0.7)] dark:shadow-[-8px_8px_0px_rgba(255,255,255,0.7)] border-4 border-black dark:border-white animate-fade-in animation-delay-300">
      <h2 class="text-3xl font-extrabold text-black dark:text-white mb-4 uppercase">Satisfaction</h2>
      <p class="text-5xl font-black text-black dark:text-white">92%</p>
      <p class="text-lg text-black dark:text-white">Up from 88%</p>
    </div>

    <!-- Card 5: New Customers -->
    <div class="bg-red-400 dark:bg-red-700 p-6 shadow-[-8px_8px_0px_rgba(0,0,0,0.7)] dark:shadow-[-8px_8px_0px_rgba(255,255,255,0.7)] border-4 border-black dark:border-white animate-fade-in animation-delay-400">
      <h2 class="text-3xl font-extrabold text-black dark:text-white mb-4 uppercase">New Customers</h2>
      <p class="text-5xl font-black text-black dark:text-white">350</p>
      <p class="text-lg text-black dark:text-white">Monthly acquisition</p>
    </div>

    <!-- Card 6: Recent Activity (simplified) -->
    <div class="bg-purple-400 dark:bg-purple-700 p-6 shadow-[-8px_8px_0px_rgba(0,0,0,0.7)] dark:shadow-[-8px_8px_0px_rgba(255,255,255,0.7)] border-4 border-black dark:border-white animate-fade-in animation-delay-500">
      <h2 class="text-3xl font-extrabold text-black dark:text-white mb-4 uppercase">Activity</h2>
      <ul class="space-y-3">
        <li class="flex items-center text-black dark:text-white">
          <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-black dark:border-white">
          <p class="text-lg">New order from John D.</p>
        </li>
        <li class="flex items-center text-black dark:text-white">
          <img src="https://randomuser.me/api/portraits/thumb/women/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-black dark:border-white">
          <p class="text-lg">Product restock alert</p>
        </li>
      </ul>
    </div>

  </div>
</div>

<style>
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
  }
  .animation-delay-100 { animation-delay: 0.1s; }
  .animation-delay-200 { animation-delay: 0.2s; }
  .animation-delay-300 { animation-delay: 0.3s; }
  .animation-delay-400 { animation-delay: 0.4s; }
  .animation-delay-500 { animation-delay: 0.5s; }
</style>

E-commerce Components Component

A brutalist e-commerce component for a blog, featuring a vibrant color scheme and moderate complexity. It includes a responsive design with dark theme support using Tailwind CSS.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex flex-col items-center justify-center font-mono">

  <!-- Product Card -->
  <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 mb-8 max-w-sm w-full shadow-[8px_8px_0_black] dark:shadow-[8px_8px_0_white]">
    <img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover border-4 border-black dark:border-white mb-4">
    <h3 class="text-2xl font-bold text-black dark:text-white mb-2">Disruptor X1</h3>
    <p class="text-black dark:text-white mb-4">Unleash the power of raw computing. This machine doesn't just run; it detonates.</p>
    <div class="flex justify-between items-center mb-4">
      <span class="text-3xl font-bold text-red-600 dark:text-red-400">$999.99</span>
      <button class="bg-yellow-400 text-black dark:bg-yellow-600 dark:text-white border-4 border-black dark:border-white px-6 py-3 font-bold text-lg hover:bg-yellow-500 dark:hover:bg-yellow-700 transition duration-300">BUY NOW</button>
    </div>
  </div>

  <!-- Another Product Card -->
  <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 mb-8 max-w-sm w-full shadow-[8px_8px_0_black] dark:shadow-[8px_8px_0_white]">
    <img src="https://picsum.photos/400/300?random=2" alt="Product Image" class="w-full h-48 object-cover border-4 border-black dark:border-white mb-4">
    <h3 class="text-2xl font-bold text-black dark:text-white mb-2">Axiom Z2</h3>
    <p class="text-black dark:text-white mb-4">Experience sound like never before. Pure, unadulterated audio assault.</p>
    <div class="flex justify-between items-center mb-4">
      <span class="text-3xl font-bold text-green-600 dark:text-green-400">$249.99</span>
      <button class="bg-yellow-400 text-black dark:bg-yellow-600 dark:text-white border-4 border-black dark:border-white px-6 py-3 font-bold text-lg hover:bg-yellow-500 dark:hover:bg-yellow-700 transition duration-300">GRAB IT</button>
    </div>
  </div>

  <!-- Blog Post Snippet (acting as related content/upsell) -->
  <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 max-w-lg w-full shadow-[8px_8px_0_black] dark:shadow-[8px_8px_0_white]">
    <h4 class="text-xl font-bold text-black dark:text-white mb-3">READ: The Philosophy of Brutalist Tech</h4>
    <img src="https://picsum.photos/400/200?random=3" alt="Blog Post Image" class="w-full h-32 object-cover border-4 border-black dark:border-white mb-4">
    <p class="text-black dark:text-white text-sm mb-4">Dive deep into the design principles that make our products unapologetically bold and functional.</p>
    <a href="#" class="text-blue-700 dark:text-blue-300 underline font-bold hover:text-blue-900 dark:hover:text-blue-500">Continue Reading &rarr;</a>

    <div class="mt-6 pt-4 border-t-2 border-black dark:border-white flex items-center">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-12 h-12 rounded-full border-2 border-black dark:border-white mr-4">
      <div>
        <p class="font-bold text-black dark:text-white">J.D. Brutal</p>
        <p class="text-sm text-gray-700 dark:text-gray-300">Tech Alchemist</p>
      </div>
    </div>
  </div>

  <!-- Responsive Adjustments -->
  <div class="mt-8 text-center text-gray-700 dark:text-gray-300 text-sm">
    <p>Resize your browser to see responsiveness!</p>
    <p>Dark mode toggles automatically based on system preference.</p>
  </div>

</div>

E-commerce Components Component

E-commerce component for a minimalist business website, with responsive design and dark theme support.

Open Preview

                <div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white p-6 rounded-lg shadow-md">
  <h2 class="text-2xl font-semibold mb-4">Product Title</h2>
  <img src="https://picsum.photos/600/400" alt="Product Image" class="w-full h-48 object-cover rounded-lg mb-4">
  <p class="text-lg mb-4">$99.99</p>
  <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>

E-commerce Components Component

A responsive E-commerce component designed for dark mode with triadic color scheme, featuring product listings, a shopping cart icon, and user avatar.

Open Preview

                <div class="bg-gray-900 text-white min-h-screen p-8">
    <header class="flex justify-between items-center mb-8">
        <h1 class="text-3xl font-bold">ShopEase</h1>
        <div class="relative">
            <button class="bg-blue-600 p-2 rounded-full hover:bg-blue-500 focus:outline-none">
                <svg class="w-6 h-6" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M13 2H7v2h6a1 1 0 011 1v12a1 1 0 01-1 1H7a1 1 0 01-1-1v-6H4v7a1 1 0 001 1h10a1 1 0 001-1V5a1 1 0 00-1-1z"/></svg>
            </button>
            <span class="absolute top-0 right-0 bg-red-600 text-white text-xs font-bold rounded-full px-1">3</span>
        </div>
    </header>

    <main class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Product Card -->
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200/300" alt="Product Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-semibold">Product Title</h2>
                <p class="text-gray-400">$29.99</p>
                <button class="mt-2 bg-green-600 text-white py-1 px-4 rounded hover:bg-green-500 focus:outline-none">Add to Cart</button>
            </div>
        </div>
        
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200/300?random=1" alt="Product Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-semibold">Another Product</h2>
                <p class="text-gray-400">$54.99</p>
                <button class="mt-2 bg-green-600 text-white py-1 px-4 rounded hover:bg-green-500 focus:outline-none">Add to Cart</button>
            </div>
        </div>
        
        <div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
            <img src="https://picsum.photos/200/300?random=2" alt="Product Image" class="w-full h-48 object-cover">
            <div class="p-4">
                <h2 class="text-xl font-semibold">Cool Gadget</h2>
                <p class="text-gray-400">$19.99</p>
                <button class="mt-2 bg-green-600 text-white py-1 px-4 rounded hover:bg-green-500 focus:outline-none">Add to Cart</button>
            </div>
        </div>
    </main>

    <footer class="mt-10 text-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mx-auto mb-2">
        <p class="font-semibold">Welcome, User!</p>
    </footer>
</div>

retro-monochrome-product-grid

A simple responsive retro/vintage e-commerce product grid component styled in a monochromatic violet palette with dark theme support. The design evokes 80s/90s nostalgia with a basic layout and minimal elements, perfect for online shopping experiences.

Open Preview

                <!-- Retro Monochromatic E-Commerce Product Grid -->
<div class="container mx-auto p-4">
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Product Card 1 -->
    <div class="bg-violet-100 dark:bg-violet-900 p-4 rounded-lg border-2 border-violet-900 dark:border-violet-100 shadow-md">
      <img src="https://picsum.photos/seed/p1/300/200" alt="Retro T-Shirt" class="w-full h-48 object-cover rounded mb-4 border-2 border-violet-900 dark:border-violet-100">
      <h2 class="text-xl font-bold text-violet-900 dark:text-violet-100 mb-2">Retro T-Shirt</h2>
      <p class="text-lg text-violet-900 dark:text-violet-100 mb-4">$29.99</p>
      <button class="w-full py-2 bg-violet-900 text-violet-100 rounded hover:bg-violet-700 transition">Add to Cart</button>
      <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Seller Avatar" class="w-8 h-8 rounded-full border-2 border-violet-900 dark:border-violet-100 mr-2">
        <span class="text-sm text-violet-900 dark:text-violet-100">VintageCo</span>
      </div>
    </div>
    <!-- Product Card 2 -->
    <div class="bg-violet-100 dark:bg-violet-900 p-4 rounded-lg border-2 border-violet-900 dark:border-violet-100 shadow-md">
      <img src="https://picsum.photos/seed/p2/300/200" alt="Vintage Camera" class="w-full h-48 object-cover rounded mb-4 border-2 border-violet-900 dark:border-violet-100">
      <h2 class="text-xl font-bold text-violet-900 dark:text-violet-100 mb-2">Vintage Camera</h2>
      <p class="text-lg text-violet-900 dark:text-violet-100 mb-4">$149.00</p>
      <button class="w-full py-2 bg-violet-900 text-violet-100 rounded hover:bg-violet-700 transition">Add to Cart</button>
      <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/lego/2.jpg" alt="Seller Avatar" class="w-8 h-8 rounded-full border-2 border-violet-900 dark:border-violet-100 mr-2">
        <span class="text-sm text-violet-900 dark:text-violet-100">90sShop</span>
      </div>
    </div>
    <!-- Product Card 3 -->
    <div class="bg-violet-100 dark:bg-violet-900 p-4 rounded-lg border-2 border-violet-900 dark:border-violet-100 shadow-md">
      <img src="https://picsum.photos/seed/p3/300/200" alt="Cassette Player" class="w-full h-48 object-cover rounded mb-4 border-2 border-violet-900 dark:border-violet-100">
      <h2 class="text-xl font-bold text-violet-900 dark:text-violet-100 mb-2">Cassette Player</h2>
      <p class="text-lg text-violet-900 dark:text-violet-100 mb-4">$49.50</p>
      <button class="w-full py-2 bg-violet-900 text-violet-100 rounded hover:bg-violet-700 transition">Add to Cart</button>
      <div class="flex items-center mt-4">
        <img src="https://randomuser.me/api/portraits/lego/3.jpg" alt="Seller Avatar" class="w-8 h-8 rounded-full border-2 border-violet-900 dark:border-violet-100 mr-2">
        <span class="text-sm text-violet-900 dark:text-violet-100">RetroWave</span>
      </div>
    </div>
  </div>
</div>

E-commerce Dashboard Component

E-commerce Dashboard Component with Skeuomorphism, Vibrant colors, and Simple layout for Tailwind CSS, with responsive and dark theme support.

Open Preview

                <div class="p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-xl max-w-sm mx-auto">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Dashboard Overview</h2>
  <div class="flex items-center justify-between mb-4">
    <div class="flex items-center">
      <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-3">
        <svg class="w-6 h-6 text-white" 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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      </div>
      <div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Total Sales</p>
        <p class="text-lg font-semibold text-green-600 dark:text-green-400">$5,200</p>
      </div>
    </div>
    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" 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="M9 5l7 7-7 7"></path></svg>
  </div>
  <div class="flex items-center justify-between mb-4">
    <div class="flex items-center">
      <div class="w-10 h-10 bg-red-500 rounded-full flex items-center justify-center mr-3">
        <svg class="w-6 h-6 text-white" 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="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-8m8 0l-5 2v-2m5 0z"></path></svg>
      </div>
      <div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">New orders</p>
        <p class="text-lg font-semibold text-orange-600 dark:text-orange-400">150</p>
      </div>
    </div>
    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" 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="M9 5l7 7-7 7"></path></svg>
  </div>
  <div class="flex items-center justify-between">
    <div class="flex items-center">
      <div class="w-10 h-10 bg-yellow-500 rounded-full flex items-center justify-center mr-3">
        <svg class="w-6 h-6 text-white" 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="M17 9V7a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2m2 4h.01M17 9l2 2m0 0l2-2m-2 2v-2v2z"></path></svg>
      </div>
      <div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Pending Issues</p>
        <p class="text-lg font-semibold text-red-600 dark:text-red-400">12</p>
      </div>
    </div>
    <svg class="w-6 h-6 text-gray-400 dark:text-gray-600" 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="M9 5l7 7-7 7"></path></svg>
  </div>
</div>

E-commerce Retro Component

A complex E-commerce component designed with a retro/vintage style, featuring a triadic color scheme and responsive design, suitable for business/corporate websites with dark mode support.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-lg">
    <div class="mb-4">
        <h2 class="text-3xl font-bold text-center text-red-600 dark:text-red-400">Vintage E-commerce Store</h2>
        <p class="text-center text-lg text-gray-700 dark:text-gray-300">Explore our curated collection of retro-inspired products</p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-md transition-shadow duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Product 1">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Retro Gadget</h3>
                <p class="text-gray-600 dark:text-gray-400">Classic retro gadget from the 90s, perfect for nostalgia lovers!</p>
                <span class="block text-lg font-bold text-red-600 dark:text-red-400">$29.99</span>
                <button class="mt-2 w-full bg-red-600 dark:bg-red-400 text-white font-semibold py-2 rounded hover:bg-red-500 dark:hover:bg-red-300 transition">Add to Cart</button>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-md transition-shadow duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Product 2">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Vintage Vinyl</h3>
                <p class="text-gray-600 dark:text-gray-400">Experience music like it's the 80s with our vintage vinyl collection.</p>
                <span class="block text-lg font-bold text-red-600 dark:text-red-400">$19.99</span>
                <button class="mt-2 w-full bg-red-600 dark:bg-red-400 text-white font-semibold py-2 rounded hover:bg-red-500 dark:hover:bg-red-300 transition">Add to Cart</button>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow hover:shadow-md transition-shadow duration-300">
            <img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Product 3">
            <div class="p-4">
                <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Classic Arcade Game</h3>
                <p class="text-gray-600 dark:text-gray-400">Relive the golden age of gaming with our classic arcade machines!</p>
                <span class="block text-lg font-bold text-red-600 dark:text-red-400">$99.99</span>
                <button class="mt-2 w-full bg-red-600 dark:bg-red-400 text-white font-semibold py-2 rounded hover:bg-red-500 dark:hover:bg-red-300 transition">Add to Cart</button>
            </div>
        </div>
    </div>
    <div class="mt-8">
        <h2 class="text-2xl font-bold text-center text-red-600 dark:text-red-400">Meet Our Team</h2>
        <div class="flex flex-wrap justify-center space-x-4 mt-4">
            <div class="flex flex-col items-center">
                <img class="rounded-full w-24 h-24 shadow" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Team Member 1">
                <h4 class="mt-2 text-gray-800 dark:text-gray-200">John Doe</h4>
            </div>
            <div class="flex flex-col items-center">
                <img class="rounded-full w-24 h-24 shadow" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Team Member 2">
                <h4 class="mt-2 text-gray-800 dark:text-gray-200">Jane Smith</h4>
            </div>
            <div class="flex flex-col items-center">
                <img class="rounded-full w-24 h-24 shadow" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Team Member 3">
                <h4 class="mt-2 text-gray-800 dark:text-gray-200">Bob Johnson</h4>
            </div>
        </div>
    </div>
</div>

E-commerce Component

A responsive E-commerce component styled with Glassmorphism and Pastel colors, suitable for social media interfaces, with dark theme support.

Open Preview

                <div class="flex flex-col items-center justify-center p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-lg bg-opacity-30">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-3">Featured Products</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
        <div class="flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
            <img src="https://picsum.photos/200/300" alt="Product 1" class="mb-3 rounded-md shadow-sm">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 1 goes here.</p>
            <span class="font-bold text-xl text-gray-800 dark:text-gray-200">$19.99</span>
            <button class="mt-2 px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white rounded-lg hover:bg-pink-500 dark:hover:bg-pink-700">Add to Cart</button>
        </div>
        <div class="flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
            <img src="https://picsum.photos/200/301" alt="Product 2" class="mb-3 rounded-md shadow-sm">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 2 goes here.</p>
            <span class="font-bold text-xl text-gray-800 dark:text-gray-200">$29.99</span>
            <button class="mt-2 px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white rounded-lg hover:bg-pink-500 dark:hover:bg-pink-700">Add to Cart</button>
        </div>
        <div class="flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
            <img src="https://picsum.photos/200/302" alt="Product 3" class="mb-3 rounded-md shadow-sm">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h3>
            <p class="text-gray-600 dark:text-gray-400">Description of product 3 goes here.</p>
            <span class="font-bold text-xl text-gray-800 dark:text-gray-200">$39.99</span>
            <button class="mt-2 px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white rounded-lg hover:bg-pink-500 dark:hover:bg-pink-700">Add to Cart</button>
        </div>
    </div>
    <div class="mt-5 flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Reviews</h3>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User 1" class="w-10 h-10 rounded-full mr-2">
            <div class="text-left">
                <p class="text-gray-800 dark:text-gray-200 font-bold">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400">Great product! Highly recommend.</p>
            </div>
        </div>
        <div class="flex items-center mt-2">
            <img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User 2" class="w-10 h-10 rounded-full mr-2">
            <div class="text-left">
                <p class="text-gray-800 dark:text-gray-200 font-bold">Jane Smith</p>
                <p class="text-gray-600 dark:text-gray-400">Loved it! Will buy again.</p>
            </div>
        </div>
    </div>
</div>