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

11.4k

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

2 years ago

15.2k
Blog post template with responsive sidebar

Author:
R.P Ketan

3 years ago

11.9k
Minimal blog page

Author:
Ron Hicks

3 years ago

13.5k
Blog page

Author:
Ron Hicks

3 years ago

12.1k
Blog post sample

Author:
sql_guru

3 years ago

14.2k
Blog Template

Author:
Mr Robot

3 years ago

10.8k
Blog page template

Author:
Ron Hicks

3 years ago

13.5k
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

3 years ago

9.6k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

10 months ago

968
Card template

Author:
Raul antonio de la cruz hernandez

1 month ago

70
News Feed

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

1 year ago

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

10 months ago

764

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components