Component

Card

Free, copy-pasteable Tailwind CSS Card component. Accessible, fully responsive, dark-mode ready, and customizable.

On this page

Job Card Product Card Profile Card Property Card Article Card Forum Card Podcast Card Metric Card (Stat Widget)Event Card

AI NewsletterRead →

How Machines Think

Sponsor Business Wish (500+ Devs)Claim this spot →

Install via CLI

Run this command to automatically add the component and its dependencies to your project.

npx @abhaysinghr516/business-wish add card

New to the CLI? Run npx @abhaysinghr516/business-wish init first to initialize your project.

A Tailwind card offers a flexible surface to display structured information like products, articles, user profiles, or live metrics. As one of the most essential Tailwind CSS components, these cards feature sleek flat surfaces, zero shadows, structural hairline borders, and delicate interaction states inspired by modern Apple design.

While loading card data, provide a smooth user experience using our Skeleton components, or visually segment card content using a Divider.

Job Card

Preview

import React from "react";
import { Building2, MapPin, DollarSign, ArrowUpRight } from "lucide-react";

export const JobCard: React.FC = () => (
  <div className="bg-white dark:bg-neutral-950 px-4 py-10 flex justify-center items-center">
    <div className="w-full max-w-[380px] rounded-3xl bg-neutral-50 dark:bg-neutral-900/40 p-6 sm:p-7 border border-neutral-200/80 dark:border-neutral-800/80 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all duration-300">
      <div className="flex items-center justify-between mb-5">
        <div className="flex items-center gap-3">
          <div className="flex h-10 w-10 shrink-0 bg-white dark:bg-neutral-800 rounded-2xl items-center justify-center text-neutral-900 dark:text-white border border-neutral-200/60 dark:border-neutral-700/60">
            <Building2 className="w-5 h-5" />
          </div>
          <div>
            <div className="flex items-center gap-1.5">
              <span className="text-xs font-mono uppercase tracking-wider text-neutral-900 dark:text-white font-medium">TechCorp</span>
            </div>
            <p className="text-[11px] text-neutral-400 font-mono">VERIFIED EMPLOYER</p>
          </div>
        </div>
        <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full bg-neutral-200/70 dark:bg-neutral-800 text-[10px] font-mono tracking-wider uppercase text-neutral-700 dark:text-neutral-300 border border-neutral-300/40 dark:border-neutral-700/40">
          Full-time
        </span>
      </div>

      <div className="mb-5">
        <h3 className="text-lg font-medium text-neutral-900 dark:text-white tracking-tight leading-snug">
          Lead Design Systems Architect
        </h3>
        <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1 font-normal">
          Building next-generation design systems & web frameworks.
        </p>
      </div>

      <div className="space-y-2.5 mb-6 pt-4 border-t border-neutral-200/80 dark:border-neutral-800/80">
        <div className="flex items-center text-xs text-neutral-600 dark:text-neutral-400 font-mono">
          <MapPin className="w-3.5 h-3.5 mr-2 text-neutral-400 dark:text-neutral-500 shrink-0" />
          San Francisco, CA (Hybrid)
        </div>
        <div className="flex items-center text-xs text-neutral-600 dark:text-neutral-400 font-mono">
          <DollarSign className="w-3.5 h-3.5 mr-2 text-neutral-400 dark:text-neutral-500 shrink-0" />
          $160,000 - $210,000 / yr
        </div>
      </div>

      <button className="w-full py-3 px-4 rounded-full bg-neutral-900 text-white dark:bg-white dark:text-neutral-950 text-xs font-medium hover:bg-neutral-800 dark:hover:bg-neutral-100 transition-colors flex items-center justify-center gap-1.5">
        <span>Apply Now</span>
        <ArrowUpRight className="w-3.5 h-3.5" />
      </button>
    </div>
  </div>
);

Product Card

Preview

import React from "react";
import { Heart, ShoppingCart, Star } from "lucide-react";

export const ProductCard: React.FC = () => (
  <div className="bg-white dark:bg-neutral-950 px-4 py-10 flex justify-center items-center">
    <div className="group w-full max-w-[320px] rounded-3xl bg-neutral-50 dark:bg-neutral-900/40 border border-neutral-200/80 dark:border-neutral-800/80 overflow-hidden hover:border-neutral-300 dark:hover:border-neutral-700 transition-all duration-300">
      <div className="aspect-square relative overflow-hidden bg-neutral-200/60 dark:bg-neutral-800">
        <img
          src="/headphone.jpg"
          alt="Wireless Headphones"
          className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
        />
        <div className="absolute top-3.5 left-3.5">
          <span className="inline-flex items-center rounded-full bg-neutral-900 text-white dark:bg-white dark:text-neutral-950 px-2.5 py-0.5 text-[10px] font-mono tracking-wider uppercase border border-neutral-800 dark:border-neutral-200">
            NEW COLLECTION
          </span>
        </div>
        <button className="absolute top-3.5 right-3.5 flex h-8 w-8 text-neutral-700 dark:text-neutral-300 items-center justify-center rounded-full bg-white/90 dark:bg-neutral-900/90 border border-neutral-200 dark:border-neutral-800 transition-all hover:scale-105">
          <Heart className="h-3.5 w-3.5" />
        </button>
      </div>

      <div className="p-5">
        <div className="flex items-center justify-between mb-1.5">
          <p className="text-[11px] font-mono uppercase tracking-wider text-neutral-400 dark:text-neutral-500">Audio Hardware</p>
          <div className="flex items-center gap-1">
            <Star className="h-3 w-3 fill-current text-neutral-900 dark:text-white" />
            <span className="text-xs font-mono font-medium text-neutral-900 dark:text-white">4.9</span>
          </div>
        </div>

        <h3 className="text-base font-medium text-neutral-900 dark:text-white tracking-tight mb-4">
          Minimal Studio Display 27"
        </h3>

        <div className="flex items-center justify-between pt-3.5 border-t border-neutral-200/80 dark:border-neutral-800/80">
          <p className="text-lg font-semibold tracking-tight text-neutral-900 dark:text-white font-mono">
            $1,299.00
          </p>
          <button className="flex h-9 w-9 items-center justify-center rounded-full bg-neutral-900 text-white transition-colors hover:bg-neutral-800 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-100">
            <ShoppingCart className="h-3.5 w-3.5" />
          </button>
        </div>
      </div>
    </div>
  </div>
);

Preview

import React from "react";

export const ProfileCard: React.FC = () => (
  <div className="bg-white dark:bg-neutral-950 px-4 py-10 flex justify-center items-center">
    <div className="w-full max-w-[340px] rounded-3xl bg-neutral-50 dark:bg-neutral-900/40 p-7 text-center border border-neutral-200/80 dark:border-neutral-800/80 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all duration-300">
      <div className="relative mx-auto mb-5 h-20 w-20">
        <img
          src="/pfp.jpg"
          alt="Profile"
          className="h-full w-full rounded-full object-cover border border-neutral-200 dark:border-neutral-800"
        />
        <div className="absolute bottom-0.5 right-0.5 h-3 w-3 rounded-full border-2 border-white dark:border-neutral-950 bg-emerald-500"></div>
      </div>

      <h3 className="text-xl font-medium text-neutral-900 dark:text-white tracking-tight mb-0.5">
        Alex Mitchell
      </h3>
      <p className="text-xs font-mono text-neutral-400 dark:text-neutral-500 mb-4">@alex.design</p>
      
      <p className="text-xs text-neutral-600 dark:text-neutral-400 mb-5 font-normal leading-relaxed">
        Building minimalist component libraries & interface engines. Ex-Apple.
      </p>

      <div className="grid grid-cols-2 gap-2 p-3 rounded-2xl bg-neutral-200/50 dark:bg-neutral-800/50 border border-neutral-200/60 dark:border-neutral-700/60 mb-5 text-center">
        <div>
          <span className="block text-sm font-semibold font-mono text-neutral-900 dark:text-white">14.2k</span>
          <span className="text-[10px] font-mono text-neutral-400 uppercase">Followers</span>
        </div>
        <div>
          <span className="block text-sm font-semibold font-mono text-neutral-900 dark:text-white">380</span>
          <span className="text-[10px] font-mono text-neutral-400 uppercase">Projects</span>
        </div>
      </div>

      <div className="flex gap-2.5">
        <button className="flex-1 rounded-full bg-neutral-900 py-2.5 text-xs font-medium text-white transition-colors hover:bg-neutral-800 dark:bg-white dark:text-neutral-950 dark:hover:bg-neutral-100">
          Follow
        </button>
        <button className="flex-1 rounded-full border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 py-2.5 text-xs font-medium text-neutral-900 dark:text-white transition-colors hover:bg-neutral-100 dark:hover:bg-neutral-800">
          Message
        </button>
      </div>
    </div>
  </div>
);

Property Card

Preview

import React from "react";
import { Bed, Bath, Car, Maximize2, Heart } from "lucide-react";

export const PropertyCard: React.FC = () => (
  <div className="bg-white dark:bg-neutral-950 px-4 py-10 flex justify-center items-center">
    <div className="group w-full max-w-[380px] rounded-3xl bg-neutral-50 dark:bg-neutral-900/40 border border-neutral-200/80 dark:border-neutral-800/80 overflow-hidden hover:border-neutral-300 dark:hover:border-neutral-700 transition-all duration-300">
      <div className="relative h-52 overflow-hidden bg-neutral-200/60 dark:bg-neutral-800">
        <img
          src="/property.jpg"
          alt="Modern Architecture"
          className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
        />
        <div className="absolute top-3.5 left-3.5">
          <span className="inline-flex items-center rounded-full bg-neutral-900 text-white dark:bg-white dark:text-neutral-950 px-2.5 py-0.5 text-[10px] font-mono tracking-wider uppercase border border-neutral-800 dark:border-neutral-200">
            FOR SALE
          </span>
        </div>
        <button className="absolute top-3.5 right-3.5 flex h-8 w-8 text-neutral-700 dark:text-neutral-300 items-center justify-center rounded-full bg-white/90 dark:bg-neutral-900/90 border border-neutral-200 dark:border-neutral-800 transition-all hover:scale-105">
          <Heart className="h-3.5 w-3.5" />
        </button>
      </div>

      <div className="p-5">
        <div className="flex items-baseline justify-between mb-1">
          <h3 className="text-2xl font-semibold tracking-tight text-neutral-900 dark:text-white font-mono">$1,450,000</h3>
          <span className="text-[10px] font-mono text-neutral-400 uppercase">Modern Villa</span>
        </div>

        <p className="mb-5 text-xs text-neutral-500 dark:text-neutral-400 font-normal">
          740 Grand View Way, Beverly Hills, CA
        </p>

        <div className="grid grid-cols-4 gap-1.5 border-t border-neutral-200/80 dark:border-neutral-800/80 pt-4">
          <div className="flex flex-col items-center justify-center gap-1 border-r border-neutral-200/80 dark:border-neutral-800/80 pr-1.5">
            <Bed className="h-3.5 w-3.5 text-neutral-400" />
            <span className="text-[11px] font-mono text-neutral-700 dark:text-neutral-300">5 Beds</span>
          </div>
          <div className="flex flex-col items-center justify-center gap-1 border-r border-neutral-200/80 dark:border-neutral-800/80 pr-1.5">
            <Bath className="h-3.5 w-3.5 text-neutral-400" />
            <span className="text-[11px] font-mono text-neutral-700 dark:text-neutral-300">4 Baths</span>
          </div>
          <div className="flex flex-col items-center justify-center gap-1 border-r border-neutral-200/80 dark:border-neutral-800/80 pr-1.5">
            <Car className="h-3.5 w-3.5 text-neutral-400" />
            <span className="text-[11px] font-mono text-neutral-700 dark:text-neutral-300">3 Cars</span>
          </div>
          <div className="flex flex-col items-center justify-center gap-1">
            <Maximize2 className="h-3.5 w-3.5 text-neutral-400" />
            <span className="text-[11px] font-mono text-neutral-700 dark:text-neutral-300">4,500 sqft</span>
          </div>
        </div>
      </div>
    </div>
  </div>
);

Article Card

Preview

import React from "react";

export const ArticleCard: React.FC = () => (
  <div className="bg-white dark:bg-neutral-950 px-4 py-10 flex justify-center items-center">
    <div className="group w-full max-w-[380px] sm:max-w-xl flex flex-col sm:flex-row rounded-3xl bg-neutral-50 dark:bg-neutral-900/40 border border-neutral-200/80 dark:border-neutral-800/80 overflow-hidden hover:border-neutral-300 dark:hover:border-neutral-700 transition-all duration-300">
      <div className="relative h-44 sm:h-auto sm:w-2/5 overflow-hidden bg-neutral-200/60 dark:bg-neutral-800 shrink-0">
        <img
          src="/thumbnail.jpg"
          alt="Article cover"
          className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105"
        />
      </div>

      <div className="p-5 sm:w-3/5 flex flex-col justify-between">
        <div>
          <div className="mb-2 flex items-center justify-between text-[11px] font-mono text-neutral-400 dark:text-neutral-500">
            <span>MAY 14, 2026</span>
            <span className="uppercase tracking-wider">ENGINEERING</span>
          </div>
          <h3 className="mb-2 text-base font-medium text-neutral-900 dark:text-white tracking-tight leading-snug">
            Architecting Zero-Overhead Component Systems
          </h3>
          <p className="mb-4 text-xs text-neutral-500 dark:text-neutral-400 line-clamp-2 leading-relaxed font-normal">
            A deep dive into flat design principles, high performance micro-interactions, and scaling design tokens.
          </p>
        </div>

        <div className="flex items-center justify-between pt-3 border-t border-neutral-200/80 dark:border-neutral-800/80">
          <div className="flex items-center gap-2">
            <img src="/pfp.jpg" alt="Author" className="w-5 h-5 rounded-full object-cover border border-neutral-200 dark:border-neutral-800" />
            <span className="text-[11px] font-medium text-neutral-700 dark:text-neutral-300">Sarah Jenkins</span>
          </div>
          <button className="text-[11px] font-mono uppercase tracking-wider text-neutral-900 dark:text-white hover:underline underline-offset-4">
            Read article
          </button>
        </div>
      </div>
    </div>
  </div>
);

Forum Card

Preview

import React from "react";
import { MessageCircle, Heart, Share2, Eye } from "lucide-react";

export const ForumCard: React.FC = () => (
  <div className="bg-white dark:bg-neutral-950 px-4 py-10 flex justify-center items-center">
    <div className="w-full max-w-[460px] rounded-3xl bg-neutral-50 dark:bg-neutral-900/40 p-6 border border-neutral-200/80 dark:border-neutral-800/80 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all duration-300 cursor-pointer group">
      <div className="flex gap-3.5">
        <div className="shrink-0">
          <img src="/pfp.jpg" alt="User" className="w-9 h-9 rounded-full object-cover border border-neutral-200 dark:border-neutral-800" />
        </div>
        <div className="flex-1 min-w-0">
          <div className="flex items-center gap-2 mb-1">
            <h4 className="text-xs font-medium text-neutral-900 dark:text-white truncate">Marcus Chen</h4>
            <span className="text-[11px] font-mono text-neutral-400 dark:text-neutral-500">@marcusc • 4h ago</span>
          </div>

          <h3 className="text-sm font-medium text-neutral-900 dark:text-white tracking-tight leading-snug mb-2">
            What's your go-to stack for building quick SaaS MVPs in 2026?
          </h3>

          <p className="text-xs text-neutral-500 dark:text-neutral-400 leading-relaxed line-clamp-2 mb-4 font-normal">
            I'm starting a new side project and want to move as fast as possible. Curious what tools, frameworks, and databases everyone is preferring right now for speed and DX...
          </p>

          <div className="flex items-center gap-5 text-neutral-400 dark:text-neutral-500 pt-3 border-t border-neutral-200/80 dark:border-neutral-800/80">
            <div className="flex items-center gap-1 transition-colors group-hover:text-neutral-900 dark:group-hover:text-white">
              <MessageCircle className="w-3.5 h-3.5" />
              <span className="text-[11px] font-mono font-medium">32</span>
            </div>
            <div className="flex items-center gap-1 transition-colors group-hover:text-neutral-900 dark:group-hover:text-white">
              <Heart className="w-3.5 h-3.5" />
              <span className="text-[11px] font-mono font-medium">148</span>
            </div>
            <div className="flex items-center gap-1 transition-colors group-hover:text-neutral-900 dark:group-hover:text-white">
              <Share2 className="w-3.5 h-3.5" />
              <span className="text-[11px] font-mono font-medium">12</span>
            </div>
            <div className="ml-auto flex items-center gap-1">
              <Eye className="w-3.5 h-3.5" />
              <span className="text-[11px] font-mono font-medium">2.4k</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
);

Podcast Card

Preview

import React from "react";
import { Share2, Rewind, Play, FastForward } from "lucide-react";

export const PodcastCard: React.FC = () => (
  <div className="bg-white dark:bg-neutral-950 px-4 py-10 flex justify-center items-center">
    <div className="w-full max-w-[360px] rounded-3xl bg-neutral-900 text-white dark:bg-white dark:text-neutral-950 p-6 border border-neutral-800 dark:border-neutral-200">
      <div className="flex items-center justify-between mb-5">
        <span className="inline-flex items-center rounded-full border border-neutral-700 dark:border-neutral-300 bg-neutral-800 dark:bg-neutral-100 px-2.5 py-0.5 text-[10px] font-mono tracking-wider text-neutral-200 dark:text-neutral-800 uppercase">
          Latest Episode
        </span>
        <button className="p-1.5 rounded-full text-neutral-400 hover:text-white dark:hover:text-neutral-950 transition-colors">
          <Share2 className="w-3.5 h-3.5" />
        </button>
      </div>

      <div className="flex gap-4 items-center mb-5">
        <div className="relative h-16 w-16 shrink-0 overflow-hidden rounded-2xl border border-neutral-800 dark:border-neutral-200 bg-neutral-800 dark:bg-neutral-100">
          <img src="/podcast.jpg" alt="Podcast" className="h-full w-full object-cover" />
        </div>
        <div className="flex flex-col">
          <h3 className="text-base font-medium tracking-tight mb-0.5 leading-tight">
            Design Systems & Tokens
          </h3>
          <p className="text-[10px] text-neutral-400 dark:text-neutral-600 font-mono uppercase">The Creative Process</p>
        </div>
      </div>

      <div className="mb-5">
        <div className="h-1.5 w-full bg-neutral-800 dark:bg-neutral-200 rounded-full overflow-hidden">
          <div className="h-full bg-white dark:bg-neutral-950 w-1/3 rounded-full relative">
            <div className="absolute right-0 top-1/2 -translate-y-1/2 w-2.5 h-2.5 bg-white dark:bg-neutral-950 rounded-full cursor-pointer"></div>
          </div>
        </div>
        <div className="flex justify-between mt-2 text-[10px] font-mono text-neutral-400 dark:text-neutral-500">
          <span>15:23</span>
          <span>-32:45</span>
        </div>
      </div>

      <div className="flex items-center justify-center gap-5">
        <button className="text-neutral-400 hover:text-white dark:hover:text-neutral-950 transition-colors p-1.5">
          <Rewind className="w-4 h-4 fill-current" />
        </button>
        <button className="flex h-11 w-11 border border-neutral-700 dark:border-neutral-300 bg-neutral-800 dark:bg-neutral-100 items-center justify-center rounded-full transition-all hover:scale-105">
          <Play className="w-4 h-4 fill-current ml-0.5" />
        </button>
        <button className="text-neutral-400 hover:text-white dark:hover:text-neutral-950 transition-colors p-1.5">
          <FastForward className="w-4 h-4 fill-current" />
        </button>
      </div>
    </div>
  </div>
);

Preview

import React from "react";
import { TrendingUp } from "lucide-react";

export const MetricCard: React.FC = () => (
  <div className="bg-white dark:bg-neutral-950 px-4 py-10 flex justify-center items-center">
    <div className="w-full max-w-[340px] rounded-3xl bg-neutral-50 dark:bg-neutral-900/40 p-6 border border-neutral-200/80 dark:border-neutral-800/80 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all duration-300">
      <div className="flex items-center justify-between mb-4">
        <span className="text-[10px] font-mono uppercase tracking-widest text-neutral-400 dark:text-neutral-500">
          Monthly Recurring Revenue
        </span>
        <span className="flex items-center gap-1 text-[10px] font-mono font-medium text-emerald-600 dark:text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded-full border border-emerald-500/20">
          <TrendingUp className="w-3 h-3" />
          +18.4%
        </span>
      </div>

      <div className="mb-6">
        <h3 className="text-3xl font-semibold tracking-tight text-neutral-900 dark:text-white font-mono">
          $128,450.00
        </h3>
        <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-1">Compared to $108,500 last month</p>
      </div>

      <div className="flex items-end gap-1.5 h-12 pt-2 border-t border-neutral-200/80 dark:border-neutral-800/80">
        {[40, 55, 35, 60, 75, 50, 85, 95, 80, 100].map((h, i) => (
          <div
            key={i}
            className="flex-1 bg-neutral-900 dark:bg-white rounded-sm transition-all"
            style={{ height: `${h}%`, opacity: i === 9 ? 1 : 0.2 + (i * 0.08) }}
          />
        ))}
      </div>
    </div>
  </div>
);

Event Card

Preview

import React from "react";
import { MapPin } from "lucide-react";

export const EventCard: React.FC = () => (
  <div className="bg-white dark:bg-neutral-950 px-4 py-10 flex justify-center items-center">
    <div className="w-full max-w-[360px] rounded-3xl bg-neutral-50 dark:bg-neutral-900/40 p-6 border border-neutral-200/80 dark:border-neutral-800/80 hover:border-neutral-300 dark:hover:border-neutral-700 transition-all duration-300">
      <div className="flex items-start justify-between mb-5">
        <div className="flex flex-col items-center justify-center w-12 h-14 rounded-2xl bg-neutral-900 text-white dark:bg-white dark:text-neutral-950">
          <span className="text-[10px] font-mono uppercase tracking-widest font-semibold">OCT</span>
          <span className="text-base font-bold leading-none font-mono">24</span>
        </div>
        <span className="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full bg-neutral-200/70 dark:bg-neutral-800 text-[10px] font-mono tracking-wider uppercase text-neutral-700 dark:text-neutral-300 border border-neutral-300/40 dark:border-neutral-700/40">
          Keynote
        </span>
      </div>

      <h3 className="text-lg font-medium text-neutral-900 dark:text-white tracking-tight mb-2 leading-snug">
        Apple Design Conference 2026
      </h3>
      <p className="text-xs text-neutral-500 dark:text-neutral-400 mb-5 font-normal">
        Exploring spatial interfaces, generative UI tokens, and fluid web architectures.
      </p>

      <div className="flex items-center justify-between pt-4 border-t border-neutral-200/80 dark:border-neutral-800/80">
        <div className="flex items-center gap-2 text-xs font-mono text-neutral-500 dark:text-neutral-400">
          <MapPin className="w-3.5 h-3.5 shrink-0" />
          <span>Cupertino, CA</span>
        </div>
        <button className="px-4 py-2 rounded-full bg-neutral-900 text-white dark:bg-white dark:text-neutral-950 text-xs font-medium hover:bg-neutral-800 dark:hover:bg-neutral-100 transition-colors">
          Reserve Ticket
        </button>
      </div>
    </div>
  </div>
);

Call to Action

Context Menu