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.3k

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

offer card

Author:
ABDO-SY

7 months ago

797
Card Component
This component is a simple card (without image) component with hover effect & Dark mode Supported & full responsive

Author:
Shariar Hasan

1 year ago

3.3k
Fully Animated Timeline Card
It is at a 20s interval for testing purposes. Go to the <style> and change the .content-scroll class from 20s to 35s for a production ready slower animation.

Author:
Coastal UI

11 months ago

1.7k
Info cards

Author:
Samuel Dawson

2 years ago

10.6k
Form package

Author:
Hunter Guru

1 year ago

2.4k
Profile Card with Transparent
Dynamic Background: Darker gradient background for better contrast Floating colored blobs for visual interest Profile Image Glow: Added a gradient glow effect behind the profile picture Smoother hover transition Typography Improvements: Larger, bolder name text Subtle hover underline animation for the name Better spacing and hierarchy

Author:
KULDEEP

4 months ago

413
User Profile Sidebar Menu
A clean and modern user profile sidebar menu built with TailwindCSS. This component displays a user’s profile picture, name, and a vertical navigation menu with links such as Dashboard, Order History, Account Details, Address, Reviews, and Logout. Ideal for account dashboards in web applications, the design features rounded corners, subtle shadows, and interactive hover effects, delivering a smooth and user-friendly experience.

Author:
SHARIFUL ISLAM

7 months ago

1.1k
Holiday package card
Responsive card

Author:
Aman kumar

1 year ago

6.2k
Products Layout
An ecommerce store front product list layout

Author:
Developer Kwame

1 month ago

229
Products card grid
Example of product card grid with product image and pricing

Author:
Noob

3 years ago

23.4k
Monkey card
First tailwind example

Author:
muhittin budak

6 months ago

570
Responsive cards with hover

Author:
Robert Chunga

1 year ago

2.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components