Home
Noob
Product / Service Card

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 CSS v3. It is responsive.

Card eCommerce

Author Noob

15.2k

Fork Fullscreen

<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

Author:
Mr Robot

2 years ago

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

Author:
Noob

2 years ago

19.9k
Card grid for posts

Author:
Mr Robot

2 years ago

18.4k
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.3k
Product card

Author:
Oliver Hansen

2 years ago

12k
Tailwind image card with text above it

Author:
I.P. Leroy

1 year ago

20.3k
Beautiful card design with image

Author:
Brandon D

2 years ago

11.4k
Image card with overlay text overlay

Author:
Santos78

1 year ago

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

1 year ago

11.6k
Product card for eCommerce website

Author:
Steven Kuhn

2 years ago

10.9k
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:
Amit Pachange

2 years ago

46k
Product card
sleek and modern product card

Author:
OmKar Mehta

9 months ago

3.9k
Product card

Author:
Simon Scheffer

2 years ago

26.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components