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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
Made with
- HTML / CSS
About a code
Card Pot
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.2.4

Links
Made with
- HTML / CSS
About a code
Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.2.4

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
Made with
- HTML / CSS
About a code
Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.0.3

Links
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

Links
Made with
- HTML / CSS
About a code
Contact Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 2.0.2

Links
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

Links
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

Links
Made with
- HTML / CSS
About a code
TailwindCSS Cards
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 1.8.9

Links
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

Links
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

Links
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

Links
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

Links
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

Links
Made with
- HTML / CSS
About a code
Tailwind Card
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Tailwind version: 1.4.6

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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

Links
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