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 v3.4. It is responsive. similar terms for this example is Email campaign
Related Examples
-
Newsletter section - HtmlwindCentered with images
1.1k -
cardshtml , css ,
1.2k -
Newsletter subscription formwith radial gradient background
12.1k -
-
-
-
-
977 -
-
-
Newsletter SectionOn your website or application, add a beautiful and responsive Newsletter Subscription Form. These Tailwind CSS Newsletter Forms are easy to use and customizable, allowing you to create a wide range of newsletter form styles that suit your website's design.
-
Modern responsive Newsletter formResponsive newsletter subscriber form
3.5k
Browse by topic
Explore components by Tags
Jump straight to the UI pattern you need.
Can't find it?
Didn't find the component you were looking for?
Search across 3,000+ community-built components and grab the code in seconds.