Here you can show team members in square with round edges place holder with hover effect.
<section class="py-24 "> <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8"> <div class="mb-12"> <h2 class="font-manrope text-5xl text-center font-bold text-gray-900 mb-6">Meet the brains</h2> <p class="text-lg text-gray-500 text-center">These people work on making our product best.</p> </div> <div class="flex flex-wrap justify-center gap-y-14 max-w-3xl mx-auto lg:max-w-full "> <div class="group block text-center lg:w-1/5 sm:w-1/3 min-[450px]:w-1/2 w-full"> <div class="relative mb-5"> <img src="https://pagedone.io/asset/uploads/1698649968.png" alt="Marvin image" class="w-28 h-28 rounded-2xl object-cover mx-auto ransition-all duration-500 border-2 border-solid border-transparent group-hover:border-indigo-600"/> </div> <h4 class="text-xl text-gray-900 font-semibold text-center mb-2 transition-all duration-500 group-hover:text-indigo-600">Marvin McKinney</h4> <span class="text-gray-500 text-center block transition-all duration-500 group-hover:text-gray-900">Founder</span> </div> <div class="group block text-center lg:w-1/5 sm:w-1/3 min-[450px]:w-1/2 w-full"> <div class="relative mb-5"> <img src="https://pagedone.io/asset/uploads/1698650000.png" alt="Kathryn image" class="w-28 h-28 rounded-2xl object-cover mx-auto ransition-all duration-500 border-2 border-solid border-transparent group-hover:border-indigo-600"/> </div> <h4 class="text-xl text-gray-900 font-semibold text-center mb-2 transition-all duration-500 group-hover:text-indigo-600">Kathryn Murphy</h4> <span class="text-gray-500 text-center block transition-all duration-500 group-hover:text-gray-900">CTO</span> </div> <div class="group block text-center lg:w-1/5 sm:w-1/3 min-[450px]:w-1/2 w-full"> <div class="relative mb-5"> <img src="https://pagedone.io/asset/uploads/1698659360.png" alt="Jerome image" class="w-28 h-28 rounded-2xl object-cover mx-auto ransition-all duration-500 border-2 border-solid border-transparent group-hover:border-indigo-600"/> </div> <h4 class="text-xl text-gray-900 font-semibold text-center mb-2 transition-all duration-500 group-hover:text-indigo-600">Jerome Bell</h4> <span class="text-gray-500 text-center block transition-all duration-500 group-hover:text-gray-900">CMO</span> </div> <div class="group block text-center lg:w-1/5 sm:w-1/3 min-[450px]:w-1/2 w-full"> <div class="relative mb-5"> <img src="https://pagedone.io/asset/uploads/1698650109.png" alt="Wade image" class="w-28 h-28 rounded-2xl object-cover mx-auto ransition-all duration-500 border-2 border-solid border-transparent group-hover:border-indigo-600"/> </div> <h4 class="text-xl text-gray-900 font-semibold text-center mb-2 transition-all duration-500 group-hover:text-indigo-600">Wade Warren</h4> <span class="text-gray-500 text-center block transition-all duration-500 group-hover:text-gray-900">CEO</span> </div> <div class="group block text-center lg:w-1/5 sm:w-1/3 min-[450px]:w-1/2 w-full"> <div class="relative mb-5"> <img src="https://pagedone.io/asset/uploads/1698650146.png" alt="Leslie image" class="w-28 h-28 rounded-2xl object-cover mx-auto ransition-all duration-500 border-2 border-solid border-transparent group-hover:border-indigo-600"/> </div> <h4 class="text-xl text-gray-900 font-semibold text-center mb-2 transition-all duration-500 group-hover:text-indigo-600">Leslie Alexander</h4> <span class="text-gray-500 text-center block transition-all duration-500 group-hover:text-gray-900">Customer Support</span> </div> <div class="group block text-center lg:w-1/5 sm:w-1/3 min-[450px]:w-1/2 w-full"> <div class="relative mb-5"> <img src="https://pagedone.io/asset/uploads/1698650184.png" alt="Guy image" class="w-28 h-28 rounded-2xl object-cover mx-auto ransition-all duration-500 border-2 border-solid border-transparent group-hover:border-indigo-600"/> </div> <h4 class="text-xl text-gray-900 font-semibold text-center mb-2 transition-all duration-500 group-hover:text-indigo-600">Guy Hawkins</h4> <span class="text-gray-500 text-center block transition-all duration-500 group-hover:text-gray-900">HR</span> </div> <div class="group block text-center lg:w-1/5 sm:w-1/3 min-[450px]:w-1/2 w-full"> <div class="relative mb-5"> <img src="https://pagedone.io/asset/uploads/1698650213.png" alt="Ronald image" class="w-28 h-28 rounded-2xl object-cover mx-auto ransition-all duration-500 border-2 border-solid border-transparent group-hover:border-indigo-600"/> </div> <h4 class="text-xl text-gray-900 font-semibold text-center mb-2 transition-all duration-500 group-hover:text-indigo-600">Ronald Richards</h4> <span class="text-gray-500 text-center block transition-all duration-500 group-hover:text-gray-900">CO-Founder</span> </div> <div class="group block text-center lg:w-1/5 sm:w-1/3 min-[450px]:w-1/2 w-full"> <div class="relative mb-5"> <img src="https://pagedone.io/asset/uploads/1698650242.png" alt="Devon image" class="w-28 h-28 rounded-2xl object-cover mx-auto ransition-all duration-500 border-2 border-solid border-transparent group-hover:border-indigo-600"/> </div> <h4 class="text-xl text-gray-900 font-semibold text-center mb-2 transition-all duration-500 group-hover:text-indigo-600">Devon Lane</h4> <span class="text-gray-500 text-center block transition-all duration-500 group-hover:text-gray-900">UI Designer</span> </div> <div class="group block text-center lg:w-1/5 sm:w-1/3 min-[450px]:w-1/2 w-full"> <div class="relative mb-5"> <img src="https://pagedone.io/asset/uploads/1698650271.png" alt="Dianne image" class="w-28 h-28 rounded-2xl object-cover mx-auto ransition-all duration-500 border-2 border-solid border-transparent group-hover:border-indigo-600"/> </div> <h4 class="text-xl text-gray-900 font-semibold text-center mb-2 transition-all duration-500 group-hover:text-indigo-600">Dianne Russell</h4> <span class="text-gray-500 text-center block transition-all duration-500 group-hover:text-gray-900">Product Designer</span> </div> </div> </div> </section>
