Home
Juan D. Cortorreal
Modern Editorial News & Events Section

Modern Editorial News & Events Section

Overview: A sophisticated, responsive layout designed to highlight a primary featured story alongside a vertical list of recent updates or upcoming activities. It features a clean "magazine-style" aesthetic, utilizing serif typography for headings to create an elegant, high-end feel suitable for professional services or educational institutions.

Key Features:

Split Grid Layout: Uses a 12-column grid system (lg:col-span-7 vs lg:col-span-5) to balance the large featured content with the side list.

Featured Card (Left):

Image Zoom: subtle scale-105 transformation on the main image when hovering over the container.

Backdrop Badge: A frosted glass effect category badge over the image.

Interactive List (Right):

Smart Date Boxes: The date indicators act as design elements that invert colors (e.g., yellow background to yellow text) on hover.

Micro-interactions: List items "lift" slightly (-translate-y-1) upon interaction.

Typography: Integrates Google Fonts (DM Serif Display) for headings to break the monotony of standard sans-serif fonts and add character.

Tech Stack:

Framework: Tailwind CSS.

Icons: Ionicons (Script included).

Fonts: Google Fonts (DM Serif Display + Inter).

Usage: Ideal for "Latest News," "Upcoming Seminars," or "Blog Highlights" sections on a landing page. Ensure the Google Fonts link is included in the <head> for the correct visual style.

This tailwind example is contributed by Juan D. Cortorreal, on 23-Nov-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is Email campaign

Newsletter

Author Juan D. Cortorreal

134

Fork Fullscreen

<section class="py-16 md:py-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto font-sans-body">
    
    <div class="text-center mb-16 space-y-2">
        <span class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-teal-100 text-teal-800 text-sm font-bold tracking-wide uppercase">
            <ion-icon name="heart" class="text-teal-600"></ion-icon> Destacadas
        </span>
        <h2 class="text-4xl md:text-5xl lg:text-6xl font-serif-display text-gray-900 leading-tight">
            Noticias y <span class="text-teal-600 italic">Actividades</span>
        </h2>
        <p class="text-gray-500 max-w-2xl mx-auto text-lg">
            Entérate de nuestros últimos talleres, eventos de cocina y seminarios creativos.
        </p>
    </div>

<div class="grid grid-cols-1 lg:grid-cols-12 gap-10">
        
        <div class="lg:col-span-7 group cursor-pointer">
            <div class="bg-white rounded-3xl shadow-xl overflow-hidden hover:shadow-2xl transition-all duration-300 h-full flex flex-col">
                <div class="relative overflow-hidden h-64 md:h-96 w-full">
                    <img class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700" 
                         src="https://images.pexels.com/photos/3760323/pexels-photo-3760323.jpeg" 
                         alt="blog image">
                    <div class="absolute top-4 left-4 bg-white/90 backdrop-blur-sm px-4 py-1 rounded-lg text-xs font-bold text-teal-700 shadow-sm">
                        TECNOLOGÍA
                    </div>
                </div>

<div class="p-8 md:p-10 flex-1 flex flex-col justify-between">
                    <div>
                        <div class="flex items-center gap-4 text-sm text-gray-500 mb-4">
                            <span class="flex items-center gap-1"><ion-icon name="calendar-outline"></ion-icon> 15 Ene, 2024</span>
                            <span class="flex items-center gap-1"><ion-icon name="person-outline"></ion-icon> Por Admin</span>
                        </div>
                        <h3 class="text-3xl md:text-4xl font-serif-display text-gray-800 mb-4 leading-tight group-hover:text-teal-700 transition-colors">
                            Guía para principiantes: Diseño Web Moderno
                        </h3>
                        <p class="text-gray-600 leading-relaxed mb-6">
                            Adéntrate en el mundo de Tailwind CSS con esta guía amigable. Aprende los conceptos básicos, diseño responsivo y cómo personalizar tu sitio web.
                        </p>
                    </div>
                    
                    <div class="flex items-center text-teal-600 font-bold group-hover:translate-x-2 transition-transform duration-300">
                        Leer artículo completo <ion-icon name="arrow-forward-outline" class="ml-2"></ion-icon>
                    </div>
                </div>
            </div>
        </div>

<article class="bg-white p-5 rounded-2xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group border border-gray-100 flex gap-5 items-start">
                <div class="flex-shrink-0 w-16 h-16 bg-yellow-100 rounded-xl flex flex-col items-center justify-center text-yellow-700 shadow-sm group-hover:bg-yellow-500 group-hover:text-white transition-colors duration-300">
                    <span class="text-2xl font-bold font-serif-display leading-none">13</span>
                    <span class="text-[10px] uppercase font-bold tracking-wider">Ene</span>
                </div>
                
                <div class="flex-col">
                    <h4 class="text-xl font-bold text-gray-800 font-serif-display leading-tight mb-2 group-hover:text-yellow-600 transition-colors">
                        Estilo sin esfuerzo con CSS
                    </h4>
                    <p class="text-sm text-gray-500 line-clamp-2">
                        Descubre cómo Tailwind revoluciona el desarrollo web con su enfoque de utilidad primero.
                    </p>
                </div>
            </article>

<article class="bg-white p-5 rounded-2xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group border border-gray-100 flex gap-5 items-start">
                <div class="flex-shrink-0 w-16 h-16 bg-teal-100 rounded-xl flex flex-col items-center justify-center text-teal-700 shadow-sm group-hover:bg-teal-600 group-hover:text-white transition-colors duration-300">
                    <span class="text-2xl font-bold font-serif-display leading-none">20</span>
                    <span class="text-[10px] uppercase font-bold tracking-wider">Feb</span>
                </div>
                
                <div class="flex-col">
                    <h4 class="text-xl font-bold text-gray-800 font-serif-display leading-tight mb-2 group-hover:text-teal-600 transition-colors">
                        Técnicas avanzadas de UI
                    </h4>
                    <p class="text-sm text-gray-500 line-clamp-2">
                        Eleva tus habilidades de diseño web con trucos avanzados para interfaces impactantes.
                    </p>
                </div>
            </article>

<article class="bg-white p-5 rounded-2xl shadow-md hover:shadow-lg transition-all duration-300 hover:-translate-y-1 group border border-gray-100 flex gap-5 items-start">
                <div class="flex-shrink-0 w-16 h-16 bg-red-100 rounded-xl flex flex-col items-center justify-center text-red-700 shadow-sm group-hover:bg-red-500 group-hover:text-white transition-colors duration-300">
                    <span class="text-2xl font-bold font-serif-display leading-none">05</span>
                    <span class="text-[10px] uppercase font-bold tracking-wider">Mar</span>
                </div>
                
                <div class="flex-col">
                    <h4 class="text-xl font-bold text-gray-800 font-serif-display leading-tight mb-2 group-hover:text-red-600 transition-colors">
                        Diseño Responsivo Fácil
                    </h4>
                    <p class="text-sm text-gray-500 line-clamp-2">
                        Explora cómo simplificar el diseño móvil primero para sitios web modernos.
                    </p>
                </div>
            </article>

<div class="mt-2 text-right">
                <a href="#" class="inline-flex items-center text-sm font-semibold text-gray-400 hover:text-teal-600 transition-colors">
                    Ver todas las noticias <ion-icon name="arrow-forward" class="ml-1"></ion-icon>
                </a>
            </div>

</div>
    </div>
</section>

Related Examples