Blog Template

This tailwind example is contributed by Mr Robot, on 13-Jul-2022. Component is made with Tailwind v3.4. similar terms for this example are blog page template, article page template

Blog post page

Author Mr Robot

Tailwind v3.4 11.2k 19

Fork Fullscreen

<div class="flex justify-between items-center px-4 w-auto h-14 bg-purple-900 text-white font-semibold">
    <div class="bg-white w-9 h-9 rounded-full"></div>
    <ul class="list-none flex justify-between items-center">
        <a href="#" class="mr-5 hover:text-gray-300">
            <li class="list-none">Menu</li>
        </a>
        <a href="#" class="mr-5 hover:text-gray-300">
            <li class="list-none">Services</li>
        </a>
        <a href="#" class="mr-5 hover:text-gray-300">
            <li class="list-none">About Us</li>
        </a>
        <a href="#" class="bg-indigo-500 hover:text-indigo-500 hover:bg-white py-1 px-3">
            <li class="list-none">Sign In</li>
        </a>
    </ul>
</div>

<div class="flex flex-col p-5 lg:px-48 lg:py-11">
    <div class="bg-gray-100 p-5 mb-10">
        <h1 class="font-bold text-2xl mb-2">Tailwind Rocks!</h1>
        <p class="my-3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius eaque a ipsam aliquid omnis,
            beatae possimus recusandae illum rem. Minima sequi voluptas repudiandae id? Quae, facere quam suscipit sed,
            aperiam sapiente pariatur soluta enim perferendis illum veniam excepturi doloribus ducimus voluptatibus
            numquam officiis expedita culpa hic sequi quasi reprehenderit iste obcaecati nostrum. Consequuntur aliquam,
            assumenda architecto animi veniam dolore dolor?</p>
        <button class="text-white font-semibold bg-blue-600 hover:bg-blue-800 p-2 my-1 rounded">Read More...</button>
    </div>
    <div class="bg-gray-100 p-5 mb-10">
        <h1 class="font-bold text-2xl mb-2">Tailwind Rocks!</h1>
        <p class="my-3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius eaque a ipsam aliquid omnis,
            beatae possimus recusandae illum rem. Minima sequi voluptas repudiandae id? Quae, facere quam suscipit sed,
            aperiam sapiente pariatur soluta enim perferendis illum veniam excepturi doloribus ducimus voluptatibus
            numquam officiis expedita culpa hic sequi quasi reprehenderit iste obcaecati nostrum. Consequuntur aliquam,
            assumenda architecto animi veniam dolore dolor?</p>
        <button class="text-white font-semibold bg-blue-600 hover:bg-blue-800 p-2 my-1 rounded">Read More...</button>
    </div>
    <div class="bg-gray-100 p-5 mb-10">
        <h1 class="font-bold text-2xl mb-2">Tailwind Rocks!</h1>
        <p class="my-3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eius eaque a ipsam aliquid omnis,
            beatae possimus recusandae illum rem. Minima sequi voluptas repudiandae id? Quae, facere quam suscipit sed,
            aperiam sapiente pariatur soluta enim perferendis illum veniam excepturi doloribus ducimus voluptatibus
            numquam officiis expedita culpa hic sequi quasi reprehenderit iste obcaecati nostrum. Consequuntur aliquam,
            assumenda architecto animi veniam dolore dolor?</p>
        <button class="text-white font-semibold bg-blue-600 hover:bg-blue-800 p-2 my-1 rounded">Read More...</button>
    </div>
</div>

Related Examples

Blog Article Template
blog article template

Anonymous

3 years ago

15.9k
Minimal blog page

Ron Hicks

3 years ago

14.1k
Blog post template with responsive sidebar

R.P Ketan

3 years ago

12.6k
Simple blog layout

Shakti

3 years ago

12.1k
Blog page template

Ron Hicks

3 years ago

14k
Blog post sample

sql_guru

3 years ago

15.1k
Blog page

Ron Hicks

3 years ago

12.9k
Reader AI – Your AI-Powered Knowledge & Thinking System
Reader AI helps you read, think, and remember better. Upload books, highlight insights, chat with AI, and build a personal knowledge system that evolves with you.

Ayyamperumal S

6 months ago

464
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.2k
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.4k
Rwanda-Canada Transport Services | Safe & Reliable Shipping
Attractive color scheme inspired by Rwanda's landscapes

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.1k
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