card

simple card for begin

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

Card

Author Omer fils ELENGA

2.1k

1

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

Pagination
It's my first project which i made him in the using tailwind css and html

Author:
Sufyan jutt

3 months ago

185
Card grid section
Display article/blog grid

Author:
Mr Robot

3 years ago

29.5k
Hover effect card

Author:
Rakib Hasan Sohag

1 year ago

1.7k
Product Details Card

Author:
ABDO-SY

11 months ago

2.1k
Blog post cards
responsive blog post cards

Author:
Mr Robot

3 years ago

12.8k
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

9 months ago

741
Event notification card

Author:
Odessa Young

3 years ago

9.6k
Product review card

Author:
Rama krishnan Subramanian

1 year ago

2.2k
Trending Users
Tailwind Flex Trending Users Card Design

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

3.9k
profile3

Author:
pablitodgb

7 months ago

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

Author:
ABDO-SY

11 months ago

1.7k
MENU OMERLINKS
MENU OMERLINKS

Author:
Omer fils ELENGA

2 weeks ago

34

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12