Luxury Blog Cards

This tailwind example is contributed by JUGENDRA GANGWAR, on 14-Oct-2026. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Article Card, Blog page card, Article card

Blog Card

Author JUGENDRA GANGWAR

Tailwind v3.4 8

Fork Fullscreen

<section class="mx-auto my-8 w-full max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
    <div class="mb-8">
      <h2 class="text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl">Luxury Haute Couture</h2>
      <p class="mt-1 text-sm text-slate-500">Full-bleed imagery, gold foil accenting, and animated perimeter framing.</p>
    </div>

<div class="absolute inset-4 rounded-xl border border-[#E0C58A]/0 transition-all duration-700 group-hover:border-[#E0C58A]/80 pointer-events-none"></div>

<div class="absolute inset-x-0 bottom-0 p-6 sm:p-7 text-white">
            <span class="serif text-sm tracking-widest uppercase italic text-[#E0C58A]">Culture</span>
            <h3 class="serif mt-2 text-2xl font-normal leading-tight tracking-wide text-white transition duration-300 group-hover:text-[#F8E7C0]">
              How indie magazines are reinventing print
            </h3>

<div class="mt-4 flex items-center gap-3">
              <span class="block h-px w-8 bg-[#E0C58A] transition-all duration-500 group-hover:w-16"></span>
              <p class="text-xs tracking-wider text-slate-300 font-light uppercase">Dev Malhotra • 7 min</p>
            </div>
          </div>
        </a>
      </article>

<div class="absolute inset-x-0 bottom-0 p-6 sm:p-7 text-white">
            <span class="serif text-sm tracking-widest uppercase italic text-[#E0C58A]">Code</span>
            <h3 class="serif mt-2 text-2xl font-normal leading-tight tracking-wide text-white transition duration-300 group-hover:text-[#F8E7C0]">
              Tailwind patterns that keep your CSS small
            </h3>

<div class="mt-4 flex items-center gap-3">
              <span class="block h-px w-8 bg-[#E0C58A] transition-all duration-500 group-hover:w-16"></span>
              <p class="text-xs tracking-wider text-slate-300 font-light uppercase">Sana Qureshi • 6 min</p>
            </div>
          </div>
        </a>
      </article>

<div class="absolute inset-x-0 bottom-0 p-6 sm:p-7 text-white">
            <span class="serif text-sm tracking-widest uppercase italic text-[#E0C58A]">Architecture</span>
            <h3 class="serif mt-2 text-2xl font-normal leading-tight tracking-wide text-white transition duration-300 group-hover:text-[#F8E7C0]">
              Concrete, light and the new Indian modernism
            </h3>

<div class="mt-4 flex items-center gap-3">
              <span class="block h-px w-8 bg-[#E0C58A] transition-all duration-500 group-hover:w-16"></span>
              <p class="text-xs tracking-wider text-slate-300 font-light uppercase">Rahul Desai • 8 min</p>
            </div>
          </div>
        </a>
      </article>

<div class="absolute inset-x-0 bottom-0 p-6 sm:p-7 text-white">
            <span class="serif text-sm tracking-widest uppercase italic text-[#E0C58A]">Design</span>
            <h3 class="serif mt-2 text-2xl font-normal leading-tight tracking-wide text-white transition duration-300 group-hover:text-[#F8E7C0]">
              The quiet return of white space in product design
            </h3>

<div class="mt-4 flex items-center gap-3">
              <span class="block h-px w-8 bg-[#E0C58A] transition-all duration-500 group-hover:w-16"></span>
              <p class="text-xs tracking-wider text-slate-300 font-light uppercase">Aanya Mehta • 6 min</p>
            </div>
          </div>
        </a>
      </article>
    </div>
  </section>

Related Examples

Post Card
Clean card for post grid, Blog grid

Arshid Iqbal

4 weeks ago

115
MENU OMERLINKS
MENU OMERLINKS

Omer fils ELENGA

8 months ago

725
Kids E-learning Platform Card
Kids E-learning Platform Card Clone

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

2.5k
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Hamza Atig

1 year ago

2.2k
card design
card design

Tanvir Hasan Bappy (Tanvir)

9 months ago

653
Modern Architecture Blog & News Grid UI Layout
A clean, minimal, and fully responsive Blog/News grid layout built with Tailwind CSS. Features a 2-column article grid with fixed title alignment, clean pagination, and a sticky sidebar with categories & CTA widget. Perfect for architectural firms, magazine portals, and CMS integrations.

Alief Malik

2 months ago

107
Minimalist Blog Cards

JUGENDRA GANGWAR

1 day ago

7
Card animate

Raul antonio de la cruz hernandez

1 year ago

2k
Clean Architectural Blog & News Section Grid
A sleek, modern, and minimal blog section designed for architecture, portfolio, or agency websites. Features landscape card layouts, top-aligned post titles for consistent grid alignment, category badges, publication dates with icons, and a smooth outlined CTA button.

Alief Malik

2 months ago

80
pile carde scroll
pile carde scroll

Omer fils ELENGA

8 months ago

646
Card post blog
Targetas para blog

Raul antonio de la cruz hernandez

11 months ago

706
Posts / Articles card grid
Present a collection of articles or blog posts in a grid format with their respective featured images

Prajwal Hallale

2 years ago

6.2k