Tailwind Card

This is a simple, responsive content card built entirely with Tailwind utility classes: an image, a heading, a short description, an author row with avatar, and a small icon. The whole card is wrapped in a link. The layout adapts to screen size, stacking the image on top on small screens and placing it beside the text on large ones, which makes it a solid starting point for blog previews, product tiles, or profile cards. I keep this as a baseline I can copy and restyle rather than rebuilding card markup from scratch each time.

import React from "react";
import Link from "next/link";

export default function CardBasic() {
  return (
    <div>
      <div className="bg-gray-200 h-screen">
        <div className="px-8">
          <Link href="https://carsonrodrigues.com/snippets/tailwind-card">
            <div className="mx-auto lg:w-3/5 lg:flex lg:flex-row lg:h-auto ">
              <img
                src="https://picsum.photos/id/237/200/300"
                alt="image-text"
                className="rounded-tr-md rounded-tl-md h-48 w-full lg:h-auto lg:w-2/5 lg:rounded-bl-md lg:rounded-tr-none"
              />
              <div className="bg-white p-8 rounded-bl-md rounded-br-md lg:rouned-bl-none lg:rounded-tr-md">
                <h2 className="text-gray-700 font-semibold">
                  Tailwind Ui Card
                </h2>
                <p className="text-sm text-gray-600 mt-4">
                  Tailwind UI card is built with Tailwindcss, this minimal card
                  can be used for several purposes including business cards,
                  pricing and in general.
                </p>
                <div className="flex items-center mt-8">
                  <div className="flex items-center">
                    <img
                      className="h-10 w-10 rounded-full"
                      src="https://carsonrodrigues.com/avatar.png"
                      alt="avatar"
                    />
                    <div className="ml-4">
                      <p className="text-gray-800 text-sm font-semibold">
                        Carson Rodrigues
                      </p>
                      <p className="text-gray-400 text-sm">Next JS</p>
                    </div>
                  </div>

                  <div className="w-8 h-8 ml-auto bg-gray-200 rounded-full flex items-center justify-center">
                    <svg
                      width="16"
                      viewBox="0 -22 512 511"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path d="m512 233.820312-212.777344-233.320312v139.203125h-45.238281c-140.273437 0-253.984375 113.710937-253.984375 253.984375v73.769531l20.09375-22.019531c68.316406-74.851562 164.980469-117.5 266.324219-117.5h12.804687v139.203125zm0 0" />
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </Link>
        </div>
      </div>
    </div>
  );
}

How it works

The responsiveness lives in Tailwind's lg: breakpoint prefixes. By default the inner wrapper is a normal block where the image sits full width above the text. At the large breakpoint, lg:flex lg:flex-row turns it into a horizontal row, lg:w-2/5 sizes the image to two-fifths of the row, and lg:w-3/5 centers the card and constrains its width. The rounded corners also swap with the layout: on mobile the image is rounded on top (rounded-tr-md rounded-tl-md) and the content block is rounded on the bottom, while the lg: overrides move the rounding to the left/right edges so the corners stay clean when the pieces sit side by side.

The content block is a white panel (bg-white p-8) holding a semibold heading, a muted description (text-sm text-gray-600), and an author row. That row uses flex items-center with a circular avatar (rounded-full), the name and label stacked beside it, and ml-auto to push the small circular icon button to the far right. The entire card is wrapped in a Next.js Link, so the whole thing is clickable. Colors and spacing are all standard Tailwind tokens (bg-gray-200, text-gray-700, mt-4, mt-8), which makes the card easy to retheme by swapping those utilities.

Notes & variations

This needs Tailwind configured in your project and Next.js's Link (swap it for an <a> or your router's link if you're not on Next). The h-screen gray background on the outer wrapper is just demo framing to center the card on a full-height page, drop it when you drop the card into a real layout. The images here use placeholder URLs (picsum.photos, an avatar), so replace those src values with your own.

A few refinements worth making for production. The card wraps a large amount of content in a single Link; that works, but keep the link's accessible name meaningful (the heading text helps here). The decorative arrow svg has no label, which is fine because it's inside the same link, but if you make it a separate action, give it an aria-label. Use real, descriptive alt text on the images rather than the placeholder "image-text", and note the small typo lg:rouned-bl-none in the content block's class list, which is a no-op class you can safely correct to lg:rounded-bl-none.

Live Demo