Home
Shakti
Simple blog layout

Simple blog layout

This tailwind example is contributed by Shakti, on 15-Feb-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 Shakti

10.9k

Fork Fullscreen

<nav class="bg-gray-800 py-4">
    <div class="container mx-auto flex justify-between items-center px-4">
        <h1 class="text-white text-2xl font-bold">My Blog</h1>
        <a href="#" class="text-gray-400 hover:text-white">About</a>
    </div>
</nav>
<main class="container mx-auto mt-8">
    <div class="flex flex-wrap justify-between">
        <div class="w-full md:w-8/12 px-4 mb-8">
            <img src="https://via.placeholder.com/1200x600" alt="Featured Image" class="w-full h-64 object-cover rounded">
            <h2 class="text-4xl font-bold mt-4 mb-2">My First Blog Post</h2>
            <p class="text-gray-700 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                laboris nisi ut aliquip ex ea commodo consequat.</p>
            <p class="text-gray-700 mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.</p>
            <p class="text-gray-700 mb-4">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
                architecto beatae vitae dicta sunt explicabo.</p>
        </div>
        <div class="w-full md:w-4/12 px-4 mb-8">
            <div class="bg-gray-100 px-4 py-6 rounded">
                <h3 class="text-lg font-bold mb-2">Categories</h3>
                <ul class="list-disc list-inside">
                    <li><a href="#" class="text-gray-700 hover:text-gray-900">Technology</a></li>
                    <li><a href="#" class="text-gray-700 hover:text-gray-900">Travel</a></li>
                    <li><a href="#" class="text-gray-700 hover:text-gray-900">Food</a></li>
                </ul>
            </div>
        </div>
    </div>
</main>
<footer class="bg-gray-800 py-4">
    <p class="text-center text-white">Copyright 2023</p>
</footer>

Related Examples

Blog Article Template
blog article template

Author:
Anonymous

1 year ago

13.9k
Blog post template with responsive sidebar

Author:
R.P Ketan

2 years ago

11k
Minimal blog page

Author:
Ron Hicks

2 years ago

12.4k
Blog page

Author:
Ron Hicks

2 years ago

11.1k
Blog post sample

Author:
sql_guru

2 years ago

13.3k
Blog Template

Author:
Mr Robot

2 years ago

10.3k
Blog page template

Author:
Ron Hicks

2 years ago

12.7k
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

2 years ago

9k
Blog

Author:
Crimson

5 months ago

769
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

2 months ago

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

Author:
Hamza Atig

2 months ago

298

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components