Card with image

Blog post card

This tailwind example is contributed by Mr Robot, on 22-Jan-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Article Card, Blog page card, Article card

Card Blog Card

Author Mr Robot

Tailwind v3.4 11.1k 9

Fork Fullscreen

<div class="rounded overflow-hidden flex flex-col max-w-2xl mx-auto border">
        <div class="sm:flex justify-between items-center pt-4 px-5">
            <a href="#"
                class="sm:w-8/12 font-medium text-md inline-block hover:text-indigo-600 transition duration-500 ease-in-out inline-block mb-2">The
                Best Activewear from the Nordstrom Anniversary Sale</a>
            <div class="sm:w-4/12 flex items-center sm:px-6 pb-4">
                <a
                    href="#"><img class="w-10 h-10 rounded-full mr-2" src="https://tailwindcss.com/img/jonathan.jpg" alt="Avatar of Jonathan Reinink"></a>
                <div class="text-xs">
                    <a href="#" class="text-gray-900 font-medium leading-none hover:text-indigo-600">Jonathan
                        Reinink</a>
                    <p class="text-gray-600 text-xs">Aug 18</p>
                </div>
            </div>
        </div>

<div class="relative">
            <a href="#">
                <img class="w-full" src="https://images.pexels.com/photos/5120892/pexels-photo-5120892.jpeg?auto=compress&amp;cs=tinysrgb&amp;fit=crop&amp;h=625.0&amp;sharp=10&amp;w=1500" alt="Sunset in the mountains">
            </a>
            <a href="#!"
                class="hidden absolute z-10 text-xs absolute bottom-0 left-0 bg-indigo-600 px-6 m-2 py-2 text-white hover:bg-white hover:text-indigo-600 transition duration-500 ease-in-out sm:flex items-center"><span class="text-lg">|</span>&nbsp;&nbsp;<span>Cooking</span></a>

</div>
        <span href="#" class="p-5 text-xs font-regular text-gray-900 mr-1 flex flex-row items-center">
      <svg height="13px" width="13px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
	<g>
		<path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M277.333,256
			c0,11.797-9.536,21.333-21.333,21.333h-85.333c-11.797,0-21.333-9.536-21.333-21.333s9.536-21.333,21.333-21.333h64v-128
			c0-11.797,9.536-21.333,21.333-21.333s21.333,9.536,21.333,21.333V256z"></path>
	</g>
</g>
</svg>
      <span class="ml-1">6 mins ago</span></span>

</div>

Related Examples

Product card

Oliver Hansen

3 years ago

10.7k
Info Card

Prem..

3 years ago

20.8k
Card grid for posts

Mr Robot

3 years ago

24.2k
Responsive Grid with Featured image

_Amar_

4 years ago

13.2k
Responsive Article Section

Prashant

4 years ago

17.2k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25.1k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.4k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k
Card grid section
Display article/blog grid

Mr Robot

3 years ago

31.2k
Card with image full width
This component is a card designed for showcasing featured blog posts. It includes the post title, a captivating image, category links, and author details.

Mr Robot

3 years ago

14.1k
Card
amazing card

Cristian

1 year ago

2.5k
Card responsive and dark mode grid

Cristian

1 year ago

2.4k