Use this example to list your products in grid system
<section class="py-24"> <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <h2 class="font-manrope font-bold text-4xl text-black mb-8 max-lg:text-center"> Product list </h2> <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> <a href="javascript:;" class="mx-auto sm:mr-0 group cursor-pointer lg:mx-auto bg-white transition-all duration-500"> <div class=""> <img src="https://pagedone.io/asset/uploads/1700726158.png" alt="face cream image" class="w-full aspect-square rounded-2xl object-cover"> </div> <div class="mt-5"> <div class="flex items-center justify-between"> <h6 class="font-semibold text-xl leading-8 text-black transition-all duration-500 group-hover:text-indigo-600"> Face cream</h6> <h6 class="font-semibold text-xl leading-8 text-indigo-600">$100</h6> </div> <p class="mt-2 font-normal text-sm leading-6 text-gray-500">Orange & Aloe Vera</p> </div> </a> <a href="javascript:;" class="mx-auto sm:ml-0 group cursor-pointer lg:mx-auto bg-white transition-all duration-500"> <div class=""> <img src="https://pagedone.io/asset/uploads/1700726174.png" alt="plastic bottle image" class="w-full aspect-square rounded-2xl object-cover"> </div> <div class="mt-5"> <div class="flex items-center justify-between"> <h6 class="font-semibold text-xl leading-8 text-black transition-all duration-500 group-hover:text-indigo-600"> Plstic bottle</h6> <h6 class="font-semibold text-xl leading-8 text-indigo-600">$40</h6> </div> <p class="mt-2 font-normal text-sm leading-6 text-gray-500">Black color</p> </div> </a> <a href="javascript:;" class="mx-auto sm:mr-0 group cursor-pointer lg:mx-auto bg-white transition-all duration-500"> <div class=""> <img src="https://pagedone.io/asset/uploads/1700726191.png" alt="cream image" class="w-full aspect-square rounded-2xl object-cover"> </div> <div class="mt-5"> <div class="flex items-center justify-between"> <h6 class="font-semibold text-xl leading-8 text-black transition-all duration-500 group-hover:text-indigo-600"> Men cream</h6> <h6 class="font-semibold text-xl leading-8 text-indigo-600">$100</h6> </div> <p class="mt-2 font-normal text-sm leading-6 text-gray-500">Aloe Vera and Neem</p> </div> </a> <a href="javascript:;" class="mx-auto sm:ml-0 group cursor-pointer lg:mx-auto bg-white transition-all duration-500"> <div class=""> <img src="https://pagedone.io/asset/uploads/1700726207.png" alt="perfume bottle image" class="w-full aspect-square rounded-2xl object-cover"> </div> <div class="mt-5"> <div class="flex items-center justify-between"> <h6 class="font-semibold text-xl leading-8 text-black transition-all duration-500 group-hover:text-indigo-600"> Cold Perfume</h6> <h6 class="font-semibold text-xl leading-8 text-indigo-600">$100</h6> </div> <p class="mt-2 font-normal text-sm leading-6 text-gray-500">White perfume</p> </div> </a> </div> </div> </section>