Posts Learn Components Snippets Categories Tags Tools new About
/
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 w-full">
  <div class="p-6 bg-white rounded-xl">
	<a
	   href="#"
	   class="group"
	   >
	  <div class="overflow-hidden">
		<img
			 src="https://images.unsplash.com/photo-1636467204130-edf8ee206dce?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
			 class="w-full h-auto hover:scale-105 transition transition-all duration-200 ease-in-out"
			 alt="Sample Cover"
			 >
		  </div>

		<h3
			class="mt-6 leading-normal text-gray-800 group-hover:text-purple-400 font-semibold text-2xl lg:text-4xl line-clamp-3 transition translation-all duration-200 ease-in-out"
			title="Lorem Ipsum is simply dummy text of the printing"
			>
		  Lorem Ipsum is simply dummy text of the printing
		</h3>
		</a>

	  <div class="mt-6">
		<div class="grid grid-cols-2 lg:grid-cols-3 gap-4">
		  <time class="text-gray-600" datetime="2021-11-06T08:29:56+00:00">
			November 6, 2021
		  </time>

		  <a
			 href="#"
			 class="inline-block text-gray-600 hover:text-purple-400"
			 >
			10 Comments
		  </a>

		  <a
			 href="#"
			 class="flex items-center"
			 >
			<div class="h-6 w-6 rounded-full bg-purple-400"></div>

			<span class="ml-2 text-gray-600">
			  John Doe
			</span>
		  </a>
		</div>

		<p class="mt-6 leading-normal line-clamp-3 text-lg text-gray-600">
		  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi explicabo ipsa laudantium maxime nemo non numquam praesentium quia quidem reiciendis sint tempora temporibus tenetur, totam unde vel velit voluptas? Alias.
		</p>
	  </div>

	  <a href="#" class="inline-block mt-6 text-purple-500 hover:text-purple-400">
		Read More
	  </a>
	  </div>

	<div class="p-6 bg-white rounded-xl">
	  <a
		 href="#"
		 class="group"
		 >
		<div class="overflow-hidden">
		  <img
			   src="https://images.unsplash.com/photo-1636467204130-edf8ee206dce?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
			   class="w-full h-auto hover:scale-105 transition transition-all duration-200 ease-in-out"
			   alt="Sample Cover"
			   >
			</div>

		  <h3
			  class="mt-6 leading-normal text-gray-800 group-hover:text-purple-400 font-semibold text-2xl lg:text-4xl line-clamp-3 transition translation-all duration-200 ease-in-out"
			  title="Lorem Ipsum is simply dummy text of the printing"
			  >
			Lorem Ipsum is simply dummy text of the printing
		  </h3>
		  </a>

		<div class="mt-6">
		  <div class="grid grid-cols-2 lg:grid-cols-3 gap-4">
			<time class="text-gray-600" datetime="2021-11-06T08:29:56+00:00">
			  November 6, 2021
			</time>

			<a
			   href="#"
			   class="inline-block text-gray-600 hover:text-purple-400"
			   >
			  10 Comments
			</a>

			<a
			   href="#"
			   class="flex items-center"
			   >
			  <div class="h-6 w-6 rounded-full bg-purple-400"></div>

			  <span class="ml-2 text-gray-600">
				John Doe
			  </span>
			</a>
		  </div>

		  <p class="mt-6 leading-normal line-clamp-3 text-lg text-gray-600">
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi explicabo ipsa laudantium maxime nemo non numquam praesentium quia quidem reiciendis sint tempora temporibus tenetur, totam unde vel velit voluptas? Alias.
		  </p>
		</div>

		<a href="#" class="inline-block mt-6 text-purple-500 hover:text-purple-400">
		  Read More
		</a>
		</div>

	  <div class="p-6 bg-white rounded-xl">
		<a
		   href="#"
		   class="group"
		   >
		  <div class="overflow-hidden">
			<img
				 src="https://images.unsplash.com/photo-1636467204130-edf8ee206dce?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
				 class="w-full h-auto hover:scale-105 transition transition-all duration-200 ease-in-out"
				 alt="Sample Cover"
				 >
			  </div>

			<h3
				class="mt-6 leading-normal text-gray-800 group-hover:text-purple-400 font-semibold text-2xl lg:text-4xl line-clamp-3 transition translation-all duration-200 ease-in-out"
				title="Lorem Ipsum is simply dummy text of the printing"
				>
			  Lorem Ipsum is simply dummy text of the printing
			</h3>
			</a>

		  <div class="mt-6">
			<div class="grid grid-cols-2 lg:grid-cols-3 gap-4">
			  <time class="text-gray-600" datetime="2021-11-06T08:29:56+00:00">
				November 6, 2021
			  </time>

			  <a
				 href="#"
				 class="inline-block text-gray-600 hover:text-purple-400"
				 >
				10 Comments
			  </a>

			  <a
				 href="#"
				 class="flex items-center"
				 >
				<div class="h-6 w-6 rounded-full bg-purple-400"></div>

				<span class="ml-2 text-gray-600">
				  John Doe
				</span>
			  </a>
			</div>

			<p class="mt-6 leading-normal line-clamp-3 text-lg text-gray-600">
			  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi explicabo ipsa laudantium maxime nemo non numquam praesentium quia quidem reiciendis sint tempora temporibus tenetur, totam unde vel velit voluptas? Alias.
			</p>
		  </div>

		  <a href="#" class="inline-block mt-6 text-purple-500 hover:text-purple-400">
			Read More
		  </a>
		  </div>
	  </div>

Tailwind CSS blog post card component is suitable for blog post listing

How to install and add to your project?

Step 1: Include Tailwind CSS Style using CDN inside the head tag

<link href="https://unpkg.com/[email protected]^2/dist/tailwind.min.css" rel="stylesheet">

Step 2: Copy the Tailwind CSS Blog Post Card component code above as you need it

Step 3: Preview the component in your browsr

You are done 🎉

Credits or Attribution

If you enjoy using our components, please do give us (PostSrc) credit in your project footer section or about page. Copy the HTML below for attribution.

<a href="https://postsrc.com/components" target="_blank" rel="noopener" title="PostSrc Components - Collection of Tailwind CSS components for everyone to use"><img style="width: auto; height: 46px;" src="https://postsrc.com/img/attr.png" alt="PostSrc logo"></a>

Other Tailwind CSS Card Components

More Components
)