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

1.9k

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

Monkey card
First tailwind example

Author:
muhittin budak

6 months ago

701
Product / Service Card
Example of a card that can be used as a blog, product, or service card with reviews.

Author:
Noob

3 years ago

17.4k
Beautiful Info card
Info card with info type section on the corner.

Author:
TailwindFlex

3 years ago

10.1k
Confirmation modal/card

Author:
Sophia Baker

2 years ago

15.3k
Feature card

Author:
Matti

9 months ago

1.1k
Department Card

Author:
Ashok Kumar

1 year ago

1.6k
SimpleGrid

Author:
wtfbrh

9 months ago

800
cards
html , css ,

Author:
Hacker Development

6 months ago

603
Profile card

Author:
Jaber Zarif

1 year ago

2.3k
Configurable 3-Tier Responsive Pricing Table
A modern, responsive pricing table component inspired by SaaS layouts, built with HTML and Tailwind CSS. Features three distinct pricing tiers displayed in cards, stacking vertically on smaller screens and transitioning to a 3-column grid on large screens (lg breakpoint). Includes interactive top controls for selecting the number of users and toggling between monthly/yearly billing cycles. Each card uses placeholder content for icons, titles, descriptions, features (with checkmarks/info icons), and distinct call-to-action buttons, making it easily adaptable. Styled with subtle background colors and clear typography for excellent readability.

Author:
Hamza Atig

6 months ago

645
cards
cards with background animation

Author:
Anonymous

1 year ago

3k
Card with Dark Mode
For blog post and e-commerce websites

Author:
OmKar Mehta

1 year ago

2.2k

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

© 2025 TailwindFlex. All Rights Reserved.

v1.12