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

982

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

Card-Product
Item or card to show products

Author:
Ameth Galarcio

1 year ago

3.1k
card profie
profile card

Author:
Aman kumar

1 year ago

3.7k
offer card

Author:
ABDO-SY

3 months ago

502
Responsive Working Process Section
This modern and responsive "Our Working Process" section adapts seamlessly to all screen sizes, ensuring a smooth user experience. The design follows a structured step-by-step layout with clear typography, bold colors, and interactive elements, making it perfect for showcasing business processes or workflows.

Author:
ABDO-SY

2 months ago

473
Grid
Grid Grid-Cards

Author:
sardorazimov2901

1 year ago

1.6k
Service/Product card
Tour trip booking showcase card

Author:
JaxStone

2 years ago

12.4k
card
simple card for begin

Author:
Omer fils ELENGA

4 months ago

1.1k
Blog Author Card

Author:
EliteAI Tools

5 months ago

848
Info Card
info card with description

Author:
Prashant

2 years ago

12.3k
Recipe card
A modern and responsive Tailwind CSS recipe card with image, ingredients, and instructions. Supports dark mode and mobile view.

Author:
Rajesh Pandey

1 month ago

154
Chat Bot
Simulation of a chat bot that can be used for conversations as a sketch idea

Author:
Ameth Galarcio

11 months ago

2.7k
Product features cards

Author:
Henrik R.

1 year ago

3.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components