Home
Prajwal Hallale
Book Showcase Grid

Book Showcase Grid

Responsive Book Catalog Display with buy now CTA buttons

This tailwind example is contributed by Prajwal Hallale, on 26-Jun-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

eCommerce Grid

Author Prajwal Hallale

506

Fork Fullscreen

<section class="dark:bg-gray-900">
  <div class="px-2 mb-12 mx-auto py-8 max-w-4xl">
    <header>
      <h2 class="mb-4 font-semibold dark:text-gray-100 text-2xl text-center">Books You May Like</h2>
    </header>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 justify-items-center">
      
      <article class="flex border rounded dark:border-gray-700/50 dark:bg-gray-800 max-w-md">
        <img class="object-cover w-[140px] h-[200px] rounded-l" loading="lazy" src="http://books.google.com/books/content?id=jg8VvObwjM8C&amp;printsec=frontcover&amp;img=1&amp;zoom=5&amp;edge=curl&amp;source=gbs_api" alt="Anselm Kiefer" width="140" height="200">
        <div class="flex flex-col justify-between flex-1 p-2">
          <div class="flex flex-col gap-2">
            <h3 class="font-semibold dark:text-white line-clamp-2">Anselm Kiefer</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3">Mangano describes studies of baby teeth over the past half century, specifically the levels of man-made radiation from atomic bombs and nuclear reactors. He examines how these studies have been used to set nuclear policy.</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">-Harry Philbrick</p>
          </div>
          <div class="flex items-center justify-end gap-2 dark:text-gray-300 flex-wrap">
            <a target="_blank" href="" class="flex items-center gap-1 px-2 py-1 border rounded dark:border-gray-700" aria-label="Buy on Amazon for 189₹">
              <img src="https://www.svgrepo.com/show/349584/amazon.svg" class="w-5 h-5" alt="" width="20" height="20">
              <span>189₹</span>
            </a>
            <a target="_blank" href="" class="flex items-center gap-1 px-2 py-1 border rounded dark:border-gray-700" aria-label="Buy on Flipkart for 150₹">
              <img src="https://www.svgrepo.com/show/162476/flipkart.svg" class="w-5 h-5" alt="" width="20" height="20">
              <span>150₹</span>
            </a>
          </div>
        </div>
      </article>

<article class="flex border rounded dark:border-gray-700/50 dark:bg-gray-800 max-w-md">
        <img class="object-cover w-[140px] h-[200px] rounded-l" loading="lazy" src="http://books.google.com/books/content?id=LEV2RAAACAAJ&amp;printsec=frontcover&amp;img=1&amp;zoom=5&amp;source=gbs_api" alt="Math Jokes 4 Mathy Folks" width="140" height="200">
        <div class="flex flex-col justify-between flex-1 p-2">
          <div class="flex flex-col gap-2">
            <h3 class="font-semibold dark:text-white line-clamp-2">Math Jokes 4 Mathy Folks</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3">Professor and Mathemagician, Harvey Mudd College, Claremont, CA --</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">-G. Patrick Vennebush</p>
          </div>
          <div class="flex items-center justify-end gap-2 dark:text-gray-300 flex-wrap">
            <a target="_blank" href="" class="flex items-center gap-1 px-2 py-1 border rounded dark:border-gray-700" aria-label="Buy on Amazon for 340₹">
              <img src="https://www.svgrepo.com/show/349584/amazon.svg" class="w-5 h-5" alt="" width="20" height="20">
              <span>340₹</span>
            </a>
            <a target="_blank" href="" class="flex items-center gap-1 px-2 py-1 border rounded dark:border-gray-700" aria-label="Buy on Flipkart for 499₹">
              <img src="https://www.svgrepo.com/show/162476/flipkart.svg" class="w-5 h-5" alt="" width="20" height="20">
              <span>499₹</span>
            </a>
          </div>
        </div>
      </article>

<article class="flex border rounded dark:border-gray-700/50 dark:bg-gray-800 max-w-md">
        <img class="object-cover w-[140px] h-[200px] rounded-l" loading="lazy" src="http://books.google.com/books/content?id=y9yoDQAAQBAJ&amp;printsec=frontcover&amp;img=1&amp;zoom=5&amp;edge=curl&amp;source=gbs_api" alt="2 Peg ke Baad" width="140" height="200">
        <div class="flex flex-col justify-between flex-1 p-2">
          <div class="flex flex-col gap-2">
            <h3 class="font-semibold dark:text-white line-clamp-2">2 Peg ke Baad</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3">2 Peg Ke Baad brings together 14 short stories that happened after 2 pegs, in an inebriated state. World's greatest stories are created when people are high – masterpieces are painted, universal truths are realised, models on billboards are befriended, lovers are united, butts are kicked, confessions are made, and relationships are sorted.</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">-Nikita Lalwani</p>
          </div>
          <div class="flex items-center justify-end gap-2 dark:text-gray-300 flex-wrap">
            <a target="_blank" href="" class="flex items-center gap-1 px-2 py-1 border rounded dark:border-gray-700" aria-label="Buy on Amazon for 445₹">
              <img src="https://www.svgrepo.com/show/349584/amazon.svg" class="w-5 h-5" alt="" width="20" height="20">
              <span>445₹</span>
            </a>
            <a target="_blank" href="" class="flex items-center gap-1 px-2 py-1 border rounded dark:border-gray-700" aria-label="Buy on Flipkart for 344₹">
              <img src="https://www.svgrepo.com/show/162476/flipkart.svg" class="w-5 h-5" alt="" width="20" height="20">
              <span>344₹</span>
            </a>
          </div>
        </div>
      </article>

<article class="flex border rounded dark:border-gray-700/50 dark:bg-gray-800 max-w-md">
        <img class="object-cover w-[140px] h-[200px] rounded-l" loading="lazy" src="http://books.google.com/books/content?id=nFtmEAAAQBAJ&amp;printsec=frontcover&amp;img=1&amp;zoom=5&amp;edge=curl&amp;source=gbs_api" alt="Love Unlocked" width="140" height="200">
        <div class="flex flex-col justify-between flex-1 p-2">
          <div class="flex flex-col gap-2">
            <h3 class="font-semibold dark:text-white line-clamp-2">Love Unlocked</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3">Young and dreamy, Priyanka wants to break free from her middle class life to live in the lap of luxury. She is longing for a partner who can pamper her by giving a comfortable life. Sincere and practical, Varun is looking for a companion who can accept and embrace his family.</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">-Kavita Bhatnagar</p>
          </div>
          <div class="flex items-center justify-end gap-2 dark:text-gray-300 flex-wrap">
            <a target="_blank" href="" class="flex items-center gap-1 px-2 py-1 border rounded dark:border-gray-700" aria-label="Buy on Amazon for 500₹">
              <img src="https://www.svgrepo.com/show/349584/amazon.svg" class="w-5 h-5" alt="" width="20" height="20">
              <span>500₹</span>
            </a>
            <a target="_blank" href="" class="flex items-center gap-1 px-2 py-1 border rounded dark:border-gray-700" aria-label="Buy on Flipkart for 232₹">
              <img src="https://www.svgrepo.com/show/162476/flipkart.svg" class="w-5 h-5" alt="" width="20" height="20">
              <span>232₹</span>
            </a>
          </div>
        </div>
      </article>

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

Related Examples

Products card grid
Example of product card grid with product image and pricing

Author:
Noob

2 years ago

22.6k
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

Author:
threehymns

1 year ago

17.6k
Amazing E-commerce card
An amazing e-commerce card with stunning hover effect

Author:
Robert Chunga

8 months ago

2k
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Author:
Ragnar lodbrok

8 months ago

969
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

3 months ago

472
Blog Post Showcase
a grid showcasing the blog posts with images and brief descriptions

Author:
Henrik R.

1 year ago

3.9k
Card
travel place card hover effect card

Author:
nahid hasan

5 months ago

1k
Galerie de produits Gis et Affiche Tailwind

Author:
kouassi ange anisco

4 months ago

335
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
kzsamir849

1 year ago

1.7k
Payment Successful! Notification page

Author:
EliteAI Tools

7 months ago

1.9k
Card grid

Author:
Leon Bachmann

2 years ago

11.6k
Product card for eCommerce website

Author:
Steven Kuhn

2 years ago

12.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components