Home
R.P Ketan
Blog post template with responsive sidebar

Blog post template with responsive sidebar

This tailwind example is contributed by R.P Ketan, on 04-Jan-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are blog page template, article page template

Blog post page

Author R.P Ketan

11.3k

Fork Fullscreen

<div class="flex flex-col">
    <div class="bg-gray-100 py-8">
        <div class="container mx-auto px-4">
            <h1 class="text-4xl font-bold text-gray-800 mb-2">Blog Title Here</h1>
            <p class="text-gray-600">Published on April 4, 2023</p>
        </div>
    </div>
    <div class="bg-white py-8">
        <div class="container mx-auto px-4 flex flex-col md:flex-row">
            <div class="w-full md:w-3/4 px-4">
                <img src="https://images.unsplash.com/photo-1506157786151-b8491531f063" alt="Blog Featured Image" class="mb-8">
                <div class="prose max-w-none">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisi. Sed sit amet feugiat
                        eros, eget eleifend dolor. Proin maximus bibendum felis, id fermentum odio vestibulum id. Sed ac
                        ligula eget dolor consequat tincidunt. Nullam fringilla ipsum et ex lacinia, at bibendum elit
                        posuere. Aliquam eget leo nec nibh mollis consectetur.</p>
                    <p>Suspendisse potenti. Mauris euismod, magna sit amet aliquam dapibus, ex sapien porta nisl, vel
                        auctor orci velit in risus. Fusce gravida bibendum dui, id volutpat felis dignissim a. Duis
                        sagittis, arcu ac convallis bibendum, neque dolor suscipit dolor, non malesuada magna orci a
                        mauris. Proin sollicitudin diam eu enim tincidunt dapibus. Aliquam pharetra purus mauris, id
                        lacinia mi malesuada ut. Integer dignissim, urna nec scelerisque feugiat, lacus sapien tincidunt
                        sem, sed luctus enim libero vel nunc. Vivamus ornare, felis quis feugiat luctus, orci justo
                        auctor urna, et elementum orci dolor ac ante. Ut varius sapien nec fringilla sodales.
                        Suspendisse lacinia, metus eu suscipit lobortis, enim sapien commodo sapien, non facilisis urna
                        elit eget elit.</p>
                    <p>Nulla facilisi. Sed venenatis pretium ante, sed tempor turpis sagittis ac. Pellentesque habitant
                        morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer vel diam arcu.
                        Maecenas bibendum efficitur ex sit amet tristique. Nulla vel sapien euismod, bibendum velit id,
                        facilisis magna. Sed vestibulum nisi vitae justo congue, eu bibendum augue interdum. Nam quis
                        orci nec nulla posuere facilisis. Etiam feugiat ligula quis est auctor, et sagittis orci
                        elementum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
                        Curae; Sed gravida neque vel tellus volutpat, vel laoreet lacus commodo. Vivamus quis enim leo.
                    </p>
                </div>
            </div>
            <div class="w-full md:w-1/4 px-4">
                <div class="bg-gray-100 p-4">
                    <h2 class="text-xl font-bold text-gray-800 mb-4">Recent Posts</h2>
                    <ul class="list-none">
                        <li class="mb-2">
                            <a href="#" class="text-gray-700 hover:text-gray-900">Blog Post 1</a>
                        </li>
                        <li class="mb-2">
                            <a href="#" class="text-gray-700 hover:text-gray-900">Blog Post 2</a>
                        </li>
                        <li class="mb-2">
                            <a href="#" class="text-gray-700 hover:text-gray-900">Blog Post 3</a>
                        </li>
                        <li class="mb-2">
                            <a href="#" class="text-gray-700 hover:text-gray-900">Blog Post 4</a>
                        </li>
                    </ul>
                </div>
                <div class="bg-gray-100 p-4 mt-4">
                    <h2 class="text-xl font-bold text-gray-800 mb-4">Categories</h2>
                    <ul class="list-none">
                        <li class="mb-2">
                            <a href="#" class="text-gray-700 hover:text-gray-900">Category 1</a>
                        </li>
                        <li class="mb-2">
                            <a href="#" class="text-gray-700 hover:text-gray-900">Category 2</a>
                        </li>
                        <li class="mb-2">
                            <a href="#" class="text-gray-700 hover:text-gray-900">Category 3</a>
                        </li>
                        <li class="mb-2">
                            <a href="#" class="text-gray-700 hover:text-gray-900">Category 4</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

</div>
</div>

Related Examples

Blog Article Template
blog article template

Author:
Anonymous

2 years ago

14.4k
Simple blog layout

Author:
Shakti

2 years ago

11.1k
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

2 years ago

9.2k
Blog post sample

Author:
sql_guru

2 years ago

13.6k
Minimal blog page

Author:
Ron Hicks

2 years ago

12.8k
Blog page

Author:
Ron Hicks

2 years ago

11.3k
Blog page template

Author:
Ron Hicks

2 years ago

12.8k
Blog Template

Author:
Mr Robot

3 years ago

10.4k
Linkedin Post

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

4.1k
Website Pricing List Card Component
Website Pricing List Card Component with Package Names: Basic Package → Starter Website Premium Package → Business Website Professional Package → E-Commerce Solution Pricing Structure: Increased prices significantly to reflect web development services one-time payment model FAQ Content.

Author:
Ayyamperumal S

5 months ago

825
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

4 months ago

366
TailwindFlex – Creative Animated Home Experience
"Innovative Home with Tailwind Animated Background" "Animated Hero – TailwindFlex Design" "Smooth UI – Creative Motion with Tailwind CSS" "Home Harmony – Motion Meets Design" "TailwindFlex Home – Fluid Animation & UI"

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

631

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components