<section class="relative py-20 2xl:py-40 bg-gray-800 overflow-hidden">
<div class="container px-4 mx-auto">
<div class="mb-14 text-center">
<span class="text-lg text-blue-400 font-bold">What's new at Shuffle</span>
<h2 class="mt-8 text-5xl font-bold font-heading text-white">Latest blog</h2>
</div>
<div class="flex flex-wrap -m-6">
<div class="relative w-full lg:w-1/3 p-6">
<img class="hidden lg:block absolute top-0 left-0 -ml-40 mt-24" src="zospace-assets/lines/left-line.svg" alt="">
<div class="relative z-10 bg-gray-700 rounded-lg">
<div class="relative mb-8 h-52">
<img class="w-full h-full rounded-lg object-cover object-top" src="https://images.pexels.com/photos/6822288/pexels-photo-6822288.jpeg?q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=450&w=940" alt="">
<div class="absolute bottom-0 left-0 ml-8 mb-6 px-3 pb-3 pt-1 inline-block bg-white rounded-b-2xl border-t-4 border-blue-500">
<p class="text-xl font-bold">30</p>
<p class="text-xs uppercase text-gray-300">Feb</p>
</div>
</div>
<div class="px-14 pb-10"><a class="inline-block pt-4 text-lg text-white hover:text-gray-100 font-bold border-t border-gray-400" href="#">Is remote work working? A one year check-in</a></div>
</div>
</div>
<div class="relative w-full lg:w-1/3 p-6">
<img class="hidden lg:block absolute top-0 left-0 -ml-14 mt-24" src="zospace-assets/lines/right-line.svg" alt="">
<div class="relative z-10 lg:mt-24 bg-gray-700 rounded-lg">
<div class="relative mb-8 h-52">
<img class="w-full h-full rounded-lg object-cover" src="https://images.pexels.com/photos/5325768/pexels-photo-5325768.jpeg?q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=450&w=940" alt="">
<div class="absolute bottom-0 left-0 ml-8 mb-6 px-3 pb-3 pt-1 inline-block bg-white rounded-b-2xl border-t-4 border-blue-500">
<p class="text-xl font-bold">29</p>
<p class="text-xs uppercase text-gray-300">Feb</p>
</div>
</div>
<div class="px-14 pb-10"><a class="inline-block pt-4 text-lg text-white hover:text-gray-100 font-bold border-t border-gray-400" href="#">10 ways to keep your remote teams engaged</a></div>
</div>
</div>
<div class="relative w-full lg:w-1/3 p-6">
<img class="hidden lg:block absolute top-0 right-0 mr-64 mt-24" src="zospace-assets/lines/left-line.svg" alt="">
<div class="relative z-10 bg-gray-700 rounded-lg">
<div class="relative mb-8 h-52">
<img class="mb-8 w-full h-52 rounded-lg object-cover" src="https://images.pexels.com/photos/5325708/pexels-photo-5325708.jpeg?q=80&fm=jpg&crop=faces&cs=tinysrgb&fit=crop&h=450&w=940" alt="">
<div class="absolute bottom-0 left-0 ml-8 mb-6 px-3 pb-3 pt-1 inline-block bg-white rounded-b-2xl border-t-4 border-blue-500">
<p class="text-xl font-bold">25</p>
<p class="text-xs uppercase text-gray-300">Feb</p>
</div>
</div>
<div class="px-14 pb-10"><a class="inline-block pt-4 text-lg text-white hover:text-gray-100 font-bold border-t border-gray-400" href="#">How to make a concept map (+Examples)</a></div>
</div>
<img class="hidden lg:block absolute top-0 right-0 -mr-32 mt-24" src="zospace-assets/lines/right-line.svg" alt="">
</div>
</div>
<div class="mt-14 lg:mt-24 text-center"><a class="inline-block py-5 px-12 mr-4 bg-blue-500 hover:bg-blue-600 rounded-full text-white font-bold transition duration-200" href="#">See all</a></div>
</div>
</section>