HTML 代码
<div class="min-h-screen bg-stone-100 dark:bg-stone-900 text-stone-900 dark:text-stone-100 p-6 lg:p-12 font-mono">
<!-- Article Card with Brutalist Elements -->
<div class="max-w-xl mx-auto bg-amber-700 dark:bg-amber-900 border-4 border-black dark:border-white shadow-[8px_8px_0_0_#000,12px_12px_0_0_#a16207] dark:shadow-[8px_8px_0_0_#fff,12px_12px_0_0_#44403c] transition duration-300 hover:shadow-[16px_16px_0_0_#000,20px_20px_0_0_#a16207] dark:hover:shadow-[16px_16px_0_0_#fff,20px_20px_0_0_#44403c]">
<div class="p-6 border-b-4 border-black dark:border-white">
<div class="text-sm font-bold mb-2 uppercase">Featured Article</div>
<h2 class="text-3xl font-bold mb-4 leading-tight">The Unyielding Spirit of Brutalist Architecture</h2>
<img src="https://picsum.photos/seed/brutalism/600/400" alt="Brutalist building" class="w-full h-48 object-cover mb-4 border-4 border-black dark:border-white">
<p class="mb-4">
Exploring the raw beauty and controversial history of Brutalist structures. Their imposing forms and
unadorned surfaces evoke a sense of permanence and honesty.
</p>
<a href="#" class="inline-block bg-black dark:bg-white text-white dark:text-black px-6 py-3 font-bold border-4 border-black dark:border-white transform translate-y-1 translate-x-1 hover:translate-y-0 hover:translate-x-0 transition duration-100">
Read More
</a>
</div>
<!-- Related Articles Section -->
<div class="p-6 border-b-4 border-black dark:border-white">
<h3 class="text-2xl font-bold mb-4">More to Explore</h3>
<ul>
<li class="mb-4 pb-4 border-b border-stone-700 dark:border-stone-300 last:border-b-0">
<a href="#" class="block hover:underline">
<h4 class="text-xl font-bold mb-1">Concrete Jungle: Brutalism in Urban Landscapes</h4>
<p class="text-sm text-stone-700 dark:text-stone-300">An analysis of Brutalism