Interactive Components Component

<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