Three-Column View of News Articles Using Flexbox and TailwindCSS

In this example with Tailwind, we will create a simple three-column view that can be used for articles or other types of blog posts.

And here is the HTML:

<div class="flex flex-wrap justify-around md:container mx-auto mt-20">
  <!-- Article 1 -->
  <div class="w-full sm:w-1/2 md:w-1/3 p-2">
    <div class="bg-white shadow-lg rounded-lg overflow-hidden">
      <img class="w-full h-64 object-cover" src="https://placehold.co/600x400" alt="Article Image">
      <div class="p-6">
        <h2 class="text-lg font-semibold text-gray-700">Article Title 1</h2>
        <p class="text-gray-600 mt-4">This is a summary of the first news article. It gives a brief overview of the content of the article.</p>
        <a href="#" class="mt-4 inline-block bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700">Read More</a>
      </div>
    </div>
  </div>

  <!-- Article 2 -->
  <div class="w-full sm:w-1/2 md:w-1/3 p-2">
    <div class="bg-white shadow-lg rounded-lg overflow-hidden">
      <img class="w-full h-64 object-cover" src="https://placehold.co/600x400" alt="Article Image">
      <div class="p-6">
        <h2 class="text-lg font-semibold text-gray-700">Article Title 2</h2>
        <p class="text-gray-600 mt-4">This is a summary of the second news article. It gives a brief overview of the content of the article.</p>
        <a href="#" class="mt-4 inline-block bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700">Read More</a>
      </div>
    </div>
  </div>

  <!-- Article 3 -->
  <div class="w-full sm:w-1/2 md:w-1/3 p-2">
    <div class="bg-white shadow-lg rounded-lg overflow-hidden">
      <img class="w-full h-64 object-cover" src="https://placehold.co/600x400" alt="Article Image">
      <div class="p-6">
        <h2 class="text-lg font-semibold text-gray-700">Article Title 3</h2>
        <p class="text-gray-600 mt-4">This is a summary of the third news article. It gives a brief overview of the content of the article.</p>
        <a href="#" class="mt-4 inline-block bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700">Read More</a>
      </div>
    </div>
  </div>
</div>