Tailwind CSS Card - React

Use our cards to provide a flexible and extensible content container based on Tailwind CSS 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. Cards 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 projects. We've also included some card props that are available.


img-blur-shadow
Cozy 5 Stars Apartment

The place is close to Barceloneta Beach and bus stop just 2 min by walk and near to "Naviglio" where you can enjoy the main night life in Barcelona.

$899/night

Barcelona, Spain

import {
  Card,
  CardHeader,
  CardBody,
  CardFooter
} from "@material-tailwind/react";
 
export default function Example() {
  return (
    <Card className="w-96 mt-6">
      <CardHeader color="blue" className="relative h-56">
        <img
          src="/img/blog.jpg"
          alt="img-blur-shadow"
          className="w-full h-full"
        />
      </CardHeader>
      <CardBody className="text-center">
        <Typography variant="h5" className="mb-2">
          Cozy 5 Stars Apartment
        </Typography>
        <Typography>
          The place is close to Barceloneta Beach and bus stop just 2 min by
          walk and near to &quot;Naviglio&quot; where you can enjoy the main
          night life in Barcelona.
        </Typography>
      </CardBody>
      <CardFooter divider className="flex items-center justify-between py-3">
        <Typography variant="small">$899/night</Typography>
        <Typography variant="small" color="grey" className="flex gap-1">
          <i className="fas fa-map-marker-alt fa-sm mt-[3px]" />
          Barcelona, Spain
        </Typography>
      </CardFooter>
    </Card>
  );
}

Card Props

The following props are available for the card component. These are the custom props that come with we've added for the card component and you can use all the other native props as well.

AttributeTypeDescriptionDefault
variantVariantChange card variantfilled
colorColorChange card colorwhite
shadowbooleanAdd box-shadow for cardtrue
classNamestringAdd custom className for card''
childrennodeAdd content for cardNo default value its a required prop.

Card Header Props

The following props are available for the card header component. These are the custom props that come with we've added for the card header component and you can use all the other native props as well.

AttributeTypeDescriptionDefault
variantVariantChange card header variantfilled
colorColorChange card header colorwhite
shadowbooleanAdd box-shadow for card headertrue
floatedbooleanMakes card header floatedtrue
classNamestringAdd custom className for card header''
childrennodeAdd content for card headerNo default value its a required prop.

Card Body Props

The following props are available for the card body component. These are the custom props that come with we've added for the card body component and you can use all the other native props as well.

AttributeTypeDescriptionDefault
classNamestringAdd custom className for card body''
childrennodeAdd content for card bodyNo default value its a required prop.

Card Footer Props

The following props are available for the card footer component. These are the custom props that come with we've added for the card footer component and you can use all the other native props as well.

AttributeTypeDescriptionDefault
dividerbooleanAdd border-top for card footerfalse
classNamestringAdd custom className for card footer''
childrennodeAdd content for card footerNo default value its a required prop.

Types

type variant = "filled" | "gradient";
type color =
  | "transparent"
  | "white"
  | "blue-grey"
  | "grey"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";