cardblog-postbeginner

Blog Post Card

A blog post card with featured image, category tag, title, excerpt, and author info.

Preview

Tutorial

Getting Started with Tailwind CSS v4

Learn how to set up Tailwind CSS v4 in your project with the new configuration system.

John Doe

Feb 24, 2026

<div class="bg-white rounded-xl overflow-hidden shadow-sm border border-gray-100 max-w-sm hover:shadow-md transition-shadow">
  <div class="h-48 bg-gradient-to-br from-sky-400 to-blue-600"></div>
  <div class="p-5">
    <span class="text-xs font-semibold text-blue-600 uppercase tracking-wide">Tutorial</span>
    <h3 class="text-lg font-bold text-gray-900 mt-1 mb-2">Getting Started with Tailwind CSS v4</h3>
    <p class="text-sm text-gray-500 mb-4 line-clamp-2">Learn how to set up Tailwind CSS v4 in your project with the new configuration system.</p>
    <div class="flex items-center gap-3">
      <div class="w-8 h-8 rounded-full bg-gray-200"></div>
      <div>
        <p class="text-sm font-medium text-gray-700">John Doe</p>
        <p class="text-xs text-gray-400">Feb 24, 2026</p>
      </div>
    </div>
  </div>
</div>

Color Breakdown

Card Background

bg-white

#ffffff

Image Gradient Start

from-sky-400

#38bdf8

Image Gradient End

to-blue-600

#2563eb

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:bg-gray-800 dark:border-gray-700 dark:text-white

Use Cases

Blog listing pagesContent hubsNews sections

Browser Support

All modern browsers.

Related Recipes

Glassmorphism Card

card - intermediate

Neumorphism Card

card - intermediate

Gradient Border Card

card - advanced

Image Overlay Card

card - intermediate

Pricing Card

card - intermediate

Testimonial Card

card - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How do I add a real image?▼

Replace the gradient div with <img src='url' class='w-full h-48 object-cover' alt='...' />.