blog component

good blog

This tailwind example is contributed by Uwera Dorcas, on 27-May-2025. Component is made with Tailwind v3.4. It is responsive.

Other

Author Uwera Dorcas

Tailwind v3.4 1.4k 5

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog Component</title>
    <style>
        /* Main Blog Container */
        .blog-section {
            max-width: 1200px;
            margin: 0 auto;
            padding: 4rem 2rem;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .blog-header {
            text-align: center;
            margin-bottom: 3rem;
        }
        
        .blog-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: #2d3748;
            margin-bottom: 1rem;
        }
        
        .blog-subtitle {
            font-size: 1.2rem;
            color: #4a5568;
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.6;
        }
        
        /* Blog Posts Grid */
        .blog-posts {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 2rem;
        }
        
        /* Individual Blog Post Card */
        .blog-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .blog-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        
        .blog-card-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
        }
        
        .blog-card-content {
            padding: 1.5rem;
        }
        
        .blog-card-category {
            display: inline-block;
            background: #4299e1;
            color: white;
            padding: 0.25rem 0.75rem;
            border-radius: 50px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
        }
        
        .blog-card-title {
            font-size: 1.4rem;
            font-weight: 700;
            color: #2d3748;
            margin-bottom: 0.75rem;
            line-height: 1.3;
        }
        
        .blog-card-excerpt {
            color: #4a5568;
            margin-bottom: 1.25rem;
            line-height: 1.6;
        }
        
        .blog-card-meta {
            display: flex;
            align-items: center;
            font-size: 0.9rem;
            color: #718096;
        }
        
        .blog-card-date {
            margin-right: 1rem;
        }
        
        .blog-card-author {
            display: flex;
            align-items: center;
        }
        
        .author-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 0.5rem;
            object-fit: cover;
        }
        
        /* View All Button */
        .view-all-container {
            text-align: center;
            margin-top: 3rem;
        }
        
        .view-all-btn {
            display: inline-block;
            background: #4299e1;
            color: white;
            padding: 0.75rem 1.5rem;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: background 0.3s ease;
        }
        
        .view-all-btn:hover {
            background: #3182ce;
        }
        
        /* Responsive Adjustments */
        @media (max-width: 768px) {
            .blog-section {
                padding: 3rem 1.5rem;
            }
            
            .blog-title {
                font-size: 2rem;
            }
            
            .blog-subtitle {
                font-size: 1.1rem;
            }
            
            .blog-posts {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <section class="blog-section">
        <div class="blog-header">
            <h2 class="blog-title">Latest Articles</h2>
            <p class="blog-subtitle">Discover our latest insights, stories, and updates to help you stay informed and inspired.</p>
        </div>
        
        <div class="blog-posts">
            
            <article class="blog-card">
                <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                     alt="Circuit board with technology components" 
                     class="blog-card-image">
                <div class="blog-card-content">
                    <span class="blog-card-category">Technology</span>
                    <h3 class="blog-card-title">The Future of Web Development in 2023</h3>
                    <p class="blog-card-excerpt">Explore the emerging trends and technologies that are shaping the future of web development this year.</p>
                    <div class="blog-card-meta">
                        <span class="blog-card-date">June 15, 2023</span>
                        <span class="blog-card-author">
                            <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=688&q=80" 
                                 alt="Sarah Johnson" 
                                 class="author-avatar">
                            Sarah Johnson
                        </span>
                    </div>
                </div>
            </article>
            
            
            <article class="blog-card">
                <img src="https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                     alt="Business team meeting" 
                     class="blog-card-image">
                <div class="blog-card-content">
                    <span class="blog-card-category" style="background: #48bb78;">Business</span>
                    <h3 class="blog-card-title">5 Strategies for Growing Your Online Business</h3>
                    <p class="blog-card-excerpt">Learn proven strategies to scale your online business and reach new customers effectively.</p>
                    <div class="blog-card-meta">
                        <span class="blog-card-date">June 10, 2023</span>
                        <span class="blog-card-author">
                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" 
                                 alt="Michael Chen" 
                                 class="author-avatar">
                            Michael Chen
                        </span>
                    </div>
                </div>
            </article>
            
            
            <article class="blog-card">
                <img src="https://images.unsplash.com/photo-1541462608143-67571c6738dd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" 
                     alt="Designer working on wireframes" 
                     class="blog-card-image">
                <div class="blog-card-content">
                    <span class="blog-card-category" style="background: #9f7aea;">Design</span>
                    <h3 class="blog-card-title">UX Design Principles for Better Conversions</h3>
                    <p class="blog-card-excerpt">How applying fundamental UX principles can significantly improve your website's conversion rates.</p>
                    <div class="blog-card-meta">
                        <span class="blog-card-date">June 5, 2023</span>
                        <span class="blog-card-author">
                            <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=761&q=80" 
                                 alt="Emma Rodriguez" 
                                 class="author-avatar">
                            Emma Rodriguez
                        </span>
                    </div>
                </div>
            </article>
        </div>
        
        <div class="view-all-container">
            <a href="#" class="view-all-btn">View All Articles</a>
        </div>
    </section>
</body>
</html>

Related Examples

cards
cards with background animation

Anonymous

3 years ago

11.9k
Reader AI – Your AI-Powered Knowledge & Thinking System
Reader AI helps you read, think, and remember better. Upload books, highlight insights, chat with AI, and build a personal knowledge system that evolves with you.

Ayyamperumal S

5 months ago

455
Lifetime Access (iOS 26 Style)
Lifetime Access (iOS 26 Style)

Tanvir Hasan Bappy (Tanvir)

8 months ago

506
Soft-Modern Dark Pricing
A sophisticated, highly rounded pricing component inspired by modern fintech interfaces. It avoids harsh lines in favor of deep "zinc" tones and subtle borders (border-white/5). The center card pops using a high-contrast white button against the dark theme, guiding user focus naturally without using aggressive gradients.

Hamza Atig

8 months ago

737
Todo List with Dark theme
Todo List with Dark theme

Muzammil Riaz

1 year ago

1.9k
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.1k
Ethical Fashion

Tanvir Hasan Bappy (Tanvir)

1 year ago

1.6k
Stacked Checkboxes

kishan pc

2 years ago

3.9k
Cafee shop
help to buy something that can help you to relax

INGRIDE MUZIRANENGE

1 year ago

1.6k
products, show, items
display images, card, products

Rushikesh Latpate

8 months ago

751
Notifications
Toast Notifications are lightweight and customizable components for displaying short messages or alerts. They are perfect for feedback on user actions, such as form submissions or system updates. Supports different types of notifications (success, error, warning, info). Automatically hides after a specified timeout. Option to include action buttons or close icons. Customizable styles, animation, and position on the screen.

Abhiraj

1 year ago

2k
About Us Component

KULDEEP

1 year ago

2k