Tailwind CSS Card - React
Use our Card 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. 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 projects. We've also included some Card props that are available.
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,
Typography,
} from "@material-tailwind/react";
export default function Example() {
return (
<Card className="w-96">
<CardHeader color="blue" className="relative h-56">
<img
src="/img/blog.jpg"
alt="img-blur-shadow"
className="h-full w-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 "Naviglio" 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="gray" className="flex gap-1">
<i className="fas fa-map-marker-alt fa-sm mt-[3px]" />
Barcelona, Spain
</Typography>
</CardFooter>
</Card>
);
}Tailwind CSS Profile Card - React
import {
Card,
CardHeader,
CardBody,
CardFooter,
Typography,
Tooltip,
} from "@material-tailwind/react";
export default function Example() {
return (
<Card className="w-96">
<CardHeader floated={false} className="h-80">
<img src="/img/team-3.jpg" alt="profile-picture" />
</CardHeader>
<CardBody className="text-center">
<Typography variant="h4" color="blue-gray" className="mb-2">
Natalie Paisley
</Typography>
<Typography color="blue" className="font-medium" textGradient>
CEO / Co-Founder
</Typography>
</CardBody>
<CardFooter className="flex justify-center gap-7 pt-2">
<Tooltip content="Like">
<Typography
as="a"
href="#facebook"
variant="lead"
color="blue"
textGradient
>
<i className="fab fa-facebook" />
</Typography>
</Tooltip>
<Tooltip content="Follow">
<Typography
as="a"
href="#twitter"
variant="lead"
color="light-blue"
textGradient
>
<i className="fab fa-twitter" />
</Typography>
</Tooltip>
<Tooltip content="Follow">
<Typography
as="a"
href="#instagram"
variant="lead"
color="purple"
textGradient
>
<i className="fab fa-instagram" />
</Typography>
</Tooltip>
</CardFooter>
</Card>
);
}Tailwind CSS Login Card - React
import {
Card,
CardHeader,
CardBody,
CardFooter,
Typography,
} from "@material-tailwind/react";
export default function Example() {
return (
<Card className="w-96">
<CardHeader
variant="gradient"
color="blue"
className="mb-4 grid h-28 place-items-center"
>
<Typography variant="h3" color="white">
Sign In
</Typography>
</CardHeader>
<CardBody className="flex flex-col gap-4">
<Input label="Email" size="lg" />
<Input label="Password" size="lg" />
<div className="-ml-2.5">
<Checkbox label="Remember Me" />
</div>
</CardBody>
<CardFooter className="pt-0">
<Button variant="gradient" fullWidth>
Sign In
</Button>
<Typography variant="small" className="mt-6 flex justify-center">
Don't have an account?
<Typography
as="a"
href="#signup"
variant="small"
color="blue"
className="ml-1 font-bold"
>
Sign up
</Typography>
</Typography>
</CardFooter>
</Card>
);
}