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.

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

Card Grid Blog Card

Author Alief Malik

Tailwind v3.4 82

Fork Fullscreen

<div class="max-w-2xl mx-auto text-center mb-10">
      <h2 class="text-3xl font-bold tracking-tight text-gray-900 mb-3">
        Latest Insights & Stories
      </h2>
      <p class="text-gray-600">
        Explore architectural trends, project highlights, and updates from FIND Design.
      </p>
    </div>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">

<a href="#" class="group relative h-72 sm:h-80 overflow-hidden bg-gray-900 shadow-sm hover:shadow-lg transition">
        
        <img 
          src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?q=80&w=800" 
          alt="Tropical Architecture Trends in Bali 2026"
          loading="lazy" 
          class="absolute inset-0 w-full h-full object-cover opacity-80 group-hover:scale-105 transition duration-300"
        />

<div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent"></div>

<div class="absolute bottom-0 inset-x-0 p-5 flex flex-col justify-end">
          
          <span class="self-start text-[10px] font-semibold tracking-wider uppercase px-2.5 py-1 mb-2.5 bg-white/20 backdrop-blur-md text-white">
            Article
          </span>

<div class="h-14 mb-1">
            <h3 class="text-lg font-bold text-white leading-snug line-clamp-2 group-hover:text-gray-200 transition">
              Tropical Architecture Trends in Bali 2026
            </h3>
          </div>

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

<div class="border-t border-white/20 pt-1.5 flex items-center gap-1.5">
            <svg class="w-3.5 h-3.5 text-gray-300 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-300" datetime="2026-10-11">
              Oct 11, 2026
            </time>
          </div>
        </div>
      </a>

<a href="#" class="group relative h-72 sm:h-80 overflow-hidden bg-gray-900 shadow-sm hover:shadow-lg transition">
        <img 
          src="https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?q=80&w=800" 
          alt="FIND Design Wins Best Architectural Excellence Award"
          loading="lazy" 
          class="absolute inset-0 w-full h-full object-cover opacity-80 group-hover:scale-105 transition duration-300"
        />

<div class="h-14 mb-1">
            <h3 class="text-lg font-bold text-white leading-snug line-clamp-2 group-hover:text-gray-200 transition">
              FIND Design Wins Best Architectural Excellence Award
            </h3>
          </div>

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

<a href="#" class="group relative h-72 sm:h-80 overflow-hidden bg-gray-900 shadow-sm hover:shadow-lg transition">
        <img 
          src="https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?q=80&w=800" 
          alt="Behind the Scenes: Site Visit to Gianyar Project"
          loading="lazy" 
          class="absolute inset-0 w-full h-full object-cover opacity-80 group-hover:scale-105 transition duration-300"
        />

<div class="h-14 mb-1">
            <h3 class="text-lg font-bold text-white leading-snug line-clamp-2 group-hover:text-gray-200 transition">
              Behind the Scenes: Site Visit to Gianyar Project
            </h3>
          </div>

<p class="text-xs text-gray-300 line-clamp-2 mb-2 leading-relaxed">
            Take an exclusive look at the structural progress and material selection for our ongoing cliffside retreat...
          </p>

</div>

<div class="flex justify-center mt-12">
      <a href="#" class="inline-flex items-center gap-2 rounded-full border border-gray-400 bg-transparent px-7 py-3 text-sm font-semibold text-gray-900 hover:bg-gray-900 hover:border-gray-900 hover:text-white transition duration-200">
        View All Articles
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" />
        </svg>
      </a>
    </div>

</div>
</section>

Related Examples

Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Amit Pachange

4 years ago

53.8k
Responsive Feature Card

Gopi Yadav

4 years ago

14.4k
Responsive Article Section

Prashant

4 years ago

17.2k
Products card grid
Example of product card grid with product image and pricing

Noob

4 years ago

24.9k
Articles Card Grid

Noob

4 years ago

11.8k
Info cards
Show various statistics on your website

Arya

4 years ago

12k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25.2k
Features grid

Sophia Baker

3 years ago

10.9k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.5k
Card grid for posts

Mr Robot

3 years ago

24.2k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k