Simple product card

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

Tailwind v3.4 1.9k 5

<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

Product card for eCommerce website

Steven Kuhn

4 years ago

13.3k
Card Item Financieros
Item Financiero

Ameth Galarcio

2 years ago

2.8k
pile carde scroll
pile carde scroll

Omer fils ELENGA

8 months ago

594
Sign up form

Rajesh Maheshwari

1 year ago

1.6k
News Feed

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.4k
Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

8 months ago

938
card appetizer
ss

Anonymous

1 year ago

2.2k
Clickable and Responsive Card Grid
It is designed to showcase and link to various topics or content categories.

R Thapa

2 years ago

11.8k
test deepseek ticket
test deepseek ticket

Omer fils ELENGA

1 week ago

17
Holiday package card
Responsive card

Aman kumar

2 years ago

7.2k
delivary
using cars and carts

Bonimater

1 year ago

1.4k
Premium Tailwind CSS Card Component
Discover this elegant premium card component built with Tailwind CSS featuring the Poppins font. This modern, responsive design features glassmorphism effects, gradient borders, smooth animations, and a sophisticated color scheme, making it ideal for showcasing premium products or services.

CodewithFaraz

1 year ago

1k