Simple Blog Layout Using HTML & Tailwind

Creating a blog layout involves organizing posts into a clean and readable format. Below is a basic blog layout with a header, post cards, and a sidebar-style design.

HTML Code Example

<div class="grid md:grid-cols-3 gap-6">
  <!-- Main Blog Area -->
  <div class="md:col-span-2 space-y-6">
    <article class="border p-4 rounded shadow">
      <h2 class="text-xl font-bold">Post Title One</h2>
      <p class="text-sm text-gray-600">June 25, 2025 by Admin</p>
      <p class="mt-2 text-gray-700">
        This is a short excerpt from the blog post content. Click below to read more.
      </p>
      <a href="#" class="text-blue-600 hover:underline mt-2 inline-block">Read More →</a>
    </article>

    <article class="border p-4 rounded shadow">
      <h2 class="text-xl font-bold">Post Title Two</h2>
      <p class="text-sm text-gray-600">June 20, 2025 by Admin</p>
      <p class="mt-2 text-gray-700">
        Another example of a blog post layout with a preview paragraph and a "read more" link.
      </p>
      <a href="#" class="text-blue-600 hover:underline mt-2 inline-block">Read More →</a>
    </article>
  </div>

  <!-- Sidebar -->
  <aside class="space-y-4">
    <div class="bg-gray-100 p-4 rounded">
      <h3 class="font-bold mb-2">Categories</h3>
      <ul class="list-disc list-inside text-sm text-gray-700">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
    </div>

    <div class="bg-gray-100 p-4 rounded">
      <h3 class="font-bold mb-2">Recent Posts</h3>
      <ul class="text-sm text-blue-600 space-y-1">
        <li><a href="#" class="hover:underline">Understanding Flexbox</a></li>
        <li><a href="#" class="hover:underline">Semantic HTML Tips</a></li>
        <li><a href="#" class="hover:underline">Grid Layout Basics</a></li>
      </ul>
    </div>
  </aside>
</div>
            

Tips for Better Blog Layouts

• Use a consistent style for blog cards/posts.
• Ensure typography is clean and easy to read.
• Highlight recent or featured posts.
• Optimize for mobile using responsive design.