Three-Column View of News Articles Using Flexbox and TailwindCSS
By: Bobby
Published on: Jun 02, 2023
< 1 min read.
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>