Home
Isabella Kowalski
simple responsive blog layout with sidebar

simple responsive blog layout with sidebar

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

Blog post page Other

Author Isabella Kowalski

8.9k

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

Author:
R.P Ketan

2 years ago

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

Author:
Ahmed Malik

2 years ago

11.3k
Minimal blog page

Author:
Ron Hicks

2 years ago

12k
Blog Article Template
blog article template

Author:
Anonymous

1 year ago

13.5k
Blog post sample

Author:
sql_guru

2 years ago

13.2k
Typewriter effect
using javascript

Author:
Samuel Dawson

2 years ago

38.2k
Simple blog layout

Author:
Shakti

2 years ago

10.3k
Question & Answer
questions and answers

Author:
Anonymous

1 year ago

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

Author:
Abhiraj

2 months ago

576
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.

Author:
Hamza Atig

6 days ago

9
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.

Author:
Hamza Atig

6 days ago

12
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.

Author:
Hamza Atig

6 days ago

65

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components