simple responsive blog layout with sidebar

This tailwind example is contributed by Isabella Kowalski, on 23-Feb-2023. Component is made with Tailwind v3.4. similar terms for this example are blog page template, article page template

Blog post page Other

Author Isabella Kowalski

Tailwind v3.4 10.4k 10

Fork Fullscreen

<header class="bg-white shadow">
    <div class="container mx-auto px-4 py-6">
        <h1 class="text-2xl font-bold text-gray-800">Header</h1>
    </div>
</header>
<main class="container mx-auto px-4 py-8">
    <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-2/3 px-4">
            <h2 class="text-xl font-bold mb-4">Main Content</h2>
            <p class="text-gray-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris rhoncus ultrices
                nunc, in sagittis nulla dapibus non. Sed convallis fermentum ante quis gravida. Morbi finibus lorem eu
                eros consequat venenatis. Vestibulum at tristique neque. Fusce non sem auctor, sagittis arcu eget,
                euismod nisl. Curabitur et bibendum sapien. Cras luctus suscipit magna ac bibendum. Vivamus eu semper
                urna. Sed ullamcorper nisl vel dolor rhoncus facilisis. Donec vehicula nibh vitae est facilisis varius.
            </p>
        </div>
        <div class="w-full lg:w-1/3 px-4">
            <h3 class="text-lg font-bold mb-4">Sidebar</h3>
            <ul class="list-disc pl-4">
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
            </ul>
        </div>
    </div>
</main>
<footer class="bg-white shadow">
    <div class="container mx-auto px-4 py-6">
        <p class="text-gray-700">Footer</p>
    </div>
</footer>

Related Examples

Blog post template with responsive sidebar

R.P Ketan

3 years ago

12.6k
Responsive layout with header, main body, aside (sidebar) and footer

Ahmed Malik

3 years ago

13k
Minimal blog page

Ron Hicks

3 years ago

14.1k
Blog Article Template
blog article template

Anonymous

3 years ago

15.9k
Blog post sample

sql_guru

3 years ago

15.1k
Question & Answer
questions and answers

Anonymous

3 years ago

9.3k
Typewriter effect
using javascript

Samuel Dawson

3 years ago

43.5k
Simple blog layout

Shakti

3 years ago

12.1k
google meet clone
Meeting application with fully responsive connect my web for jsx https://abhirajk.vercel.app/

Abhiraj

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
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.3k
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