Card

Cards are versatile UI elements used to display content in a clean, organized layout. In this guide, you'll learn how to build a responsive and reusable card component using Tailwind CSS in a Next.js (React.js) project. Whether you're showcasing blog posts, user profiles, or product items, this tutorial has you covered.

Cards preview

Item 1

Cards are versatile UI elements used to display content in a clean, organized layout. In this guide

Item 2

Cards are versatile UI elements used to display content in a clean, organized layout. In this guide

Item 3

Cards are versatile UI elements used to display content in a clean, organized layout. In this guide

Item 4

Cards are versatile UI elements used to display content in a clean, organized layout. In this guide

1. Setup codes

The first thing, in my Card component uses common components CardHeading and Paragraph. So you need add two components first.

Create a new Card component components/ui/Card.tsx

jsx
import Image from "next/image";

import CardHeading from "./typography/CardHeading";
import Paragraph from "./typography/Paragraph";

const Card = ({
  title,
  description,
  image,
}: {
  title: string;
  description?: string;
  image?: { src: string; alt: string };
}) => {
  return (
    <div className="overflow-hidden rounded-lg bg-white shadow-sm">
      {image && (
        <Image src={image.src} alt={image.alt} width={750} height={422} className="object-cover" />
      )}
      <div className="px-4 py-5 sm:p-6">
        <CardHeading className="mb-2">{title}</CardHeading>
        <Paragraph>{description}</Paragraph>
      </div>
    </div>
  );
};

export default Card;

2. Usages

Now you can use the Card component in grid like that

jsx
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
  <Card
    title="Item 1"
    description="Cards are versatile UI elements used to display content in a clean, organized layout. In this guide"
  />
  <Card
    title="Item 2"
    description="Cards are versatile UI elements used to display content in a clean, organized layout. In this guide"
  />
  <Card
    title="Item 3"
    description="Cards are versatile UI elements used to display content in a clean, organized layout. In this guide"
    image={{ src: "/images/web-basic.png", alt: "web basic" }}
  />
  <Card
    title="Item 4"
    description="Cards are versatile UI elements used to display content in a clean, organized layout. In this guide"
    image={{ src: "/images/online-consulting.png", alt: "online consulting" }}
  />
</div>

The UI like that

Item 1

Cards are versatile UI elements used to display content in a clean, organized layout. In this guide

Item 2

Cards are versatile UI elements used to display content in a clean, organized layout. In this guide

Item 3

Cards are versatile UI elements used to display content in a clean, organized layout. In this guide

Item 4

Cards are versatile UI elements used to display content in a clean, organized layout. In this guide