Posts Learn Components new Snippets new Categories Tags About
/
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 w-full">
  <div class="relative overflow-hidden rounded-lg shadow-lg cursor-pointer">
	<img class="object-cover w-full h-48" src="https://images.unsplash.com/photo-1502581827181-9cf3c3ee0106?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=420&q=80" alt="Flower and sky"/>

	<div class="absolute top-0 left-0 px-6 py-4">
	  <h4 class="mb-3 text-xl font-semibold tracking-tight text-white">This is the title</h4>
	  <p class="leading-normal text-gray-100">Lorem ipsum dolor, sit amet cons ectetur adipis icing elit. Praesen tium, quibusdam facere quo laborum maiores sequi nam tenetur laud.</p>
	</div>
  </div>

  <div class="relative overflow-hidden rounded-lg shadow-lg cursor-pointer">
	<img class="object-cover w-full h-48" src="https://images.unsplash.com/photo-1502581827181-9cf3c3ee0106?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=420&q=80" alt="Flower and sky"/>

	<div class="absolute top-0 left-0 px-6 py-4">
	  <h4 class="mb-3 text-xl font-semibold tracking-tight text-white">This is the title</h4>
	  <p class="leading-normal text-gray-100">Lorem ipsum dolor, sit amet cons ectetur adipis icing elit. Praesen tium, quibusdam facere quo laborum maiores sequi nam tenetur laud.</p>
	</div>
  </div>

  <div class="relative overflow-hidden rounded-lg shadow-lg cursor-pointer">
	<img class="object-cover w-full h-48" src="https://images.unsplash.com/photo-1502581827181-9cf3c3ee0106?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=420&q=80" alt="Flower and sky"/>

	<div class="absolute top-0 left-0 px-6 py-4">
	  <h4 class="mb-3 text-xl font-semibold tracking-tight text-white">This is the title</h4>
	  <p class="leading-normal text-gray-100">Lorem ipsum dolor, sit amet cons ectetur adipis icing elit. Praesen tium, quibusdam facere quo laborum maiores sequi nam tenetur laud.</p>
	</div>
  </div>

  <div class="relative overflow-hidden rounded-lg shadow-lg cursor-pointer">
	<img class="object-cover w-full h-48" src="https://images.unsplash.com/photo-1502581827181-9cf3c3ee0106?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=420&q=80" alt="Flower and sky"/>

	<div class="absolute top-0 left-0 px-6 py-4">
	  <h4 class="mb-3 text-xl font-semibold tracking-tight text-white">This is the title</h4>
	  <p class="leading-normal text-gray-100">Lorem ipsum dolor, sit amet cons ectetur adipis icing elit. Praesen tium, quibusdam facere quo laborum maiores sequi nam tenetur laud.</p>
	</div>
  </div>
</div>

Tailwind CSS card image component with text over, useful for showing featured content that has image component

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 Card Image With Text Over 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