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

349

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

19.8k
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

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

Author:
Robert Chunga

2 months ago

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

Author:
Ragnar lodbrok

1 month ago

334
E-commerce product card withTailwind CSS

Author:
Quentin Rivers

3 months ago

739
Responsive products grid
Responsive product card grid using tailwind CSS.

Author:
Arya

2 years ago

37.9k
Article List Section
A section displaying a list of articles with associated information.

Author:
Junclarkaizen Pagu

1 year ago

5.8k
Tailwind product gallery

Author:
JaxStone

1 year ago

23.6k
Bento grids

Author:
Maxim

11 months ago

15.3k
Responsive Article Section

Author:
Prashant

2 years ago

13.5k
Features grid

Author:
Sophia Baker

2 years ago

8.7k
Info cards grid with icons
Evenly-sized cards for showing various stats on the user/admin dashboard.

Author:
Prajwal Hallale

1 year ago

7.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components