HTML 代码
<div class="font-sans bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-8 md:p-12 lg:p-16 min-h-screen">
<div class="max-w-7xl mx-auto">
<h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold mb-8 sm:mb-12 text-gray-900 dark:text-gray-50 border-b-4 border-gray-900 dark:border-gray-50 pb-4 tracking-tighter uppercase">
<span class="block">The Vault</span>
<span class="block text-2xl sm:text-3xl md:text-4xl font-light normal-case">A Gallery of Visual Noise</span>
</h1>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 md:gap-10">
<!-- Gallery Item 1 -->
<div class="bg-gray-200 dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-50 shadow-lg relative group overflow-hidden">
<img src="https://picsum.photos/id/1018/600/400" alt="Abstract Visual" class="w-full h-56 sm:h-64 md:h-72 object-cover object-center border-b-4 border-gray-900 dark:border-gray-50 transform transition-transform group-hover:scale-105 duration-300 ease-in-out">
<div class="p-4 sm:p-6 text-gray-900 dark:text-gray-100">
<h2 class="text-xl sm:text-2xl font-bold mb-2 uppercase tracking-tight">Dystopian Horizon</h2>
<p class="text-sm sm:text-base mb-4 line-clamp-3">A raw exploration of forgotten landscapes, echoing the solitude of derelict futures. Captured with a stark, unforgiving lens.</p>
<a href="#" class="inline-block bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-50 py-2 px-4 uppercase text-xs sm:text-sm font-bold tracking-wider hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-200">
View Project
</a>
</div>
<div class="absolute top-4 right-4 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 text-xs px-2 py-1 font-bold border-2 border-gray-900 dark:border-gray-50">HD</div>
</div>
<!-- Gallery Item 2 -->
<div class="bg-gray-200 dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-50 shadow-lg relative group overflow-hidden">
<img src="https://picsum.photos/id/1043/600/400" alt="Geometric Composition" class="w-full h-56 sm:h-64 md:h-72 object-cover object-center border-b-4 border-gray-900 dark:border-gray-50 transform transition-transform group-hover:scale-105 duration-300 ease-in-out">
<div class="p-4 sm:p-6 text-gray-900 dark:text-gray-100">
<h2 class="text-xl sm:text-2xl font-bold mb-2 uppercase tracking-tight">Concrete Echoes</h2>
<p class="text-sm sm:text-base mb-4 line-clamp-3">Harsh light and deep shadows define this urban series, a tribute to the monumental structures that shape our existence.</p>
<a href="#" class="inline-block bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-50 py-2 px-4 uppercase text-xs sm:text-sm font-bold tracking-wider hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-200">
Explore More
</a>
</div>
<div class="absolute top-4 right-4 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 text-xs px-2 py-1 font-bold border-2 border-gray-900 dark:border-gray-50">4K</div>
</div>
<!-- Gallery Item 3 -->
<div class="bg-gray-200 dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-50 shadow-lg relative group overflow-hidden">
<img src="https://picsum.photos/id/1069/600/400" alt="Industrial Abstraction" class="w-full h-56 sm:h-64 md:h-72 object-cover object-center border-b-4 border-gray-900 dark:border-gray-50 transform transition-transform group-hover:scale-105 duration-300 ease-in-out">
<div class="p-4 sm:p-6 text-gray-900 dark:text-gray-100">
<h2 class="text-xl sm:text-2xl font-bold mb-2 uppercase tracking-tight">System Failure</h2>
<p class="text-sm sm:text-base mb-4 line-clamp-3">A raw glimpse into the gears and conduits of a collapsing system. Beauty in the breakdown, stark and unyielding.</p>
<a href="#" class="inline-block bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-50 py-2 px-4 uppercase text-xs sm:text-sm font-bold tracking-wider hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-200">
See Portfolio
</a>
</div>
<div class="absolute top-4 right-4 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 text-xs px-2 py-1 font-bold border-2 border-gray-900 dark:border-gray-50">NEW</div>
</div>
<!-- Gallery Item 4 -->
<div class="bg-gray-200 dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-50 shadow-lg relative group overflow-hidden">
<img src="https://picsum.photos/id/1080/600/400" alt="Monolithic Structure" class="w-full h-56 sm:h-64 md:h-72 object-cover object-center border-b-4 border-gray-900 dark:border-gray-50 transform transition-transform group-hover:scale-105 duration-300 ease-in-out">
<div class="p-4 sm:p-6 text-gray-900 dark:text-gray-100">
<h2 class="text-xl sm:text-2xl font-bold mb-2 uppercase tracking-tight">Urban Decay</h2>
<p class="text-sm sm:text-base mb-4 line-clamp-3">Unflinching views of abandoned spaces, where rust and resilience tell stories of cycles lost and found.</p>
<a href="#" class="inline-block bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-50 py-2 px-4 uppercase text-xs sm:text-sm font-bold tracking-wider hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-200">
View Collection
</a>
</div>
<div class="absolute top-4 right-4 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 text-xs px-2 py-1 font-bold border-2 border-gray-900 dark:border-gray-50">HD</div>
</div>
<!-- Gallery Item 5 -->
<div class="bg-gray-200 dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-50 shadow-lg relative group overflow-hidden">
<img src="https://picsum.photos/id/1084/600/400" alt="Gritty Texture" class="w-full h-56 sm:h-64 md:h-72 object-cover object-center border-b-4 border-gray-900 dark:border-gray-50 transform transition-transform group-hover:scale-105 duration-300 ease-in-out">
<div class="p-4 sm:p-6 text-gray-900 dark:text-gray-100">
<h2 class="text-xl sm:text-2xl font-bold mb-2 uppercase tracking-tight">Raw Data</h2>
<p class="text-sm sm:text-base mb-4 line-clamp-3">Bare, unadorned visuals stripping away veneer to reveal the harsh truth beneath. A digital deconstruction.</p>
<a href="#" class="inline-block bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-50 py-2 px-4 uppercase text-xs sm:text-sm font-bold tracking-wider hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-200">
Download Raws
</a>
</div>
<div class="absolute top-4 right-4 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 text-xs px-2 py-1 font-bold border-2 border-gray-900 dark:border-gray-50">LIVE</div>
</div>
<!-- Gallery Item 6 -->
<div class="bg-gray-200 dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-50 shadow-lg relative group overflow-hidden">
<img src="https://picsum.photos/id/1049/600/400" alt="Minimalist Concrete" class="w-full h-56 sm:h-64 md:h-72 object-cover object-center border-b-4 border-gray-900 dark:border-gray-50 transform transition-transform group-hover:scale-105 duration-300 ease-in-out">
<div class="p-4 sm:p-6 text-gray-900 dark:text-gray-100">
<h2 class="text-xl sm:text-2xl font-bold mb-2 uppercase tracking-tight">Oblivion Walls</h2>
<p class="text-sm sm:text-base mb-4 line-clamp-3">Exploring the vast indifference of stark, unyielding architecture. A commentary on human scale in colossal spaces.</p>
<a href="#" class="inline-block bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-50 py-2 px-4 uppercase text-xs sm:text-sm font-bold tracking-wider hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-200">
View Series
</a>
</div>
<div class="absolute top-4 right-4 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 text-xs px-2 py-1 font-bold border-2 border-gray-900 dark:border-gray-50">VR</div>
</div>
</div>
<div class="mt-12 text-center">
<button type="button" class="bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-4 border-gray-900 dark:border-gray-50 py-3 px-8 text-lg sm:text-xl font-bold uppercase tracking-wider shadow-lg hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-300">
Load More Chaos
</button>
</div>
</div>
</div>