Cards
Tailwind css cards provide a flexible and extensible content container with multiple variants and options.
Examples
Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Tailwind css components.
Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhereCard with image and content
Sketch from A to Z: for app designer
Proposal indulged no do sociable he throwing settling..
- 4.5/5.0
Card with hover trigger action
Free
Add to cartCard with hover overlay and element
Card with video button
Learn the French Language: Complete Course
Live Students
-
-
-
-
-
1k+
Card hover shadow
Larry Lawson
TutorCard with overlay content
Card with border
College of South Florida
4653 Linda Street Newark, PA
- Engineer
- BBA
- BCA
- BSC
- Library
- Canteen
- stationary
- Hostel
- Playground
- Gym
Card list
Card list minimal content
Card for instructor list
Dennis Barrett
Professor at Sigma College
Perceived end knowledge certainly day sweetness why cordially. Ask a quick six seven offer see among.
Card image scale