Home
farid
Simple product card

Simple product card

This tailwind example is contributed by farid, on 21-Oct-2024. Component is made with Tailwind CSS v3. It is responsive.

Card

Author farid

1.7k

Fork Fullscreen

<div class="mx-auto max-w-[475px] min-h-[690px] overflow-hidden rounded-xl bg-white shadow-xl p-8 pt-o relative border border-gray-200">
  <span class="bg-neutral-300 text-black text-lg mx-auto p-4 rounded-b-lg absolute top-0 shadow-lg inset-x-0 max-w-44 text-center z-1">October 20th </span>
  <div class="rounded-full aspect-square bg-gray-200 size-1/2 mx-auto mt-12 flex flex-col justify-center items-center">
    <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M18 25.1999V28.7999M12.6 30.5999H23.4M7.20001 25.1999H28.8C30.7882 25.1999 32.4 23.5881 32.4 21.5999V8.9999C32.4 7.01168 30.7882 5.3999 28.8 5.3999H7.20001C5.21178 5.3999 3.60001 7.01168 3.60001 8.9999V21.5999C3.60001 23.5881 5.21178 25.1999 7.20001 25.1999Z" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
    </svg>

</div>
  <h3 class="text-center text-3xl mt-12">Online Training</h3>
  <p class="text-xl text-center text-neutral-400 my-8 max-w-[400px] mx-auto">Lorem ipsum dolor sit amet consecte tur adipiscing elit semper dalar dolor elementum tempus hac.</p>
  <div class="flex flex-col items-center justify-center">
    <a href="#" class="transition w-64 inline-flex bg-neutral-500 justify-center items-center rounded-full px-6 py-2 text-lg text-center font-medium transition duration-150 ease-in-out px-6 bg-primary text-white hover:bg-neutral-700 hover:shadow-secondary-lg focus:bg-gray-500 focus:shadow-secondary-lg focus:outline-none focus:ring-0 active:bg-neutral-700 mb-8">Main action</a>

<a href="" class="transition w-64 border border-neutral-500 inline-flex items-center justify-center rounded-full px-6 py-2 text-lg font-medium transition duration-150 ease-in-out px-6 focus:shadow-secondary-2 focus:outline-none focus:ring-0 hover:shadow-lg hover:border-neutral-400 hover:bg-neutral-200 text-neutral-500">More action</a>
  </div>
</div>

Related Examples

google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Author:
Abhiraj

1 year ago

1.3k
Modern E-commerce Product Card with TailwindCSS
This product card is designed for e-commerce platforms using TailwindCSS. It features a discount badge, product image carousel, quick view and quick order buttons, ratings, product name, brand details, dynamic pricing with a strike-through original price, and a prominent add-to-cart button. The clean and professional layout is perfect for showcasing products on online stores.

Author:
SHARIFUL ISLAM

1 year ago

2.2k
Info cards for admin panel

Author:
Sophia Baker

3 years ago

12.1k
Card KPI
Targetas ahora con un grafico

Author:
Raul antonio de la cruz hernandez

2 months ago

514
card

Author:
pablitodgb

7 months ago

560
Responsive Tailwind CSS Listing Cards
This is a collection of responsive listing cards built with Tailwind CSS, optimized for modern web applications. The component features a flexbox layout, ensuring seamless responsiveness across mobile, tablet, and laptop screens. Each card includes an image, title, and description, styled for both light and dark modes. Perfect for showcasing products, portfolio items, or blog posts.

Author:
Abhiraj

1 year ago

2.1k
Card
card

Author:
5upreme505

1 year ago

2.2k
Team section
beautiful responsive our team section

Author:
Rajesh Maheshwari

11 months ago

1.2k
Profile card

Author:
ariaw

4 months ago

403
Card template

Author:
Raul antonio de la cruz hernandez

4 weeks ago

37
Expandable Card
An expandable card using tailwind + alpine to show additional information when it is open

Author:
farid

3 months ago

384
image

Author:
pablitodgb

7 months ago

455

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components