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

510

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

Masonry Grid
Auto-adjusting masonry grid

Author:
Simon Scheffer

2 years ago

30.7k
Sidebar
This is the sidebar that I use in my projects, I use grid to be able to manage the space issue a little better, it seems like a clean and modern design, it is more than anything for the dashboards that you want to create

Author:
Ameth Galarcio

9 months ago

3.2k
Blog post showcase minimal
a grid showcasing the blog posts with images and title

Author:
Henrik R.

1 year ago

3.1k
Food Order Card
Ecommerce/Food order card layout

Author:
Rajesh Maheshwari

5 months ago

655
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

4 months ago

695
Feature tiles

Author:
Nishant Trivedi

2 years ago

13.4k
Order Sumamary
Shows the summary of the order a user has placed, may include shipping address, total amount, payment method, and status.

Author:
Code huit

2 years ago

13.3k
Food Ordering Dashboard
A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

Author:
Muhammad Umair Arshad

2 months ago

442
Table CRUD
CRUD TABLE DESIGN

Author:
Abhiraj

5 months ago

2.1k
Contact Form Component
A multi-step, responsive contact form with a modern dark-themed design. The form includes four steps: name, email, phone number, and message. It features a side panel with contact information and a sleek, gradient-styled interface using Tailwind CSS.

Author:
Muhammad Umair Arshad

4 months ago

548
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
Responsive Features Section

Author:
ᴀʀ!ᴀ

4 months ago

454

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components