Home
Mr Robot
Blog Template

Blog Template

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

Blog post page

Author Mr Robot

10.3k

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

Author:
Anonymous

1 year ago

13.8k
Minimal blog page

Author:
Ron Hicks

2 years ago

12.3k
Blog post template with responsive sidebar

Author:
R.P Ketan

2 years ago

11k
Simple blog layout

Author:
Shakti

2 years ago

10.8k
Blog page template

Author:
Ron Hicks

2 years ago

12.6k
Blog page

Author:
Ron Hicks

2 years ago

11k
Blog post sample

Author:
sql_guru

2 years ago

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

1 month ago

351
News Feed

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

5 months ago

846
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

2 months ago

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

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

1 year ago

3.5k
Hello Acode Master! 👋
is a passionate software developer based in Rubavu. He considers himself the top developer in the area and is committed to solving real-world problems through technology.

Author:
Acode Master(Mfuranziza Dusabe Hamza)

3 weeks ago

200

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components