Product / Service Card

Example of a card that can be used as a blog, product, or service card with reviews.

This tailwind example is contributed by Noob, on 11-Aug-2022. Component is made with Tailwind v3.4. It is responsive.

Tailwind v3.4 18.7k 14

<div class="antialiased text-gray-900 ">
  <div class="bg-gray-200 min-h-screen p-8 flex items-center justify-center">
    <div class="bg-white rounded-lg overflow-hidden shadow-2xl xl:w-1/5 lg:w-1/4 md:w-1/3 sm:w-1/2">
      
      
      <img class="h-48 w-full object-cover object-end" src="https://images.unsplash.com/photo-1570797197190-8e003a00c846?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=968&q=80" alt="Home in Countryside" />
      <div class="p-6">
        <div class="flex items-baseline">
          <span class="inline-block bg-teal-200 text-teal-800 py-1 px-4 text-xs rounded-full uppercase font-semibold tracking-wide">New</span>
          <div class="ml-2 text-gray-600 text-xs uppercase font-semibold tracking-wide">
            3 beds &bull; 2 baths
          </div>
        </div>
        <h4 class="mt-2 font-semibold text-lg leading-tight truncate">Beautiful Home in the countryside</h4>

<div class="mt-1">
          <span>$1,900.00</span>
          <span class="text-gray-600 text-sm">/ wk</span>
        </div>
        <div class="mt-2 flex items-center">
          <span class="text-teal-600 font-semibold">
            <span>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="fas fa-star"></i>
              <i class="far fa-star"></i>
              <span>
              </span>
              <span class="ml-2 text-gray-600 text-sm">34 reviews</span>
        </div>
      </div>
    </div>
  </div>
</div>

Related Examples

Card grid section
Display article/blog grid

Mr Robot

3 years ago

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

Noob

3 years ago

24.8k
Card grid for posts

Mr Robot

3 years ago

24.1k
Product card

Oliver Hansen

3 years ago

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

threehymns

2 years ago

20.1k
Tailwind image card with text above it

I.P. Leroy

3 years ago

26.5k
Beautiful card design with image

Brandon D

4 years ago

14.2k
Image card with overlay text overlay

Santos78

3 years ago

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

Code huit

3 years ago

14.7k
Product card for eCommerce website

Steven Kuhn

3 years ago

13.3k
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.

Amit Pachange

4 years ago

53.6k
Product card
sleek and modern product card

OmKar Mehta

2 years ago

7.4k
Product card

Simon Scheffer

3 years ago

32.4k