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

12.4k

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

1 year ago

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

Author:
Noob

1 year ago

15.3k
Card grid for posts

Author:
Mr Robot

1 year ago

13.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:
jdherron1

8 months ago

11.6k
Product card

Author:
Oliver Hansen

1 year ago

10.4k
Tailwind image card with text above it

Author:
I.P. Leroy

1 year ago

13.7k
Beautiful card design with image

Author:
Brandon D

1 year ago

9.3k
Image card with overlay text overlay

Author:
Santos78

1 year ago

20.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

10 months ago

9k
Product card for eCommerce website

Author:
Steven Kuhn

1 year ago

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

1 year ago

35.8k
Product card
sleek and modern product card

Author:
OmKar Mehta

2 months ago

1.4k
Product card

Author:
Simon Scheffer

1 year ago

19.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 1400+ componenent