Home
Morris Muriuki Muthigani
Tailwind CSS Blog Card

Tailwind CSS Blog Card

This tailwind example is contributed by Morris Muriuki Muthigani, on 25-Jul-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Article Card, Blog page card, Article card

Card Blog Card

Author Morris Muriuki Muthigani

Fork Fullscreen

<div class="relative pt-2 lg:pt-2 min-h-screen">

</div>

<a class="flex justify-center items-center bg-red-700 bg-opacity-80 z-10 absolute top-0 left-0 w-full h-full text-white rounded-2xl opacity-0 transition-all duration-300 transform group-hover:scale-105 text-xl group-hover:opacity-100"
                                href="/blog/slug" target="_self" rel="noopener noreferrer">
                                Read article
                                <svg class="ml-2 w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M13 5l7 7-7 7M5 5l7 7-7 7"></path>
                                </svg>
                            </a>
                        </div>
                        <div class="flex justify-between items-center w-full pb-4 mb-auto">
                            <div class="flex items-center">
                                <div class="pr-3">
                                    <img class="h-12 w-12 rounded-full object-cover" src="https://images.pexels.com/photos/163097/twitter-social-media-communication-internet-network-163097.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2"
                                        alt="">
                                </div>
                                <div class="flex flex-1">
                                    <div class="">
                                        <p class="text-sm font-semibold ">Morris Muthigani</p>
                                        <p class="text-sm text-gray-500">Published on 19/03/2024</p>
                                    </div>
                                </div>
                            </div>
                            <div class="flex justify-end">
                                <div class="text-sm flex items-center text-gray-500 ">
                                    2 Days ago
                                    <svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1"
                                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                </div>
                            </div>
                        </div>
                        <h3 class="font-medium text-xl leading-8">
                            <a href="/blog/slug"
                                class="block relative group-hover:text-red-700 transition-colors duration-200 ">
                                Instant Help at Your Fingertips
                            </a>
                        </h3>
                        <div>
                        </div>
                    </article>

</div>

Related Examples