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.2k

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

14.6k
Blog post template with responsive sidebar

Author:
R.P Ketan

2 years ago

11.7k
Minimal blog page

Author:
Ron Hicks

2 years ago

13k
Blog page

Author:
Ron Hicks

2 years ago

11.5k
Blog post sample

Author:
sql_guru

2 years ago

13.9k
Blog Template

Author:
Mr Robot

3 years ago

10.7k
Blog page template

Author:
Ron Hicks

2 years ago

12.9k
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

2 years ago

9.2k
Blog, card

Author:
Алла Телегина

9 months ago

738
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

6 months ago

885
News Feed

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

9 months ago

1.4k
Blog

Author:
Crimson

9 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components