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

7.2k

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