<section class="mx-auto my-12 max-w-screen-lg px-4">
<div>
<div class="mb-3 text-center text-sm font-medium text-gray-900">BEST SELLER COURSES</div>
<h1 class="mx-auto mb-12 max-w-lg text-center text-5xl font-black"><span class="text-red-500">Online course</span> that will meet your needs</h1>
</div>
<div class="grid grid-cols-12 gap-y-4 sm:gap-8">
<div class="col-span-12 sm:col-span-6 md:col-span-4">
<a class="block cursor-pointer bg-white shadow-md transition-all hover:rotate-1 hover:scale-95 focus:rotate-1 focus:scale-95">
<div class="relative">
<img class="aspect-[4/2] h-auto w-full object-cover" src="https://images.pexels.com/photos/5940721/pexels-photo-5940721.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="" />
<span class="absolute bottom-2 right-2 border border-gray-900 bg-yellow-200 px-2 text-sm font-medium">Bestseller</span>
</div>
<div class="border border-gray-400">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-900">Introduction to Web Development</h2>
<div class="text-sm font-medium text-gray-700">By Dr. Robert Yu</div>
<div class="mt-2 text-justify text-sm text-gray-700">Learn the basics of creating and maintaining web applications using HTML, CSS, and JavaScript...</div>
</div>
<div class="flex justify-between border-t border-gray-400">
<div class="p-4 text-sm font-medium text-gray-900">5th Dec 2022</div>
<div class="p-4 text-sm font-bold text-red-500">$ 20.00</div>
</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4">
<a class="block cursor-pointer bg-white shadow-md transition-all hover:rotate-1 hover:scale-95 focus:rotate-1 focus:scale-95">
<div class="relative">
<img class="aspect-[4/2] h-auto w-full object-cover" src="https://images.pexels.com/photos/5940721/pexels-photo-5940721.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="" />
<span class="absolute bottom-2 right-2 border border-gray-900 bg-yellow-200 px-2 text-sm font-medium">Bestseller</span>
</div>
<div class="border border-gray-400">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-900">Introduction to Web Development</h2>
<div class="text-sm font-medium text-gray-700">By Dr. Robert Yu</div>
<div class="mt-2 text-justify text-sm text-gray-700">Learn the basics of creating and maintaining web applications using HTML, CSS, and JavaScript...</div>
</div>
<div class="flex justify-between border-t border-gray-400">
<div class="p-4 text-sm font-medium text-gray-900">5th Dec 2022</div>
<div class="p-4 text-sm font-bold text-red-500">$ 20.00</div>
</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4">
<a class="block cursor-pointer bg-white shadow-md transition-all hover:rotate-1 hover:scale-95 focus:rotate-1 focus:scale-95">
<div class="relative">
<img class="aspect-[4/2] h-auto w-full object-cover" src="https://images.pexels.com/photos/5940721/pexels-photo-5940721.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="" />
<span class="absolute bottom-2 right-2 border border-gray-900 bg-yellow-200 px-2 text-sm font-medium">Bestseller</span>
</div>
<div class="border border-gray-400">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-900">Introduction to Web Development</h2>
<div class="text-sm font-medium text-gray-700">By Dr. Robert Yu</div>
<div class="mt-2 text-justify text-sm text-gray-700">Learn the basics of creating and maintaining web applications using HTML, CSS, and JavaScript...</div>
</div>
<div class="flex justify-between border-t border-gray-400">
<div class="p-4 text-sm font-medium text-gray-900">5th Dec 2022</div>
<div class="p-4 text-sm font-bold text-red-500">$ 20.00</div>
</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4">
<a class="block cursor-pointer bg-white shadow-md transition-all hover:rotate-1 hover:scale-95 focus:rotate-1 focus:scale-95">
<div class="relative">
<img class="aspect-[4/2] h-auto w-full object-cover" src="https://images.pexels.com/photos/5940721/pexels-photo-5940721.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="" />
<span class="absolute bottom-2 right-2 border border-gray-900 bg-yellow-200 px-2 text-sm font-medium">Bestseller</span>
</div>
<div class="border border-gray-400">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-900">Introduction to Web Development</h2>
<div class="text-sm font-medium text-gray-700">By Dr. Robert Yu</div>
<div class="mt-2 text-justify text-sm text-gray-700">Learn the basics of creating and maintaining web applications using HTML, CSS, and JavaScript...</div>
</div>
<div class="flex justify-between border-t border-gray-400">
<div class="p-4 text-sm font-medium text-gray-900">5th Dec 2022</div>
<div class="p-4 text-sm font-bold text-red-500">$ 20.00</div>
</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4">
<a class="block cursor-pointer bg-white shadow-md transition-all hover:rotate-1 hover:scale-95 focus:rotate-1 focus:scale-95">
<div class="relative">
<img class="aspect-[4/2] h-auto w-full object-cover" src="https://images.pexels.com/photos/5940721/pexels-photo-5940721.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="" />
<span class="absolute bottom-2 right-2 border border-gray-900 bg-yellow-200 px-2 text-sm font-medium">Bestseller</span>
</div>
<div class="border border-gray-400">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-900">Introduction to Web Development</h2>
<div class="text-sm font-medium text-gray-700">By Dr. Robert Yu</div>
<div class="mt-2 text-justify text-sm text-gray-700">Learn the basics of creating and maintaining web applications using HTML, CSS, and JavaScript...</div>
</div>
<div class="flex justify-between border-t border-gray-400">
<div class="p-4 text-sm font-medium text-gray-900">5th Dec 2022</div>
<div class="p-4 text-sm font-bold text-red-500">$ 20.00</div>
</div>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4">
<a class="block cursor-pointer bg-white shadow-md transition-all hover:rotate-1 hover:scale-95 focus:rotate-1 focus:scale-95">
<div class="relative">
<img class="aspect-[4/2] h-auto w-full object-cover" src="https://images.pexels.com/photos/5940721/pexels-photo-5940721.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="" />
<span class="absolute bottom-2 right-2 border border-gray-900 bg-yellow-200 px-2 text-sm font-medium">Bestseller</span>
</div>
<div class="border border-gray-400">
<div class="p-4">
<h2 class="text-xl font-bold text-gray-900">Introduction to Web Development</h2>
<div class="text-sm font-medium text-gray-700">By Dr. Robert Yu</div>
<div class="mt-2 text-justify text-sm text-gray-700">Learn the basics of creating and maintaining web applications using HTML, CSS, and JavaScript...</div>
</div>
<div class="flex justify-between border-t border-gray-400">
<div class="p-4 text-sm font-medium text-gray-900">5th Dec 2022</div>
<div class="p-4 text-sm font-bold text-red-500">$ 20.00</div>
</div>
</div>
</a>
</div>
<div class="col-span-12">
<div class="text-center">
<a class="inline-block cursor-pointer bg-red-500 px-4 py-2 text-sm font-medium text-gray-50 shadow transition-all hover:rotate-1 hover:scale-95 focus:rotate-1 focus:scale-95">VIEW MORE</a>
</div>
</div>
</div>
</section>
