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

643

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

Subcribe Card - Alert - Notification

Author:
ABDO-SY

1 month ago

223
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

6 days ago

20
Deals of the Day - Exclusive Discounts!
Grab the best deals on top products with unbeatable discounts! Limited-time offers on premium gadgets, fashion, and more. Shop now and save big before the deal ends!

Author:
SHARIFUL ISLAM

2 months ago

349
Author box

Author:
Mr Robot

2 years ago

11.2k
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Author:
Hamza Atig

1 week ago

65
Responsive Feature Card

Author:
Gopi Yadav

2 years ago

12.6k
Cards section - Sport

Author:
ABDO-SY

1 month ago

615
Simple Card with Image
Horizontal card

Author:
Prem..

2 years ago

8.5k
Article-Post Preview card

Author:
Prashant

2 years ago

9.2k
Tailwind CSS Book

Author:
Michael Andreuzza

11 months ago

1.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

1 week ago

12
Coming Soon Page

Author:
Conan Hilton

2 years ago

9.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ 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

© 2025 TailwindFlex. All Rights Reserved.

v1.1