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

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.4k
Blog post template with responsive sidebar

Author:
R.P Ketan

2 years ago

11.3k
Minimal blog page

Author:
Ron Hicks

2 years ago

12.8k
Blog page

Author:
Ron Hicks

2 years ago

11.3k
Blog post sample

Author:
sql_guru

2 years ago

13.6k
Blog Template

Author:
Mr Robot

3 years ago

10.4k
Blog page template

Author:
Ron Hicks

2 years ago

12.8k
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

2 years ago

9.2k
TailwindFlex – Creative Animated Home Experience
"Innovative Home with Tailwind Animated Background" "Animated Hero – TailwindFlex Design" "Smooth UI – Creative Motion with Tailwind CSS" "Home Harmony – Motion Meets Design" "TailwindFlex Home – Fluid Animation & UI"

Author:
Code Master(Mfuranziza Dusabe Hamza)

3 months ago

631
Linkedin Post

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

1 year ago

4.1k
Blog

Author:
Crimson

7 months ago

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

4 months ago

366

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components