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

463

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

21.9k
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.1k
Amazing E-commerce card
An amazing e-commerce card with stunning hover effect

Author:
Robert Chunga

6 months ago

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

Author:
Ragnar lodbrok

6 months ago

893
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

1 month ago

288
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

1 month ago

215
Company icons grid

Author:
Amit Pachange

2 years ago

12.3k
Responsive Projects Section

Author:
ᴀʀ!ᴀ

1 month ago

428
Responsive eCommerce Footer Component with Tailwind CSS
A modern, fully responsive eCommerce footer component built with Tailwind CSS. It includes multiple sections like company info, account links, help center, categories, social media icons, payment methods, and app download buttons. Optimized for seamless mobile and desktop experiences, making it perfect for any online store or business website.

Author:
SHARIFUL ISLAM

3 months ago

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

Author:
Prajwal Hallale

2 years ago

7.8k
Tweets showcase grid
Responsive tweets showcase grid

Author:
Freja Jensen

2 years ago

10.3k
Basic responsive card grid
supports dark mode

Author:
Samuel Dawson

2 years ago

10.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components