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.

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

Other Blog Card

Author Alief Malik

Tailwind v3.4 108

Fork Fullscreen

<div class="grid grid-cols-1 lg:grid-cols-12 gap-8 lg:gap-12 items-start">

<main class="lg:col-span-8 lg:border-r lg:border-gray-300 lg:pr-12">
        
        
        <div class="mb-8">
          <h1 class="text-3xl sm:text-4xl font-bold text-gray-900 tracking-tight mb-2">
            Blog & News
          </h1>
          <p class="text-xs sm:text-sm text-gray-600">
            Explore architectural insights, project updates, and company news.
          </p>
        </div>

<div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-8">

<article class="group flex flex-col">
            
            <div class="relative h-52 w-full overflow-hidden bg-gray-900 mb-4">
              <img 
                src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=800" 
                alt="Tropical Architecture Trends in Bali 2026"
                loading="lazy" 
                class="w-full h-full object-cover opacity-90 group-hover:scale-105 transition duration-300"
              />
              <span class="absolute top-3 left-3 text-[10px] font-semibold tracking-wider uppercase px-2.5 py-1 bg-black/60 backdrop-blur-md text-white border border-white/10">
                Article
              </span>
            </div>

<div class="flex flex-col flex-grow">
              
              <a href="#" class="group-hover:text-gray-600 transition mb-2 h-[3.5rem] flex items-start overflow-hidden">
                <h3 class="text-base sm:text-lg font-bold text-gray-900 leading-snug line-clamp-2">
                  Tropical Architecture Trends in Bali 2026
                </h3>
              </a>

<p class="text-xs text-gray-600 line-clamp-2 mb-4 leading-relaxed">
                Discover how sustainable materials and open-plan concepts are reshaping modern luxury villas across Bali...
              </p>

<div class="mt-auto flex items-center gap-1.5 text-gray-400">
                <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                <time class="text-xs text-gray-500" datetime="2026-10-11">Oct 11, 2026</time>
              </div>
            </div>
          </article>

<article class="group flex flex-col">
            
            <div class="relative h-52 w-full overflow-hidden bg-gray-900 mb-4">
              <img 
                src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?q=80&w=800" 
                alt="FIND Design Wins Best Architectural Excellence Award"
                loading="lazy" 
                class="w-full h-full object-cover opacity-90 group-hover:scale-105 transition duration-300"
              />
              <span class="absolute top-3 left-3 text-[10px] font-semibold tracking-wider uppercase px-2.5 py-1 bg-black/60 backdrop-blur-md text-white border border-white/10">
                News
              </span>
            </div>

<div class="flex flex-col flex-grow">
              
              <a href="#" class="group-hover:text-gray-600 transition mb-2 h-[3.5rem] flex items-start overflow-hidden">
                <h3 class="text-base sm:text-lg font-bold text-gray-900 leading-snug line-clamp-2">
                  FIND Design Wins Best Architectural Excellence Award
                </h3>
              </a>

<p class="text-xs text-gray-600 line-clamp-2 mb-4 leading-relaxed">
                Our firm has been recognized nationally for pushing the boundaries of tropical contemporary architecture...
              </p>

<div class="mt-auto flex items-center gap-1.5 text-gray-400">
                <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                <time class="text-xs text-gray-500" datetime="2026-09-25">Sep 25, 2026</time>
              </div>
            </div>
          </article>

</div>

<div class="flex items-center justify-start gap-2 mt-12 pt-6 border-t border-gray-200">
          <button class="w-8 h-8 flex items-center justify-center bg-gray-900 text-xs font-semibold text-white">1</button>
          <button class="w-8 h-8 flex items-center justify-center border border-gray-300 bg-white text-xs font-semibold text-gray-700 hover:bg-gray-900 hover:text-white transition">2</button>
          <button class="w-8 h-8 flex items-center justify-center border border-gray-300 bg-white text-xs font-semibold text-gray-700 hover:bg-gray-900 hover:text-white transition">3</button>
        </div>
      </main>

<aside class="lg:col-span-4 space-y-8 lg:sticky lg:top-8">

<div class="relative w-full">
          <input 
            type="text" 
            placeholder="Search articles..." 
            class="w-full bg-white border border-gray-300 py-3 pl-4 pr-10 text-xs text-gray-900 focus:outline-none focus:border-gray-900 transition shadow-sm"
          />
          <svg class="w-4 h-4 text-gray-400 absolute right-3.5 top-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
          </svg>
        </div>

<div class="bg-white p-5 border border-gray-200 shadow-sm">
          <h3 class="text-xs font-bold uppercase tracking-wider text-gray-900 mb-4 pb-2 border-b border-gray-100">
            Categories
          </h3>
          <ul class="space-y-2 text-xs">
            <li>
              <a href="#" class="flex items-center justify-between p-2.5 bg-gray-900 text-white font-semibold transition">
                <span>All Categories</span>
                <span class="text-[10px] px-2 py-0.5 bg-white/20">18</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center justify-between p-2.5 text-gray-700 hover:bg-gray-100 font-medium transition">
                <span>Articles & Insights</span>
                <span class="text-[10px] px-2 py-0.5 bg-gray-100 text-gray-600">8</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center justify-between p-2.5 text-gray-700 hover:bg-gray-100 font-medium transition">
                <span>Company News</span>
                <span class="text-[10px] px-2 py-0.5 bg-gray-100 text-gray-600">5</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center justify-between p-2.5 text-gray-700 hover:bg-gray-100 font-medium transition">
                <span>Events & Exhibitions</span>
                <span class="text-[10px] px-2 py-0.5 bg-gray-100 text-gray-600">3</span>
              </a>
            </li>
            <li>
              <a href="#" class="flex items-center justify-between p-2.5 text-gray-700 hover:bg-gray-100 font-medium transition">
                <span>Project Highlights</span>
                <span class="text-[10px] px-2 py-0.5 bg-gray-100 text-gray-600">2</span>
              </a>
            </li>
          </ul>
        </div>

<div class="bg-gray-900 text-white p-6 border border-gray-900 shadow-sm">
          <span class="text-[10px] font-semibold tracking-widest uppercase text-gray-400 block mb-2">
            Work With Us
          </span>
          <h3 class="text-lg font-bold leading-snug mb-3">
            Need Architectural Services?
          </h3>
          <p class="text-xs text-gray-300 leading-relaxed mb-6">
            Looking to bring your dream villa or commercial project to life? Let’s collaborate and create spaces that inspire.
          </p>
          <a href="#" class="inline-flex items-center justify-center w-full bg-white text-gray-900 hover:bg-gray-200 text-xs font-bold py-3 uppercase tracking-wider transition">
            Contact Us
          </a>
        </div>

</aside>

</div>

</div>
</section>

Related Examples

Tailwind CSS Blog sharing buttons with blog details
Introducing our Blog Sharing Buttons with Blog Details component, designed to enhance the social sharing experience on your blog posts.

Abid Ullah

2 years ago

2.3k
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Abdul Baset Bappy

1 year ago

2.3k
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
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Hamza Atig

1 year ago

1.4k
LinkedIn Post UI Mockup
A static HTML and Tailwind CSS component designed to replicate the user interface of a LinkedIn post. This mockup accurately represents the post structure including the header (avatar, name, headline, timestamp), content area (text, optional media), engagement statistics (likes, comments, reposts), and the action bar (Like, Comment, Repost, Send). It's fully responsive, supports light and dark themes, and uses appropriate iconography and styling to closely mimic the LinkedIn feed experience.

Hamza Atig

1 year ago

1.7k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Hamza Atig

1 year ago

1.8k
Card post blog
Targetas para blog

Raul antonio de la cruz hernandez

11 months ago

708
Card blog
Targeta para blog

Raul antonio de la cruz hernandez

11 months ago

747
pile carde scroll
pile carde scroll

Omer fils ELENGA

8 months ago

649
Login / Register Form
Tailwind CSS styling only – no frameworks required Smooth tab switch with JavaScript Fully responsive for mobile and desktop Clean, modern form design with interactive elements

KULDEEP

1 year ago

1.7k
Phone Simulator with Built-in Car Racing Game and Play.
This is a complete virtual smartphone simulator built using HTML, CSS, Tailwind CSS, JavaScript, and Font Awesome Icons and mobile responsive . It provides a realistic phone interface with multiple apps, and the highlight is a fully playable Car Racing Game built right into it where you can actually play the car game.

Arjun Kumar

4 months ago

647
Organization Hierarchy list

Anonymous

3 years ago

9.8k