Blog Card

                                
                                    <!-- component -->
<div class="mx-auto w-96 my-4">
    <div class="w-full">
        <div class="relative">
            <img class="object-cover object-center w-96 h-80"
                src="https://cdn.pixabay.com/photo/2016/11/19/15/32/laptop-1839876_960_720.jpg"
                alt="blog card image">
            <div
                class="absolute left-0 right-0 flex w-11/12 m-auto h-11 -bottom-6 bg-blue-950">
                <div class="flex items-center flex-nowrap p-4">

                    <p class="text-white text-sm font-sans ml-2">Category: <span
                            class="font-sans text-gray-400 text-sm ml-2">
                            Development
                        </span></p>

                </div>
            </div>
        </div>
        <div class="w-10/12 mx-auto mt-10">
            <a href="#"
                class="font-bold leading-tight text-white font-sans text-2xl hover:text-yellow-600">Tailwind
                CSS instalation</a>
        </div>
        <div class="w-10/12 mx-auto mt-4">
            <a class="font-sans py-1 px-2 border border-gray-600 tracking-wide uppercase text-yellow-500 text-sm hover:bg-yellow-600 hover:text-white hover:border-transparent"
                href="#">See
                more</a>
        </div>
    </div>
</div>