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

574

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

3 years ago

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

2 years ago

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

Author:
Robert Chunga

1 year ago

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

Author:
Ragnar lodbrok

1 year ago

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

9 months ago

955
Basic responsive card grid
supports dark mode

Author:
Samuel Dawson

2 years ago

11.7k
Card 30/70

Author:
Maxim

9 months ago

652
Tailwind Card Components
A collection of 20+ copy-paste ready card components built with pure HTML and Tailwind CSS. Includes product cards, profile cards, article cards, pricing cards, testimonials, and notifications.

Author:
Ijila Itunu

4 months ago

484
Work Showcase Cards
Highlight your top projects or products with these cards, featuring images and brief descriptions. This example has a subtle hover effect.

Author:
Computer guy

2 years ago

12.5k
Animated Pizza Menu Grid
A beautiful, interactive pizza product grid featuring smooth 360-degree rotation animations on hover. This free open-source component includes automatic dark mode support, responsive design (mobile, tablet, desktop), and an elegant "Add to Cart" button reveal effect. Built with HTML and Tailwind CSS - no dependencies required. Ideal for restaurant websites, food delivery platforms, e-commerce stores, or any product showcase needing eye-catching interactivity.

Author:
Homayoun

2 months ago

441
Card grid for posts

Author:
Mr Robot

3 years ago

22.7k
Product grid

Author:
ariaw

3 months ago

127

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components