<template>
    <div class="w-full md:w-1/3 px-2 pb-12">
        <div class="h-full bg-white rounded overflow-hidden shadow-md hover:shadow-lg relative smooth">
            <a href="#" class="no-underline hover:no-underline">
                <img src="https://source.unsplash.com/_AjqGGafofE/400x200" class="h-48 w-full rounded-t shadow-lg">
                <div class="p-6 h-auto md:h-48">	
                    <p class="text-gray-600 text-xs md:text-sm">GETTING STARTED</p>
                    <div class="font-bold text-xl text-gray-900">Lorem ipsum dolor sit amet.</div>
                    <p class="text-gray-800 font-serif text-base mb-5">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at ipsum eu nunc commodo posuere et sit amet ligula. 
                    </p>
                </div>
                <div class="flex items-center justify-between inset-x-0 bottom-0 p-6">
                    <img class="w-8 h-8 rounded-full mr-4" src="http://i.pravatar.cc/300" alt="Avatar of Author">
                    <p class="text-gray-600 text-xs md:text-sm">2 MIN READ</p>
                </div>
            </a>
        </div>
    </div>
</template>