taste-skill / Components / Tailwind CSS Cards

Tailwind CSS Card Component Styles

3 Tailwind CSS card containers extracted from tailwindcss.com: backgrounds, 8px/16px 16px 0px 0px/12px radii, borders and shadows, rendered live with CSS and Tailwind code.

Source: computed styles extracted from https://tailwindcss.com on 2026-10-26 by the taste-skill extractor. Brand fonts may be proprietary; previews fall back to Inter / system fonts. Tailwind CSS is a trademark of its owner; this page documents publicly visible styling for reference and is not affiliated with Tailwind CSS.

Rendered on the Tailwind CSS canvas

Card 1

radius 8px · padding 12px 12px

Card 2

radius 16px 16px 0px 0px · padding 24px 24px

Card 3

radius 12px · padding 0px 0px

Card specs

#	Background	Border	Radius	Padding	Shadow
1	`rgba(255, 255, 255, 0.1)`	`none`	`8px`	`12px 12px`	`rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.1) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
2	`#FFFFFF`	`none`	`16px 16px 0px 0px`	`24px 24px`	`rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.129999 -0.00404751 -0.027702 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
3	`#FFFFFF`	`none`	`12px`	`0px 0px`	`rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.129999 -0.00404751 -0.027702 / 0.05) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px`

Copy-paste code

Card 1

.card-tailwindcss-1 {
  background:rgba(255, 255, 255, 0.1);
  border:1px solid rgba(0, 0, 20, 0.05);
  border-radius:8px;
  padding:12px 12px;
  box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.999994 0.0000455678 0.0000200868 / 0.1) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

Card 2

.card-tailwindcss-2 {
  background:#FFFFFF;
  border:1px solid rgba(0, 0, 20, 0.05);
  border-radius:16px 16px 0px 0px;
  padding:24px 24px;
  box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.129999 -0.00404751 -0.027702 / 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

Card 3

.card-tailwindcss-3 {
  background:#FFFFFF;
  border:1px solid rgba(0, 0, 20, 0.05);
  border-radius:12px;
  padding:20px;
  box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, oklab(0.129999 -0.00404751 -0.027702 / 0.05) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
}

More Tailwind CSS

Tailwind CSS full token spec Tailwind CSS style guide Tailwind CSS Buttons Tailwind CSS Pricing Table Tailwind CSS vs shadcn/ui

Same component, other brands

Linear Cards Stripe Cards Resend Cards Vercel Cards Supabase Cards Raycast Cards Cursor Cards Clerk Cards Mintlify Cards Cal.com Cards Dub Cards Turso Cards

Get all 30 full SKILL.md specs (Cursor / Claude Code / Codex ready) plus the Pro growth skills.

See taste-skill Pro →