<section>
<div class="mx-auto max-w-screen-xl p-8">
<h4 class="text-md font-medium text-sky-500">Our Project</h4>
<h2 class="text-2xl font-bold text-gray-700 sm:text-3xl md:text-4xl">Some of our finest work.</h2>
<ul>
<li class="m-4 ml-0 mb-0 inline-block"><a class="text-md cursor-pointer font-medium text-sky-500 hover:text-sky-500">All Work</a></li>
<li class="m-4 ml-0 mb-0 inline-block"><a class="text-md cursor-pointer font-medium text-gray-600 hover:text-sky-500">Design</a></li>
<li class="m-4 ml-0 mb-0 inline-block"><a class="text-md cursor-pointer font-medium text-gray-600 hover:text-sky-500">Website</a></li>
<li class="m-4 ml-0 mb-0 inline-block"><a class="text-md cursor-pointer font-medium text-gray-600 hover:text-sky-500">Mobile App</a></li>
<li class="m-4 ml-0 mb-0 inline-block"><a class="text-md cursor-pointer font-medium text-gray-600 hover:text-sky-500">Web Application</a></li>
<li class="m-4 ml-0 mb-0 inline-block"><a class="text-md cursor-pointer font-medium text-gray-600 hover:text-sky-500">Ecommerce</a></li>
</ul>
<div class="mt-8 grid grid-cols-12 gap-y-8 sm:gap-8">
<div class="col-span-12 sm:col-span-6 md:col-span-4">
<a class="group block cursor-pointer rounded-3xl border shadow hover:border-blue-500">
<img class="h-[240px] w-full rounded-tr-3xl rounded-tl-3xl object-cover" src="https://images.pexels.com/photos/38544/imac-apple-mockup-app-38544.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="" />
<div class="rounded-br-3xl rounded-bl-3xl p-5 group-hover:bg-blue-100">
<h4 class="text-xl font-medium text-gray-700">Space Landing page</h4>
<span class="text-md font-medium text-gray-600">Website</span>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4">
<a class="group block cursor-pointer rounded-3xl border shadow hover:border-blue-500">
<img class="h-[240px] w-full rounded-tr-3xl rounded-tl-3xl object-cover" src="https://images.pexels.com/photos/38544/imac-apple-mockup-app-38544.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="" />
<div class="rounded-br-3xl rounded-bl-3xl p-5 group-hover:bg-blue-100">
<h4 class="text-xl font-medium text-gray-700">Space Landing page</h4>
<span class="text-md font-medium text-gray-600">Website</span>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4">
<a class="group block cursor-pointer rounded-3xl border shadow hover:border-blue-500">
<img class="h-[240px] w-full rounded-tr-3xl rounded-tl-3xl object-cover" src="https://images.pexels.com/photos/38544/imac-apple-mockup-app-38544.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="" />
<div class="rounded-br-3xl rounded-bl-3xl p-5 group-hover:bg-blue-100">
<h4 class="text-xl font-medium text-gray-700">Space Landing page</h4>
<span class="text-md font-medium text-gray-600">Website</span>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4">
<a class="group block cursor-pointer rounded-3xl border shadow hover:border-blue-500">
<img class="h-[240px] w-full rounded-tr-3xl rounded-tl-3xl object-cover" src="https://images.pexels.com/photos/38544/imac-apple-mockup-app-38544.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="" />
<div class="rounded-br-3xl rounded-bl-3xl p-5 group-hover:bg-blue-100">
<h4 class="text-xl font-medium text-gray-700">Space Landing page</h4>
<span class="text-md font-medium text-gray-600">Website</span>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4">
<a class="group block cursor-pointer rounded-3xl border shadow hover:border-blue-500">
<img class="h-[240px] w-full rounded-tr-3xl rounded-tl-3xl object-cover" src="https://images.pexels.com/photos/38544/imac-apple-mockup-app-38544.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="" />
<div class="rounded-br-3xl rounded-bl-3xl p-5 group-hover:bg-blue-100">
<h4 class="text-xl font-medium text-gray-700">Space Landing page</h4>
<span class="text-md font-medium text-gray-600">Website</span>
</div>
</a>
</div>
<div class="col-span-12 sm:col-span-6 md:col-span-4">
<a class="group block cursor-pointer rounded-3xl border shadow hover:border-blue-500">
<img class="h-[240px] w-full rounded-tr-3xl rounded-tl-3xl object-cover" src="https://images.pexels.com/photos/38544/imac-apple-mockup-app-38544.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="" />
<div class="rounded-br-3xl rounded-bl-3xl p-5 group-hover:bg-blue-100">
<h4 class="text-xl font-medium text-gray-700">Space Landing page</h4>
<span class="text-md font-medium text-gray-600">Website</span>
</div>
</a>
</div>
</div>
</div>
</section>
