card

simple card for begin

This tailwind example is contributed by Omer fils ELENGA, on 22-Feb-2025. Component is made with Tailwind v3.4. It is responsive.

Card

Author Omer fils ELENGA

Tailwind v3.4 2.7k 2

Fork Fullscreen

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 md:grid-cols-3 lg:gap-8  p-4">

<div class="cont h-32 rounded-lg bg-violet-700 shadow shadow-xl ">
    <h1 class="pt-12 p-4 text-2xl text-white font-bold ">Data card Titre</h1>
    <p class="p-4 pt-0 text-white text-sm">
      The dialog element is only supported in Chrome 37+, Safari 6+ and Opera 24+.The dialog element is only supported
      in Chrome 37+, Safari 6+ and Opera 24+.
    </p>

<button class="pt-0 p-4 flex gap-1 text-gray-100 hover:gap-2 ">Next

<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" style="fill:  #f1f1f1f1;transform: ;msFilter:;"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg>
    </button>

</div>

<div class="cont h-32 rounded-lg bg-violet-700 shadow shadow-xl ">
    <h1 class="pt-12 p-4 text-2xl text-white font-bold ">Data card Titre</h1>
    <p class="p-4 pt-0 text-white text-sm">
      The dialog element is only supported in Chrome 37+, Safari 6+ and Opera 24+.The dialog element is only supported
      in Chrome 37+, Safari 6+ and Opera 24+.
    </p>

<button class="pt-0 p-4 flex gap-1 text-gray-100 hover:gap-2 ">Next

<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" style="fill:  #f1f1f1f1;transform: ;msFilter:;"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg>
    </button>

</div>

<div class="cont h-32 rounded-lg bg-violet-700 shadow shadow-xl ">
    <h1 class="pt-12 p-4 text-2xl text-white font-bold ">Data card Titre</h1>
    <p class="p-4 pt-0 text-white text-sm">
      The dialog element is only supported in Chrome 37+, Safari 6+ and Opera 24+.The dialog element is only supported
      in Chrome 37+, Safari 6+ and Opera 24+.
    </p>

<button class="pt-0 p-4 flex gap-1 text-gray-100 hover:gap-2 ">Next

<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" style="fill:  #f1f1f1f1;transform: ;msFilter:;"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg>
    </button>

</div>

<div class="cont h-32 rounded-lg bg-violet-700 shadow shadow-xl ">
    <h1 class="pt-12 p-4 text-2xl text-white font-bold ">Data card Titre</h1>
    <p class="p-4 pt-0 text-white text-sm">
      The dialog element is only supported in Chrome 37+, Safari 6+ and Opera 24+.The dialog element is only supported
      in Chrome 37+, Safari 6+ and Opera 24+.
    </p>

<button class="pt-0 p-4 flex gap-1 text-gray-100 hover:gap-2 ">Next

<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" style="fill:  #f1f1f1f1;transform: ;msFilter:;"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg>
    </button>

</div>

<div class="cont h-32 rounded-lg bg-violet-700 shadow shadow-xl ">
    <h1 class="pt-12 p-4 text-2xl text-white font-bold ">Data card Titre</h1>
    <p class="p-4 pt-0 text-white text-sm">
      The dialog element is only supported in Chrome 37+, Safari 6+ and Opera 24+.The dialog element is only supported
      in Chrome 37+, Safari 6+ and Opera 24+.
    </p>

<button class="pt-0 p-4 flex gap-1 text-gray-100 hover:gap-2 ">Next

<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" style="fill:  #f1f1f1f1;transform: ;msFilter:;"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg>
    </button>

</div>

<div class="cont h-32 rounded-lg bg-violet-700 shadow shadow-xl ">
    <h1 class="pt-12 p-4 text-2xl text-white font-bold ">Data card Titre</h1>
    <p class="p-4 pt-0 text-white text-sm">
      The dialog element is only supported in Chrome 37+, Safari 6+ and Opera 24+.The dialog element is only supported
      in Chrome 37+, Safari 6+ and Opera 24+.
    </p>

<button class="pt-0 p-4 flex gap-1 text-gray-100 hover:gap-2 ">Next

<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" style="fill:  #f1f1f1f1;transform: ;msFilter:;"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg>
    </button>

</div>

<div class="cont h-32 rounded-lg bg-violet-700 shadow shadow-xl ">
    <h1 class="pt-12 p-4 text-2xl text-white font-bold ">Data card Titre</h1>
    <p class="p-4 pt-0 text-white text-sm">
      The dialog element is only supported in Chrome 37+, Safari 6+ and Opera 24+.The dialog element is only supported
      in Chrome 37+, Safari 6+ and Opera 24+.
    </p>

<button class="pt-0 p-4 flex gap-1 text-gray-100 hover:gap-2 ">Next

<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" style="fill:  #f1f1f1f1;transform: ;msFilter:;"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg>
    </button>

</div>

<div class="cont h-32 rounded-lg bg-violet-700 shadow shadow-xl ">
    <h1 class="pt-12 p-4 text-2xl text-white font-bold ">Data card Titre</h1>
    <p class="p-4 pt-0 text-white text-sm">
      The dialog element is only supported in Chrome 37+, Safari 6+ and Opera 24+.The dialog element is only supported
      in Chrome 37+, Safari 6+ and Opera 24+.
    </p>

<button class="pt-0 p-4 flex gap-1 text-gray-100 hover:gap-2 ">Next

<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" style="fill:  #f1f1f1f1;transform: ;msFilter:;"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg>
    </button>

</div>

<div class="cont h-32 rounded-lg bg-violet-700 shadow shadow-xl ">
    <h1 class="pt-12 p-4 text-2xl text-white font-bold ">Data card Titre</h1>
    <p class="p-4 pt-0 text-white text-sm">
      The dialog element is only supported in Chrome 37+, Safari 6+ and Opera 24+.The dialog element is only supported
      in Chrome 37+, Safari 6+ and Opera 24+.
    </p>

<button class="pt-0 p-4 flex gap-1 text-gray-100 hover:gap-2 ">Next

<svg xmlns="http://www.w3.org/2000/svg"  width="24" height="24" viewBox="0 0 24 24" style="fill:  #f1f1f1f1;transform: ;msFilter:;"><path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z"></path></svg>
    </button>

</div>

</div>

<p>

Related Examples

Free SEO Audit & Analysis Tool
Instant SEO analysis of your website. Check 50+ ranking factors including on-page SEO, technical issues, and mobile performance.

MD Mostafa Niloy

11 months ago

793
Enhanced Student Testimonials Section
A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

Muhammad Umair Arshad

1 year ago

1.5k
Service/Product card
Tour trip booking showcase card

JaxStone

3 years ago

13.8k
beautifull project Item

Akram Khan

2 years ago

3.6k
Otp-code template
This is an OTP code template that contains the one-time password, which can be sent to the user's email either when they are signing up for the first time or for multi-factor authentication (MFA) during the login process.

anandu ap

2 years ago

4.1k
CONTACT US - GET IN TOUCH - PORTFOLIO
Responsive "Contact us" section, dark-mode-friendly contact area featuring stylish cards with icons displaying essential contact details.

ABDO-SY

1 year ago

2.6k
Latest Blog Card Components
Stay ahead of the curve with fresh content on code, design, startups, and everything in between.

Alif Bima Pradana

9 months ago

455
Blog Author Card

EliteAI Tools

1 year ago

1.9k
Battery and signal
Battery and signal bar component

ardianhu

1 year ago

1.4k
ApexCodeStudios.com Celestara Profile Odyssey
Get Access to 216+ Free Premium Tailwind CSS UI Components at apexcodestudios.com. Beautiful dual-style profile cards with cover images, stylish avatars, stats sections, social links, and follow buttons.

Apex Code Studios

6 months ago

255
Testimonial card with image

Simon Scheffer

3 years ago

12.8k
offer card

ABDO-SY

1 year ago

1.5k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.