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

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.2k
Responsive layout with header, main body, aside (sidebar) and footer

Author:
Ahmed Malik

1 year ago

10.9k
Minimal blog page

Author:
Ron Hicks

2 years ago

11.5k
Blog Article Template
blog article template

Author:
Anonymous

1 year ago

13k
Blog post sample

Author:
sql_guru

1 year ago

12.8k
Typewriter effect
using javascript

Author:
Samuel Dawson

1 year ago

35.5k
Simple blog layout

Author:
Shakti

1 year ago

9.9k
Question & Answer
questions and answers

Author:
Anonymous

1 year ago

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

Author:
Abhiraj

1 week ago

36
A Captivating Blog Post
Blog post page that grabs attention with a headline hero, immerses readers in compelling content, and delights them with visually appealing elements.

Author:
Samuel Abera

8 months ago

3.1k
Skill showcase section for resume / porfolio website
show skill progression

Author:
Ava Brown

1 year ago

12k
OTP Verification Page
A responsive and interactive OTP verification page built with Tailwind CSS. The page features a gradient background, hover effects, and animations to enhance user experience. It includes input fields for the OTP, a resend OTP link, and a verify button. The design is optimized for both light and dark modes.

Author:
Abhiraj

1 week ago

179

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components