Collection of free Tailwind CSS card code examples from Codepen and other resources.

Demo image: Social Cards with Tailwind CSS

Author

  • Frank Esteban

Made with

  • HTML / CSS / JS

About a code

Social Cards with Tailwind CSS

Card system designed in a minimalist design and pleasing to the eye, oriented towards social networks and interaction between users, do not hesitate to mix it with your own creation system, so you can achieve wonderful challenges in its interface.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: twind.js

Tailwind version: 3.0.24

Demo image: Lexicon Product Card with compare

Author

  • TailwindTemplates

Made with

  • HTML / CSS

About a code

Lexicon Product Card with compare

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.24

Demo image: Glowing Gradients with Tailwind CSS

Author

  • Braydon Coyer

Made with

  • HTML / CSS

About a code

Glowing Gradients with Tailwind CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.24

Demo image: Card Component Shadow with Review Score

Author

  • HyperUI

Made with

  • HTML / CSS

About a code

Card Component Shadow with Review Score

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.23

Demo image: Card Component Image with Content and Background

Author

  • HyperUI

Made with

  • HTML / CSS

About a code

Card Component Image with Content and Background

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.23

Demo image: Card Component Shadow with Gradient Border

Author

  • HyperUI

Made with

  • HTML / CSS

About a code

Card Component Shadow with Gradient Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.23

Demo image: Card Component With Large Call to Action and Image

Author

  • HyperUI

Made with

  • HTML / CSS

About a code

Card Component With Large Call to Action and Image

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.23

Demo image: Card Component Stacked with Image with Shadow and Content

Author

  • HyperUI

Made with

  • HTML / CSS

About a code

Card Component Stacked with Image with Shadow and Content

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.23

Demo image: Card Component Bordered with Image and Content with Call to Action

Author

  • HyperUI

Made with

  • HTML / CSS

About a code

Card Component Bordered with Image and Content with Call to Action

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.23

Demo image: Card Component With Content, Image, Details and Gradient Border

Author

  • HyperUI

Made with

  • HTML / CSS

About a code

Card Component With Content, Image, Details and Gradient Border

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.23

Demo image: Card Component With Icon, Content and Background

Author

  • HyperUI

Made with

  • HTML / CSS

About a code

Card Component With Icon, Content and Background

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.23

Demo image: Card Component Stacked with Large Image and Content

Author

  • HyperUI

Made with

  • HTML / CSS

About a code

Card Component Stacked with Large Image and Content

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.23

Demo image: Card Component Darkened Background with Content on Hover

Author

  • HyperUI

Made with

  • HTML / CSS

About a code

Card Component Darkened Background with Content on Hover

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.23

Demo image: Card Component Bordered with Content on Hover

Author

  • HyperUI

Made with

  • HTML / CSS

About a code

Card Component Bordered with Content on Hover

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.23

Demo image: Card Component Bordered with Content Over Image

Author

  • HyperUI

Made with

  • HTML / CSS

About a code

Card Component Bordered with Content Over Image

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.23

Demo image: Card Component Stat, Content with Call to Action

Author

  • HyperUI

Made with

  • HTML / CSS

About a code

Card Component Stat, Content with Call to Action

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.23

Demo image: Card Component Stat, Content with Accent Border and Icon

Author

  • HyperUI

Made with

  • HTML / CSS

About a code

Card Component Stat, Content with Accent Border and Icon

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.23

Demo image: Card Component Bordered with Image, Price, Content and Details

Author

  • HyperUI

Made with

  • HTML / CSS

About a code

Card Component Bordered with Image, Price, Content and Details

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.23

Demo image: Card Component Image, Name, with Social Links and Project Links

Author

  • HyperUI

Made with

  • HTML / CSS

About a code

Card Component Image, Name, with Social Links and Project Links

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.23

Demo image: Card Component Content Over Image with Review Score

Author

  • HyperUI

Made with

  • HTML / CSS

About a code

Card Component Content Over Image with Review Score

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.23

Demo image: Card Component Gradient Border with Content and Tags

Author

  • HyperUI

Made with

  • HTML / CSS

About a code

Card Component Gradient Border with Content and Tags

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.23

Demo image: Card Component Shaped with Image and Content

Author

  • HyperUI

Made with

  • HTML / CSS

About a code

Card Component Shaped with Image and Content

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.23

Demo image: Card Component Stacked Effect with Content Reveal on Hover

Author

  • HyperUI

Made with

  • HTML / CSS

About a code

Card Component Stacked Effect with Content Reveal on Hover

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.23

Demo image: Simple Card

Author

  • Hafiz_Dev

Made with

  • HTML / CSS

About a code

Simple Card

Simple card with simple animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.18

Demo image: Youtube - Home Timeline

Author

  • Dzaky Widya Putra

Made with

  • HTML / CSS

About a code

Youtube - Home Timeline

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.18

Demo image: Tailwind CSS Property Card

Author

  • PostSrc

Made with

  • HTML / CSS

About a code

Tailwind CSS Property Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.7

Demo image: E-commerce Card

Author

  • zoltanszogyenyi

Made with

  • HTML / CSS

About a code

E-commerce Card

Use this card component to show information about a product in an e-commerce website.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 3.0.2

Demo image: Social Media Card

Author

  • joker banny

Made with

  • HTML / CSS

About a code

Social Media Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Tailwind CSS Card

Author

  • zoltanszogyenyi

Made with

  • HTML / CSS

About a code

Tailwind CSS Card

You can use this card component when building a blog page or in any other situations that you see fit by using an image, description, and a CTA button.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Tailwind CSS Product Card Dark

Author

  • aji

Made with

  • HTML / CSS

About a code

Tailwind CSS Product Card Dark

Vertical shop card.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Tailwind Responsive Product Card

Author

  • sourav

Made with

  • HTML / CSS

About a code

Tailwind Responsive Product Card

A simple yet responsive product card with product image on the left and product name and description on the right.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Food Card Using Tailwindcss

Author

  • safwanAzman

Made with

  • HTML / CSS

About a code

Food Card Using Tailwindcss

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Post Card Course Online Responsive

Author

  • joker banny

Made with

  • HTML / CSS

About a code

Post Card Course Online Responsive

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Order Summary

Author

  • stephenwayar

Made with

  • HTML / CSS

About a code

Order Summary

Music subscription checkout card.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Info Card - Forest

Author

  • safwanAzman

Made with

  • HTML / CSS

About a code

Info Card - Forest

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Info Card

Author

  • swina

Made with

  • HTML / CSS

About a code

Info Card

Info card rounded & shadow.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Commerce slide cards

Author

  • Hammaadh Rasheedh

Made with

  • HTML / CSS

About a code

Commerce slide cards

Vertical cards for e-commerce website slides.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: CardUI Dark

Author

  • CCHECKED

Made with

  • HTML / CSS

About a code

CardUI Dark

Simple dark card.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Card Pot

Author

  • joker banny

Made with

  • HTML / CSS

About a code

Card Pot

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Card

Author

  • joker banny

Made with

  • HTML / CSS

About a code

Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Card

Author

  • tom-dr

Made with

  • HTML / CSS

About a code

Card

Card with illustration.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Blog Post Card

Author

  • Asad Ali Haider

Made with

  • HTML / CSS

About a code

Blog Post Card

Blog post card example.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Basic Card Pot

Author

  • joker banny

Made with

  • HTML / CSS

About a code

Basic Card Pot

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Advert Card

Author

  • stephenwayar

Made with

  • HTML / CSS

About a code

Advert Card

Business advert card.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.4

Demo image: Photo Collage With Overlapped Card

Author

  • mitchellmusarra

Made with

  • HTML / CSS

About a code

Photo Collage With Overlapped Card

Photo collage with an overlapped card. Not mobile optimised.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.19

Demo image: Tailwind Movie Card

Author

  • Nikolay

Made with

  • HTML / CSS

About a code

Tailwind Movie Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.19

Demo image: Product Card - with Tailwind CSS

Author

  • Joshua ジョスエ

Made with

  • HTML / CSS

About a code

Product Card with Tailwind CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.2.19

Demo image: Credit Card with TailwindCSS

Author

  • Fred C.

Made with

  • HTML / CSS

About a code

Credit Card with TailwindCSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.1.4

Demo image: Card

Author

  • safwanAzman

Made with

  • HTML / CSS

About a code

Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.3

Demo image: Square Card

Author

  • Mostafa Ahangarha

Made with

  • HTML / CSS

About a code

Square Card

Just another simple card using pure Tailwindcss.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.3

Demo image: Contact Card

Author

  • Kristen

Made with

  • HTML / CSS

About a code

Contact Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.2

Demo image: Product Card

Author

  • Scott Windon

Made with

  • HTML / CSS

About a code

Product Card

Just a simple product card.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: materialdesignicons.css

Tailwind version: 2.0.2

Demo image: Facebook Post

Author

  • manishrc

Made with

  • HTML / CSS

About a code

Facebook Post

Facebook post in the new UI with dark mode.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 2.0.1

Demo image: TailwindCSS Cards

Author

  • Sanjay Sanjel

Made with

  • HTML / CSS

About a code

TailwindCSS Cards

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.8.9

Demo image: Vertical Stacked Cards: Tailwind

Author

  • Luke Bennett

Made with

  • HTML / CSS

About a code

Vertical Stacked Cards: Tailwind

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.7.3

Demo image: Simple Welcome Card with AlpineJS Action

Author

  • Scott Windon

Made with

  • HTML / CSS / JS

About a code

Simple Welcome Card with AlpineJS Action

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: alpine.js

Tailwind version: 1.4.6

Demo image: Post/Article Card

Author

  • JermineJunior

Made with

  • HTML / CSS

About a code

Post/Article Card

Simple article or a post card with an image.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.4.6

Demo image: Overlapping Product Card

Author

  • harsh07bharvada

Made with

  • HTML / CSS

About a code

Overlapping Product Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.4.6

Demo image: Tailwind CSS Card with Add to Cart

Author

  • ravisankarchinnam

Made with

  • HTML / CSS

About a code

Tailwind CSS Card with Add to Cart

Shopping product item with add to cart and color variants.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.4.6

Demo image: Tailwind Card

Author

  • Tommy Pratama

Made with

  • HTML / CSS

About a code

Tailwind Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.4.6

Demo image: Post Excerpt - Tailwind CSS

Author

  • Cruip

Made with

  • HTML / CSS

About a code

Post Excerpt - Tailwind CSS

A post excerpt in card-style built with Tailwind CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.3.0

Demo image: Colored Card Tailwind CSS

Author

  • Cruip

Made with

  • HTML / CSS

About a code

Colored Card Tailwind CSS

A colored card with a text and link made with Tailwind CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.3.0

Demo image: User Card

Author

  • khatabwedaa

Made with

  • HTML / CSS

About a code

User Card

Simple user card with details.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.2.0

Demo image: User Account Menu with Icons

Author

  • erMandeepSidhu

Made with

  • HTML / CSS

About a code

User Account Menu with Icons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.2.0

Demo image: Product Card with Evaluation

Author

  • khatabwedaa

Made with

  • HTML / CSS

About a code

Product Card with Evaluation

A product card with evaluation for Tailwind CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.2.0

Demo image: Product Card

Author

  • khatabwedaa

Made with

  • HTML / CSS

About a code

Product Card

A product card for Tailwind CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.2.0

Demo image: Post Article

Author

  • khatabwedaa

Made with

  • HTML / CSS

About a code

Post Article

A post article for Tailwind CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.2.0

Demo image: Travel Cards

Author

  • Mark Praschan

Made with

  • HTML / CSS

About a code

Travel Cards

Extending Steve Schoger's Tailwind CSS card for a demo travel app.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css, weather-icons.css

Tailwind version: 1.1.4

Demo image: Commerce App Card

Author

  • r3oath

Made with

  • HTML / CSS

About a code

Commerce App Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.0.4

Demo image: Property Card

Author

  • sambit-mhptr

Made with

  • HTML / CSS

About a code

Property Card

Nice property card with all details.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Tailwind version: 1.0.4

Demo image: Tailwind Card Design

Author

  • matt-tonks

Made with

  • HTML / CSS

About a code

Tailwind Card Design

A card design using Tailwind CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Tailwind version: 0.7.3