Tailwind CSS React Card - Horizon UI

Use our Card to provide a flexible and extensible content container based on Tailwind CSS React with multiple variants and options.

By its definition, a Card is a sheet of material that serves as an entry point to more detailed information. Card usually include a photo, text, and a link about a single subject. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.

See below our beautiful Card example that you can use in your React and Tailwind CSS React projects. We've also included some Card props that are available.

Profile Card Example

Adela Parkson

Product Manager







NFT Card Example

ETH AI Brain

By Nick Wilson


Current Bid: ETH

Task List Card Example


Panel 1

Panel 2

Panel 3

Panel 4

Landing Page Design

Mobile App Design

Dashboard Builder

Landing Page Design

Dashboard Builder

Widget Card Example

Your Balance


New Tasks


Total Projects


Storage Card Example

Panel 1

Panel 2

Panel 3

Panel 4

Your storage

Supervise your drive space in the easiest way

25.6 GB

50 GB