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

10

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

Spinner with card
Use this animated loading indicator when content inside of a card is still loading.

Author:
Md. Tofayel islam

11 months ago

2k
Product card

Author:
Oliver Hansen

2 years ago

12.4k
Card Component
A Simple Card Component with full responsiveness and dark mode supported

Author:
Shariar Hasan

11 months ago

2.1k
Feature Highlights cards

Author:
Carla Hoffman

11 months ago

1.7k
Hover effect card

Author:
Samuel Dawson

2 years ago

27k
Card
Card with Likes and download Button

Author:
Mrunal Solkar

1 year ago

9.3k
Profile card
tailwind Profile Card

Author:
Md. Tofayel islam

11 months ago

1.7k
Animated Info Card
Animated info card

Author:
shivam vishvakarma

1 month ago

369
Responsive user card with tailwind

Author:
Gopi Yadav

2 years ago

10.3k
Simple card layout with image

Author:
Leon Bachmann

2 years ago

9.7k
Card with image
Blog post card

Author:
Mr Robot

2 years ago

9.7k
Card section
Card section. find it makecomponents.com

Author:
makecomponents

5 months ago

681

Explore components by Tags

Didn't find component you were looking for?

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