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

17

Posts

9.7K

Followers

434

Following

import Card from "components/card";
 
function Example() {
  return (
    <Card extra={"items-center flex-col w-full h-full p-[16px] bg-cover"}>
      {/* Background and profile */}
      <div
        className="relative mt-1 flex h-32 w-full justify-center rounded-xl bg-cover"
        style={{ backgroundImage: `url(/img/banner.png)` }}
      >
        <div className="dark:!border-navy-700 absolute -bottom-12 flex h-[87px] w-[87px] items-center justify-center rounded-full border-[4px] border-white bg-pink-400">
          <img
            className="h-full w-full rounded-full"
            src="https://horizon-tailwind-react-git-tailwind-components-horizon-ui.vercel.app/static/media/avatar11.1060b63041fdffa5f8ef.png"
            alt=""
          />
        </div>
      </div>
 
      {/* Name and position */}
      <div className="mt-16 flex flex-col items-center">
        <h4 className="text-navy-700 text-xl font-bold dark:text-white">
          Adela Parkson
        </h4>
        <h5 className="text-base font-normal text-gray-600">Product Manager</h5>
      </div>
 
      {/* Post followers */}
      <div className="mt-6 mb-3 flex gap-4 md:!gap-14">
        <div className="flex flex-col items-center justify-center">
          <h4 className="text-navy-700 text-2xl font-bold dark:text-white">
            17
          </h4>
          <p className="text-sm font-normal text-gray-600">Posts</p>
        </div>
        <div className="flex flex-col items-center justify-center">
          <h4 className="text-navy-700 text-2xl font-bold dark:text-white">
            9.7K
          </h4>
          <p className="text-sm font-normal text-gray-600">Followers</p>
        </div>
        <div className="flex flex-col items-center justify-center">
          <h4 className="text-navy-700 text-2xl font-bold dark:text-white">
            434
          </h4>
          <p className="text-sm font-normal text-gray-600">Following</p>
        </div>
      </div>
    </Card>
  );
}

NFT Card Example

ETH AI Brain

By Nick Wilson

Current Bid: ETH

import { NFTCard } from "components/card/NftCard";
 
function Example() {
  return (
    <NFTCard
      title="ETH AI Brain"
      author="Nick Wilson"
      bidders={["/img/avatar2.png", "/img/avatar3.png", "/img/avatar4.png"]}
      image="/img/Nft1.png"
      currentBid="0.91 ETH"
      download="#"
      extra="max-w-[370px]"
    />;
  );
}

Task List Card Example

Widget Card Example

Your Balance

$1,000

New Tasks

145

Total Projects

$2433

import { Widget } from "components/widget";
 
function Example() {
  return (
    <div className="flex flex-col">
        <Widget
          icon={<MdDashboard className="h-6 w-6" />}
          title={"Your Balance"}
          subtitle={"$1,000"}
        />
        <Widget
          icon={<MdBarChart className="h-7 w-7" />}
          title={"New Tasks"}
          subtitle={"145"}
        />
        <Widget
          icon={<IoMdHome className="h-6 w-6" />}
          title={"Total Projects"}
          subtitle={"$2433"}
        />
      </div>
  );
}

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

badge

checkbox