<h1 class="text-xl md:text-4xl font-extrabold mb-8">Roadmaps</h1>
<div class=" mx-auto flex flex-wrap justify-center gap-3">
	<a href="#/roadmap/programming_in_golang" class="w-72 h-48 relative flex flex-col rounded-lg shadow-md overflow-hidden transform transition ease-out duration-300 hover:scale-105 ">
		<div class="flex-shrink-0 relative">
		  <img class="w-72 h-48 object-cover" src="https://images.unsplash.com/photo-1642367340318-96fdbc5d30f5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Z29sYW5nfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" alt="">
		  <h1 class="absolute inset-x-0 bottom-0 text-sm text-center md:text-sm font-semibold py-1 tracking-wider text-primary_light bg-primary bg-opacity-90">Programming in Golang</h1>
		</div>
	</a>

	<a href="#/roadmap/abstract_algebra" class="w-72 h-48 relative flex flex-col rounded-lg shadow-md overflow-hidden transform transition ease-out duration-300 hover:scale-105 ">
		<div class="flex-shrink-0 relative">
		  <img class="w-72 h-48 object-cover" src="https://plus.unsplash.com/premium_photo-1668004509315-f53e61b0c3f6?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8bmV0d29ya3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" alt="">
		  <h1 class="absolute inset-x-0 bottom-0 text-sm text-center md:text-sm font-semibold py-1 tracking-wider text-primary_light bg-primary bg-opacity-90">Abstract Algebra for High-schoolers</h1>
		</div>
	</a>
</div>