Search Components

Container

Wrapper element that limits content width

Material Design E-commerce Container

A responsive e-commerce container component with a product grid, shopping cart summary, and dark theme support, designed using Material Design principles and an Earth tones color scheme. It features multiple interactive elements, including product cards with images, titles, prices, and "Add to Cart" buttons, as well as a sticky shopping cart summary that updates with added items. The layout adjusts for different screen sizes, and all elements have dark mode styles defined with Tailwind CSS dark: prefixes.

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-4 md:p-8 font-sans">

  <!-- Sticky Shopping Cart Summary -->
  <div class="sticky top-4 lg:top-8 bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 mb-8 z-10 border border-gray-200 dark:border-gray-700">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Your Cart</h2>
    <div class="flex justify-between items-center text-gray-700 dark:text-gray-300">
      <p class="text-sm">Items: <span class="font-medium">3</span></p>
      <p class="text-sm">Total: <span class="font-medium">$250.00</span></p>
    </div>
    <button class="mt-4 w-full bg-orange-700 hover:bg-orange-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Checkout</button>
  </div>

  <!-- Product Grid -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">

    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/600/400" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Earthen Vase</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Handcrafted ceramic vase with a rustic finish, perfect for any home decor.</p>
        <div class="flex justify-between items-center mb-4">
          <span class="text-xl font-bold text-gray-900 dark:text-gray-50">$45.00</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$60.00</span>
        </div>
        <button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/600/400" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Terracotta Planter</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Classic terracotta planter, ideal for indoor and outdoor plants.</p>
        <div class="flex justify-between items-center mb-4">
          <span class="text-xl font-bold text-gray-900 dark:text-gray-50">$25.00</span>
        </div>
        <button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/600/400" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Woodland Sculpture</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Artisan-crafted wooden sculpture, bringing nature indoors.</p>
        <div class="flex justify-between items-center mb-4">
          <span class="text-xl font-bold text-gray-900 dark:text-gray-50">$120.00</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$150.00</span>
        </div>
        <button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product4/600/400" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Organic Cotton Towel</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Soft and absorbent towel made from sustainably sourced organic cotton.</p>
        <div class="flex justify-between items-center mb-4">
          <span class="text-xl font-bold text-gray-900 dark:text-gray-50">$30.00</span>
        </div>
        <button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 5 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product5/600/400" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Amber Glass Bottle Set</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Set of three reusable amber glass bottles with sleek dispensers.</p>
        <div class="flex justify-between items-center mb-4">
          <span class="text-xl font-bold text-gray-900 dark:text-gray-50">$35.00</span>
        </div>
        <button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 6 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transform transition duration-300 hover:scale-105 border border-gray-200 dark:border-gray-700">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product6/600/400" alt="Product Image">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-2">Hemp Fabric Basket</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Eco-friendly storage basket made from durable hemp fabric.</p>
        <div class="flex justify-between items-center mb-4">
          <span class="text-xl font-bold text-gray-900 dark:text-gray-50">$50.00</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$70.00</span>
        </div>
        <button class="w-full bg-green-700 hover:bg-green-800 text-white font-bold py-2 px-4 rounded-md shadow-md transition duration-300 ease-in-out">Add to Cart</button>
      </div>
    </div>

  </div>
</div>

Skeuomorphic_E-commerce_Container

Skeuomorphic E-commerce Container Component in Pastel tones with Dark Mode support

Open Preview

                <div class="relative m-4 rounded-xl bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 p-8 shadow-2xl dark:from-purple-800 dark:via-pink-800 dark:to-red-800">
  <div class="absolute inset-0 rounded-xl border-4 border-white border-opacity-30 dark:border-gray-700"></div>

  <div class="relative z-10">
    <h2 class="mb-6 text-center font-serif text-4xl font-bold tracking-wide text-gray-800 drop-shadow-md dark:text-white">
      Skeuomorphic Product Showcase
    </h2>

    <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
      <!-- Product Card 1 -->
      <div class="relative transform rounded-xl bg-gradient-to-br from-white via-gray-50 to-gray-200 p-6 shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl dark:from-gray-700 dark:via-gray-800 dark:to-gray-900">
        <div class="absolute inset-0 rounded-xl border-2 border-gray-100 dark:border-gray-600"></div>
        <img
          src="https://picsum.photos/seed/product1/400/300"
          alt="Product Image 1"
          class="mb-4 w-full rounded-lg shadow-md"
        />
        <h3 class="mb-2 text-xl font-semibold text-gray-800 dark:text-white">Vintage Camera</h3>
        <p class="mb-4 text-gray-600 dark:text-gray-300">A classic piece for photography enthusiasts.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-purple-700 dark:text-purple-300">$299.99</span>
          <button class="rounded-full bg-purple-600 px-5 py-2 font-semibold text-white shadow-lg transition-colors duration-300 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 2 -->
      <div class="relative transform rounded-xl bg-gradient-to-br from-white via-gray-50 to-gray-200 p-6 shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl dark:from-gray-700 dark:via-gray-800 dark:to-gray-900">
        <div class="absolute inset-0 rounded-xl border-2 border-gray-100 dark:border-gray-600"></div>
        <img
          src="https://picsum.photos/seed/product2/400/300"
          alt="Product Image 2"
          class="mb-4 w-full rounded-lg shadow-md"
        />
        <h3 class="mb-2 text-xl font-semibold text-gray-800 dark:text-white">Leather Bound Journal</h3>
        <p class="mb-4 text-gray-600 dark:text-gray-300">Handcrafted for your deepest thoughts.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-purple-700 dark:text-purple-300">$45.00</span>
          <button class="rounded-full bg-purple-600 px-5 py-2 font-semibold text-white shadow-lg transition-colors duration-300 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600">
            Add to Cart
          </button>
        </div>
      </div>

      <!-- Product Card 3 -->
      <div class="relative transform rounded-xl bg-gradient-to-br from-white via-gray-50 to-gray-200 p-6 shadow-xl transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl dark:from-gray-700 dark:via-gray-800 dark:to-gray-900">
        <div class="absolute inset-0 rounded-xl border-2 border-gray-100 dark:border-gray-600"></div>
        <img
          src="https://picsum.photos/seed/product3/400/300"
          alt="Product Image 3"
          class="mb-4 w-full rounded-lg shadow-md"
        />
        <h3 class="mb-2 text-xl font-semibold text-gray-800 dark:text-white">Artisan Coffee Mug</h3>
        <p class="mb-4 text-gray-600 dark:text-gray-300">Enjoy your brew in style.</p>
        <div class="flex items-center justify-between">
          <span class="text-2xl font-bold text-purple-700 dark:text-purple-300">$22.50</span>
          <button class="rounded-full bg-purple-600 px-5 py-2 font-semibold text-white shadow-lg transition-colors duration-300 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600">
            Add to Cart
          </button>
        </div>
      </div>
    </div>

    <div class="mt-10 flex justify-center">
      <button class="transform rounded-full bg-gradient-to-r from-green-400 to-blue-500 px-8 py-3 font-bold text-white shadow-lg transition-all duration-300 hover:scale-105 hover:from-green-500 hover:to-blue-600 dark:from-green-700 dark:to-blue-800 dark:hover:from-green-800 dark:hover:to-blue-900">
        View All Products
      </button>
    </div>
  </div>
</div>

Container Component

A responsive Material Design container for e-commerce, with pastel colors, dark mode support, and complex interactive elements using Tailwind CSS.

Open Preview

                <div class="min-h-screen bg-gradient-to-br from-purple-50 to-pink-100 dark:from-gray-900 dark:to-gray-800 p-8 flex items-center justify-center">
  <div class="shadow-2xl rounded-3xl overflow-hidden max-w-6xl w-full bg-white dark:bg-gray-700 transition-all duration-300 transform hover:scale-[1.01] hover:shadow-purple-400/30 dark:hover:shadow-pink-400/20">
    <div class="md:flex">
      <!-- Product Image Section -->
      <div class="md:flex-shrink-0 md:w-1/2 relative">
        <img class="w-full h-96 object-cover object-center transform transition-transform duration-500 hover:scale-105" src="https://picsum.photos/seed/picsum/600/400" alt="Product Image">
        <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
        <div class="absolute bottom-0 left-0 p-6">
          <h1 class="text-4xl font-extrabold text-white mb-2">Premium Gadget Pro</h1>
          <p class="text-purple-200 text-lg">Unleash your potential with unparalleled performance.</p>
        </div>
        <span class="absolute top-4 left-4 bg-purple-500 text-white text-sm font-bold px-3 py-1 rounded-full shadow-lg">NEW ARRIVAL</span>
      </div>

      <!-- Product Details Section -->
      <div class="p-8 md:w-1/2 flex flex-col justify-between">
        <div>
          <span class="text-sm text-purple-600 dark:text-purple-300 font-semibold mb-2 block">Electronics > Smartphones</span>
          <h2 class="text-4xl font-bold text-gray-800 dark:text-white mb-4">Flagship Smartphone X</h2>
          <p class="text-gray-600 dark:text-gray-300 leading-relaxed mb-6">Experience cutting-edge technology with our revolutionary smartphone. Featuring a stunning display, an advanced camera system, and all-day battery life.</p>
          
          <div class="flex items-center mb-6">
            <span class="text-5xl font-extrabold text-purple-700 dark:text-purple-300 mr-3">$999</span>
            <span class="text-xl text-gray-400 line-through">$1200</span>
            <span class="ml-3 bg-green-200 text-green-800 text-sm font-bold px-3 py-1 rounded-full">17% OFF</span>
          </div>

          <!-- Color Options -->
          <div class="mb-6">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">Color:</h3>
            <div class="flex space-x-3">
              <button class="w-10 h-10 rounded-full bg-blue-500 border-4 border-purple-400 focus:outline-none focus:ring-4 focus:ring-blue-300 transition-all duration-200"></button>
              <button class="w-10 h-10 rounded-full bg-pink-500 border-2 border-transparent hover:border-purple-400 focus:outline-none focus:ring-4 focus:ring-pink-300 transition-all duration-200"></button>
              <button class="w-10 h-10 rounded-full bg-gray-800 border-2 border-transparent hover:border-purple-400 focus:outline-none focus:ring-4 focus:ring-gray-600 transition-all duration-200"></button>
            </div>
          </div>

          <!-- Quantity Selector -->
          <div class="mb-8">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">Quantity:</h3>
            <div class="flex items-center space-x-3">
              <button class="bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-white p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-400">-</button>
              <span class="text-xl font-bold text-gray-800 dark:text-white">1</span>
              <button class="bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-white p-2 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-purple-400">+</button>
            </div>
          </div>
        </div>

        <!-- Call to Action Buttons -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-xl shadow-lg transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-purple-300">Add to Cart</button>
          <button class="bg-pink-500 hover:bg-pink-600 text-white font-bold py-3 px-6 rounded-xl shadow-lg transform hover:scale-105 transition-all duration-200 focus:outline-none focus:ring-4 focus:ring-pink-300">Buy Now</button>
        </div>
      </div>
    </div>
    
    <!-- Customer Reviews Section -->
    <div class="p-8 border-t border-gray-200 dark:border-gray-600">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Customer Reviews</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Review Card 1 -->
        <div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-md transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg">
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-gray-800 dark:text-white">Jane Doe</p>
              <div class="flex text-yellow-400 text-sm">
                <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star-half-alt"></i>
              </div>
            </div>
          </div>
          <p class="text-gray-600 dark:text-gray-200 leading-relaxed">
            "Absolutely love this product! The camera is incredible and the battery lasts forever. Highly recommend it to everyone."
          </p>
        </div>
        
        <!-- Review Card 2 -->
        <div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-md transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg">
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-gray-800 dark:text-white">John Smith</p>
              <div class="flex text-yellow-400 text-sm">
                <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i>
              </div>
            </div>
          </div>
          <p class="text-gray-600 dark:text-gray-200 leading-relaxed">
            "Fast shipping and the phone exceeded my expectations. So smooth and powerful. Best purchase this year!"
          </p>
        </div>

        <!-- Review Card 3 -->
        <div class="bg-gray-50 dark:bg-gray-600 p-6 rounded-2xl shadow-md transition-all duration-200 transform hover:scale-[1.02] hover:shadow-lg">
          <div class="flex items-center mb-4">
            <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/76.jpg" alt="User Avatar">
            <div>
              <p class="font-semibold text-gray-800 dark:text-white">Emily White</p>
              <div class="flex text-yellow-400 text-sm">
                <i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="fas fa-star"></i><i class="far fa-star"></i>
              </div>
            </div>
          </div>
          <p class="text-gray-600 dark:text-gray-200 leading-relaxed">
            "Great phone, though it took a bit to get used to the new OS. Still, fantastic performance and beautiful design."
          </p>
        </div>
      </div>
    </div>

    <!-- Related Products Section -->
    <div class="p-8 border-t border-gray-200 dark:border-gray-600">
      <h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">Related Products</h3>
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Related Product Card 1 -->
        <div class="bg-gray-50 dark:bg-gray-600 rounded-2xl shadow-md overflow-hidden transition-all duration-200 transform hover:scale-[1.03] hover:shadow-lg">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/related1/400/300" alt="Related Product">
          <div class="p-4">
            <h4 class="font-semibold text-gray-800 dark:text-white mb-1">Wireless Headphones</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Immersive audio experience.</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$149</p>
            <button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg text-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-colors duration-200">View Details</button>
          </div>
        </div>

        <!-- Related Product Card 2 -->
        <div class="bg-gray-50 dark:bg-gray-600 rounded-2xl shadow-md overflow-hidden transition-all duration-200 transform hover:scale-[1.03] hover:shadow-lg">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/related2/400/300" alt="Related Product">
          <div class="p-4">
            <h4 class="font-semibold text-gray-800 dark:text-white mb-1">Smartwatch Elite</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Track your fitness and stay connected.</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$299</p>
            <button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg text-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-colors duration-200">View Details</button>
          </div>
        </div>

        <!-- Related Product Card 3 -->
        <div class="bg-gray-50 dark:bg-gray-600 rounded-2xl shadow-md overflow-hidden transition-all duration-200 transform hover:scale-[1.03] hover:shadow-lg">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/related3/400/300" alt="Related Product">
          <div class="p-4">
            <h4 class="font-semibold text-gray-800 dark:text-white mb-1">Portable Power Bank</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Never run out of battery.</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$59</p>
            <button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg text-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-colors duration-200">View Details</button>
          </div>
        </div>

        <!-- Related Product Card 4 -->
        <div class="bg-gray-50 dark:bg-gray-600 rounded-2xl shadow-md overflow-hidden transition-all duration-200 transform hover:scale-[1.03] hover:shadow-lg">
          <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/related4/400/300" alt="Related Product">
          <div class="p-4">
            <h4 class="font-semibold text-gray-800 dark:text-white mb-1">Noise-Cancelling Earbuds</h4>
            <p class="text-sm text-gray-600 dark:text-gray-300 mb-2">Pure sound, no distractions.</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-300">$199</p>
            <button class="mt-4 w-full bg-purple-500 text-white py-2 rounded-lg text-sm hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-400 transition-colors duration-200">View Details</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Font Awesome for icons (optional) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

E-commerce Container Component

Glassmorphism E-commerce Container Component with Triadic Color Scheme and Complex Layout, including Dark Mode Support

Open Preview

                <div class="container mx-auto p-8 max-w-screen-lg dark:bg-gray-800 dark:text-white bg-gray-100 text-gray-800 rounded-xl shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 dark:bg-opacity-20 border border-gray-200 dark:border-gray-700">

  <!-- Header -->
  <header class="flex justify-between items-center mb-8">
    <h1 class="text-3xl font-bold text-blue-600 dark:text-blue-400">Featured Products</h1>
    <nav>
      <ul class="flex space-x-4">
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Home</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Shop</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">About</a></li>
        <li><a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition duration-300">Contact</a></li>
      </ul>
    </nav>
  </header>

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

    <!-- Product Card 1 -->
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 border border-green-200 dark:border-green-700 backdrop-filter backdrop-blur-md bg-opacity-30 dark:bg-opacity-30 transform transition duration-500 hover:scale-105">
      <img src="https://picsum.photos/seed/product1/400/300" alt="Product Image" class="rounded-md mb-4">
      <h2 class="text-xl font-semibold text-purple-700 dark:text-purple-400 mb-2">Product Name 1</h2>
      <p class="text-gray-600 dark:text-gray-400 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <div class="flex justify-between items-center">
        <span class="text-2xl font-bold text-red-600 dark:text-red-400">$49.99</span>
        <button class="bg-red-500 dark:bg-red-700 text-white py-2 px-4 rounded-full hover:bg-red-600 dark:hover:bg-red-800 transition duration-300">Add to Cart</button>
      </div>
    </div>

    <!-- Product Card 2 -->
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 border border-purple-200 dark:border-purple-700 backdrop-filter backdrop-blur-md bg-opacity-30 dark:bg-opacity-30 transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/seed/product2/400/300" alt="Product Image" class="rounded-md mb-4">
        <h2 class="text-xl font-semibold text-red-700 dark:text-red-400 mb-2">Product Name 2</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex justify-between items-center">
          <span class="text-2xl font-bold text-green-600 dark:text-green-400">$29.50</span>
          <button class="bg-green-500 dark:bg-green-700 text-white py-2 px-4 rounded-full hover:bg-green-600 dark:hover:bg-green-800 transition duration-300">Add to Cart</button>
        </div>
      </div>

    <!-- Product Card 3 -->
    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-lg p-6 border border-red-200 dark:border-red-700 backdrop-filter backdrop-blur-md bg-opacity-30 dark:bg-opacity-30 transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/seed/product3/400/300" alt="Product Image" class="rounded-md mb-4">
        <h2 class="text-xl font-semibold text-green-700 dark:text-green-400 mb-2">Product Name 3</h2>
        <p class="text-gray-600 dark:text-gray-400 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="flex justify-between items-center">
          <span class="text-2xl font-bold text-purple-600 dark:text-purple-400">$75.00</span>
          <button class="bg-purple-500 dark:bg-purple-700 text-white py-2 px-4 rounded-full hover:bg-purple-600 dark:hover:bg-purple-800 transition duration-300">Add to Cart</button>
        </div>
      </div>

  </div>

  <!-- Footer -->
  <footer class="mt-8 text-center text-gray-600 dark:text-gray-400">
    &copy; 2023 Your E-commerce Store. All rights reserved.
  </footer>

</div>

Container Component

A minimalist container component for a dashboard using Tailwind CSS with dark mode support.

Open Preview

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md">
    <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-4">Dashboard</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
            <h3 class="text-lg font-medium text-gray-800 dark:text-white mb-2">Data Card 1</h3>
            <img src="https://picsum.photos/200/100" alt="Data visualization image" class="w-full h-auto rounded-lg mb-2">
            <p class="text-gray-600 dark:text-gray-300">Some description of the data card.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
            <h3 class="text-lg font-medium text-gray-800 dark:text-white mb-2">Data Card 2</h3>
            <img src="https://picsum.photos/200/100" alt="Data visualization image" class="w-full h-auto rounded-lg mb-2">
            <p class="text-gray-600 dark:text-gray-300">Some description of the data card.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow">
            <h3 class="text-lg font-medium text-gray-800 dark:text-white mb-2">Data Card 3</h3>
            <img src="https://picsum.photos/200/100" alt="Data visualization image" class="w-full h-auto rounded-lg mb-2">
            <p class="text-gray-600 dark:text-gray-300">Some description of the data card.</p>
        </div>
    </div>
    <div class="mt-6 flex items-center justify-between">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">User Name</span>
        </div>
        <button class="bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 font-semibold py-2 px-4 rounded hover:bg-gray-700 dark:hover:bg-gray-300">Action</button>
    </div>
</div>

Container Component

Responsive Container Component with Dark Mode

Open Preview

                <div class="container mx-auto px-4 py-8 dark:bg-gray-800">
  <div class="max-w-md mx-auto bg-white rounded-xl shadow-md overflow-hidden md:max-w-2xl dark:bg-gray-700">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/picsum/200/300" alt="Random image">
      </div>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold dark:text-indigo-300">Case Study</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline dark:text-white">Innovating with Microinteractions</a>
        <p class="mt-2 text-gray-500 dark:text-gray-300">Exploring the power of small, engaging animations to enhance user experience in portfolio websites. This triadic color scheme (using shades of indigo, red, and yellow in other potential elements) provides a vibrant yet balanced feel. Moderate complexity allows for subtle hover effects and transitions.</p>
        <div class="mt-4">
          <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 dark:bg-gray-600 dark:text-gray-200">#microinteractions</span>
          <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 dark:bg-gray-600 dark:text-gray-200">#tailwindcss</span>
          <span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:bg-gray-600 dark:text-gray-200">#portfolio</span>
        </div>
      </div>
    </div>
  </div>
</div>

3D Grayscale Business Container

3D Grayscale Container Component for Business/Corporate Websites

Open Preview

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="relative max-w-md mx-auto dark:bg-gray-800 bg-white rounded-xl shadow-2xl overflow-hidden md:max-w-2xl perspective">
    <div class="md:flex">
      <div class="md:flex-shrink-0">
        <img class="h-48 w-full object-cover md:w-48 view-3d" src="https://picsum.photos/seed/unsplash/600/400" alt="Modern building architecture">
      </div>
      <div class="p-8 flex flex-col justify-between leading-normal">
        <div class="mb-8">
          <p class="text-sm font-bold text-gray-500 dark:text-gray-400">Business Solutions</p>
          <h2 class="mt-2 text-2xl font-semibold text-gray-900 dark:text-white">Innovative Strategies for Growth</h2>
          <p class="mt-2 text-gray-600 dark:text-gray-300">We provide cutting-edge solutions to help your business thrive in a competitive market. Our strategies are tailored to your specific needs for maximum impact.</p>
        </div>
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-4 view-3d-avatar" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of the CEO">
          <div class="text-sm">
            <p class="text-gray-900 dark:text-white leading-none">John Smith</p>
            <p class="text-gray-600 dark:text-gray-400">CEO and Founder</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.perspective {
  perspective: 1000px;
}

.view-3d {
  transform: rotateY(5deg) rotateX(5deg);
  transition: transform 0.5s ease;
}

.view-3d:hover {
  transform: rotateY(0deg) rotateX(0deg);
}

.view-3d-avatar {
    transform: translateZ(20px);
    transition: transform 0.5s ease;
}

.view-3d-avatar:hover {
  transform: translateZ(0px);
}
</style>

Neumorphic Container Component

A responsive Neumorphic container component for showcasing work or products, designed with a triadic color scheme and dark theme support, using Tailwind CSS.

Open Preview

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
    <div class="bg-gray-300 dark:bg-gray-900 shadow-neumorphic rounded-lg p-6 w-full max-w-md">
        <div class="flex flex-col items-center justify-center mb-4">
            <img src="https://picsum.photos/200/150" alt="Portfolio Item" class="rounded-lg mb-2 shadow-neumorphic">
            <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Portfolio Item Title</h2>
            <p class="text-gray-600 dark:text-gray-400">A brief description of the portfolio item goes here. It showcases the work done and highlights key features.</p>
        </div>
        <div class="flex items-center mt-4">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-10 h-10 rounded-full shadow-neumorphic">
            <span class="ml-2 text-gray-800 dark:text-gray-200">John Doe</span>
        </div>
        <div class="mt-4">
            <a href="#" class="text-blue-500 dark:text-blue-300 hover:underline transition ease-in-out duration-200">View Details</a>
        </div>
    </div>
</div>

<style>
    .shadow-neumorphic {
        box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.3),
                    -8px -8px 15px rgba(255, 255, 255, 0.5);
    }
</style>

Glassmorphism Container Component

A responsive Glassmorphism Container Component with a triadic color scheme, designed for portfolios. Supports dark mode.

Open Preview

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-200 via-purple-200 to-pink-200 dark:from-gray-800 dark:via-gray-700 dark:to-gray-600">
  <div class="container mx-auto p-8">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

      <!-- Feature 1 -->
      <div class="backdrop-filter backdrop-blur-xl bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-20 rounded-xl p-8 shadow-lg transform transition duration-500 hover:scale-105">
        <h3 class="font-bold text-xl mb-4 text-gray-800 dark:text-white">Project Title 1</h3>
        <img src="https://picsum.photos/400/250?random=1" alt="Project Image 1" class="rounded-md mb-4">
        <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of the project. Showcasing skills and technologies used.</p>
        <a href="#" class="text-blue-700 dark:text-blue-300 hover:underline">View Details</a>
      </div>

      <!-- Feature 2 -->
      <div class="backdrop-filter backdrop-blur-xl bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-20 rounded-xl p-8 shadow-lg transform transition duration-500 hover:scale-105">
        <h3 class="font-bold text-xl mb-4 text-gray-800 dark:text-white">Project Title 2</h3>
        <img src="https://picsum.photos/400/250?random=2" alt="Project Image 2" class="rounded-md mb-4">
        <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of the project. Showcasing skills and technologies used.</p>
        <a href="#" class="text-blue-700 dark:text-blue-300 hover:underline">View Details</a>
      </div>

      <!-- Feature 3 -->
      <div class="backdrop-filter backdrop-blur-xl bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-20 rounded-xl p-8 shadow-lg transform transition duration-500 hover:scale-105">
        <h3 class="font-bold text-xl mb-4 text-gray-800 dark:text-white">Project Title 3</h3>
        <img src="https://picsum.photos/400/250?random=3" alt="Project Image 3" class="rounded-md mb-4">
        <p class="text-gray-700 dark:text-gray-300 mb-4">A brief description of the project. Showcasing skills and technologies used.</p>
        <a href="#" class="text-blue-700 dark:text-blue-300 hover:underline">View Details</a>
      </div>
      
      <!-- Add more features as needed -->

        <!-- Contact/Profile Section -->
        <div class="md:col-span-2 lg:col-span-3 backdrop-filter backdrop-blur-xl bg-white bg-opacity-20 dark:bg-gray-700 dark:bg-opacity-20 rounded-xl p-8 shadow-lg text-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="rounded-full w-24 h-24 mx-auto mb-4">
            <h3 class="font-bold text-xl mb-2 text-gray-800 dark:text-white">Your Name</h3>
            <p class="text-gray-700 dark:text-gray-300 mb-4">Web Developer | Designer | Portfolio Owner</p>
            <div class="flex justify-center space-x-4">
                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-300"><i class="fab fa-twitter"></i></a>
                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-300"><i class="fab fa-linkedin"></i></a>
                <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-700 dark:hover:text-blue-300"><i class="fab fa-github"></i></a>
            </div>
        </div>

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

Container Component

A skeuomorphic portfolio container component with a dark theme and responsive design, showcasing work and products with interactive elements.

Open Preview

                <div class="bg-gray-800 p-5 rounded-lg shadow-lg dark:bg-gray-900 transition-all">
    <h2 class="text-3xl font-bold text-gray-200 dark:text-gray-100 mb-5">My Portfolio</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-gray-700 dark:bg-gray-800">
            <img class="w-full" src="https://picsum.photos/300/200?random=1" alt="Portfolio Item">
            <div class="p-5">
                <div class="font-bold text-xl mb-2 text-gray-200 dark:text-gray-100">Project Title 1</div>
                <p class="text-gray-300 dark:text-gray-400">A brief description of the project showcasing my skills and efforts on this particular piece.</p>
            </div>
        </div>
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-gray-700 dark:bg-gray-800">
            <img class="w-full" src="https://picsum.photos/300/200?random=2" alt="Portfolio Item">
            <div class="p-5">
                <div class="font-bold text-xl mb-2 text-gray-200 dark:text-gray-100">Project Title 2</div>
                <p class="text-gray-300 dark:text-gray-400">A brief description of another project showcasing unique features and creative solutions.</p>
            </div>
        </div>
        <div class="max-w-sm rounded overflow-hidden shadow-lg bg-gray-700 dark:bg-gray-800">
            <img class="w-full" src="https://picsum.photos/300/200?random=3" alt="Portfolio Item">
            <div class="p-5">
                <div class="font-bold text-xl mb-2 text-gray-200 dark:text-gray-100">Project Title 3</div>
                <p class="text-gray-300 dark:text-gray-400">Description of the project highlighting my contributions and outcomes of the work.</p>
            </div>
        </div>
    </div>
    <div class="mt-5 text-center">
        <h3 class="text-xl font-bold text-gray-200 dark:text-gray-100 mb-3">Contact Me</h3>
        <div class="flex justify-center space-x-4">
            <a href="#" class="flex items-center text-gray-300 dark:text-gray-400 hover:text-gray-200 dark:hover:text-gray-100">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" class="w-10 h-10 rounded-full mr-2" alt="Avatar"> My Name
            </a>
        </div>
    </div>
</div>

Search Components

Categories

Container