Browse our latest creative captures showcasing visual innovation across industries—from entertainment to engineering.
<div class="bg-white pt-6 pb-6 py-6 sm:pt-8 sm:pb-8 sm:py-8 lg:pt-12 lg:pb-12 lg:py-12" > <div class="ml-auto mr-auto mx-auto max-w-screen-2xl pl-4 pr-4 px-4 md:pl-8 md:pr-8 md:px-8" > <div class="mb-4 flex items-center justify-between gap-8 sm:mb-8 md:mb-12"> <div class="flex items-center gap-12"> <h2 class="text-2xl font-bold text-gray-800 lg:text-3xl"> Featured Shots </h2> <p class="hidden md:block max-w-screen-sm text-gray-500"> Browse our latest creative captures showcasing visual innovation across industries—from entertainment to engineering. </p> </div> <a href="#" class="inline-block transition duration-100 active:bg-gray-200 rounded-lg border bg-white pl-4 pr-4 px-4 pt-2 pb-2 py-2 text-center text-sm font-semibold text-gray-500 outline-none ring-indigo-300 hover:bg-gray-100 focus-visible:ring md:pl-8 md:pr-8 md:px-8 md:pt-3 md:pb-3 md:py-3 md:text-base" > More </a> </div> <div class="grid grid-cols-2 sm:grid-cols-3 gap-4 md:gap-6 xl:gap-8"> <a href="#" class="group relative overflow-hidden flex h-48 items-end rounded-lg bg-gray-100 shadow-lg md:h-80" > <img src="https://images.unsplash.com/photo-1593508512255-86ab42a8e620?auto=format&q=75&fit=crop&w=600" loading="lazy" alt="Photo by Minh Pham" class="transition duration-200 group-hover:scale-110 absolute inset-0 h-full w-full object-cover object-center" /> <div class="pointer-events-none bg-gradient-to-t from-gray-800 via-transparent to-transparent absolute inset-0 opacity-50" ></div> <span class="relative inline-block ml-4 mb-3 text-sm text-white md:ml-5 md:text-lg" > SimSpace </span> </a> <a href="#" class="group relative overflow-hidden md:col-span-2 flex h-48 items-end rounded-lg bg-gray-100 shadow-lg md:h-80" > <img src="https://images.unsplash.com/photo-1542759564-7ccbb6ac450a?auto=format&q=75&fit=crop&w=1000" loading="lazy" alt="Photo by Magicle" class="transition duration-200 group-hover:scale-110 absolute inset-0 h-full w-full object-cover object-center" /> <div class="pointer-events-none bg-gradient-to-t from-gray-800 via-transparent to-transparent absolute inset-0 opacity-50" ></div> <span class="relative inline-block ml-4 mb-3 text-sm text-white md:ml-5 md:text-lg" > Circuitry </span> </a> <a href="#" class="group relative overflow-hidden md:col-span-2 flex h-48 items-end rounded-lg bg-gray-100 shadow-lg md:h-80" > <img src="https://images.unsplash.com/photo-1610465299996-30f240ac2b1c?auto=format&q=75&fit=crop&w=1000" loading="lazy" alt="Photo by Martin Sanchez" class="transition duration-200 group-hover:scale-110 absolute inset-0 h-full w-full object-cover object-center" /> <div class="pointer-events-none bg-gradient-to-t from-gray-800 via-transparent to-transparent absolute inset-0 opacity-50" ></div> <span class="relative inline-block ml-4 mb-3 text-sm text-white md:ml-5 md:text-lg" > CodeFlow </span> </a> <a href="#" class="group relative overflow-hidden flex h-48 items-end rounded-lg bg-gray-100 shadow-lg md:h-80" > <img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&q=75&fit=crop&w=600" loading="lazy" alt="Photo by Lorenzo Herrera" class="transition duration-200 group-hover:scale-110 absolute inset-0 h-full w-full object-cover object-center" /> <div class="pointer-events-none bg-gradient-to-t from-gray-800 via-transparent to-transparent absolute inset-0 opacity-50" ></div> <span class="relative inline-block ml-4 mb-3 text-sm text-white md:ml-5 md:text-lg" > Flashback </span> </a> </div> </div> </div>
Your changes are saved locally, but they may expire or be lost if you don’t create an account.