Card Image With Text Over - Tailwind Component
Tailwind CSS card image component with text over, useful for showing featured content that has image component.
card
Loading component...
102 lines
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2 w-full mt-12 dark:bg-gray-800">
<div
class="relative overflow-hidden rounded-lg shadow-lg cursor-pointer m-4 dark:bg-gray-600 duration-300 ease-in-out transition-transform transform hover:-translate-y-2">
<img class="object-cover w-full h-80"
src="https://images.unsplash.com/photo-1556401615-c909c3d67480?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTA3fHxsYW1wfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
alt="Flower and sky" />
<span
class="absolute top-0 left-0 flex flex-col items-center mt-3 ml-3 px-2 py-2 rounded-full z-10 bg-yellow-500 text-sm font-medium text-white select-none dark:bg-yellow-600 dark:text-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mb-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A2 2 0 0011.172 3H8.828a2 2 0 00-1.414.586L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z"
clip-rule="evenodd" />
</svg>
<p class="text-sm text-gray-200">5</p>
</span>
<span
class="absolute top-0 right-0 items-center inline-flex mt-3 mr-3 px-3 py-2 rounded-full z-10 bg-white text-sm font-medium text-white select-none dark:bg-gray-400">
<span class="w-2.5 h-2.5 rounded-full bg-green-500 mr-4 dark:bg-green-700"></span>
<p class="text-sm text-gray-500 dark:text-gray-100">Available</p>
</span>
<div class="items-center text-center m-3">
<p class="text-lg font-bold text-gray-700 dark:text-gray-200">White bulb</p>
</div>
</div>
<div
class="relative overflow-hidden rounded-lg shadow-lg cursor-pointer m-4 dark:bg-gray-600 duration-300 ease-in-out transition-transform transform hover:-translate-y-2">
<img class=" object-cover w-full h-80"
src="https://images.unsplash.com/photo-1554104707-a76b270e4bbb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8Y2hhaXJ8ZW58MHwwfDB8fA%3D%3D&auto=format&fit=crop&w=500&q=80"
alt="Flower and sky" />
<span
class="absolute top-0 left-0 flex flex-col items-center mt-3 ml-3 px-2 py-2 rounded-full z-10 bg-yellow-500 text-sm font-medium text-white select-none dark:bg-yellow-600 dark:text-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mb-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A2 2 0 0011.172 3H8.828a2 2 0 00-1.414.586L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z"
clip-rule="evenodd" />
</svg>
<p class="text-sm text-gray-200">3</p>
</span>
<span
class="absolute top-0 right-0 items-center inline-flex mt-3 mr-3 px-3 py-2 rounded-full z-10 bg-white text-sm font-medium text-white select-none dark:bg-gray-400">
<span class="w-2.5 h-2.5 rounded-full bg-red-500 mr-4 dark:bg-red-700"></span>
<p class="text-sm text-gray-500 dark:text-gray-100">Blocked</p>
</span>
<div class="items-center text-center m-3">
<p class="text-lg font-bold text-gray-700 dark:text-gray-200">White metal chair</p>
</div>
</div>
<div
class="relative overflow-hidden rounded-lg shadow-lg cursor-pointer m-4 dark:bg-gray-600 duration-300 ease-in-out transition-transform transform hover:-translate-y-2">
<img class=" object-cover w-full h-80"
src="https://images.unsplash.com/photo-1539688831660-2ca435ee5a1a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjV8fGFwcGxlJTIwbGFwdG9wfGVufDB8MHwwfHw%3D&auto=format&fit=crop&w=500&q=80"
alt="Flower and sky" />
<span
class="absolute top-0 left-0 flex flex-col items-center mt-3 ml-3 px-2 py-2 rounded-full z-10 bg-yellow-500 text-sm font-medium text-white select-none dark:bg-yellow-600 dark:text-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mb-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A2 2 0 0011.172 3H8.828a2 2 0 00-1.414.586L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z"
clip-rule="evenodd" />
</svg>
<p class="text-sm text-gray-200">4</p>
</span>
<span
class="absolute top-0 right-0 items-center inline-flex mt-3 mr-3 px-3 py-2 rounded-full z-10 bg-white text-sm font-medium text-white select-none dark:bg-gray-400">
<span class="w-2.5 h-2.5 rounded-full bg-yellow-500 mr-4 dark:bg-yellow-600"></span>
<p class="text-sm text-gray-500 dark:text-gray-100">Scropped</p>
</span>
<div class="items-center text-center m-3">
<p class="text-lg font-bold text-gray-700 dark:text-gray-200">Apple laptop</p>
</div>
</div>
<div
class="relative overflow-hidden rounded-lg shadow-lg cursor-pointer m-4 dark:bg-gray-600 duration-300 ease-in-out transition-transform transform hover:-translate-y-2">
<img class=" object-cover w-full h-80"
src="https://images.unsplash.com/photo-1490135900376-2e86d918a23b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzN8fG9mZmljZSUyMHRhYmxlfGVufDB8MHwwfHw%3D&auto=format&fit=crop&w=500&q=80"
alt="Flower and sky" />
<span
class="absolute top-0 left-0 flex flex-col items-center mt-3 ml-3 px-2 py-2 rounded-full z-10 bg-yellow-500 text-sm font-medium text-white select-none dark:bg-yellow-600 dark:text-gray-100">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mb-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd"
d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2h-1.586a1 1 0 01-.707-.293l-1.121-1.121A2 2 0 0011.172 3H8.828a2 2 0 00-1.414.586L6.293 4.707A1 1 0 015.586 5H4zm6 9a3 3 0 100-6 3 3 0 000 6z"
clip-rule="evenodd" />
</svg>
<p class="text-sm text-gray-200">2</p>
</span>
<span
class="absolute top-0 right-0 items-center inline-flex mt-3 mr-3 px-3 py-2 rounded-full z-10 bg-white text-sm font-medium text-white select-none dark:bg-gray-400">
<span class="w-2.5 h-2.5 rounded-full bg-green-500 mr-4 dark:bg-green-700"></span>
<p class="text-sm text-gray-500 dark:text-gray-100">Available</p>
</span>
<div class="items-center text-center m-3">
<p class="text-lg font-bold text-gray-700 dark:text-gray-200">Office table</p>
</div>
</div>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap');
body {
font-family: 'Poppins', sans-serif;
}
</style>