Tailwind E-commerce (products) Components in Shopal library

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

E-commerce (products) from Shopal

Tailwind CSS

Shopal

<section class="py-24 bg-gray-900" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-16">
      <h1 class="font-heading text-4xl font-black text-white">New arrivals</h1>
    </div>
    <div class="max-w-sm md:max-w-2xl xl:max-w-6xl mx-auto">
      <div class="flex flex-wrap -mx-4 -mb-8">
        <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-8">
          <a class="group block relative" href="#">
            <div class="relative h-72 mb-3">
              <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
              <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product1.png" alt="">
            </div>
            <div class="text-center">
              <h3 class="font-bold text-white group-hover:text-indigo-500 mb-1 transition duration-300">Product title</h3>
              <span class="text-sm text-green-500 font-bold">$ 199.00</span>
            </div>
          </a>
        </div>
        <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-8">
          <a class="group block relative" href="#">
            <div class="relative h-72 mb-3">
              <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
              <img class="img-fluid transform -translate-x-1 -translate-y-1 h-full w-full mb-3 border-2 border-black rounded-md" src="shopal-assets/products/product2.png" alt="">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

New arrivals product listing grid with price and Show more button

A dark-themed product listing section titled 'New arrivals' showing eight product cards in a four-column grid, each with an image, placeholder title, and green price. A purple 'Show more' button below the grid loads additional items.

AI E-commerce (products) Component Generator