Monospace Carousel Slider 组件

<div class="relative w-full max-w-4xl mx-auto py-8 font-mono text-gray-800 dark:text-gray-200 bg-gray-50 dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden">
  <h2 class="text-2xl font-bold text-center mb-6 px-4 text-emerald-700 dark:text-emerald-300">[CODE] Latest Articles [/]</h2>

  <!-- Carousel Wrapper -->
  <div class="flex overflow-x-scroll snap-x snap-mandatory scrollbar-hide space-x-4 px-4 pb-4 md:scroll-auto md:overflow-x-hidden md:flex-wrap md:justify-center">
    <!-- Slice 1 -->
    <div class="flex-none w-64 md:w-80 lg:w-96 snap-center bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 border border-emerald-200 dark:border-emerald-600 transition-all duration-300 hover:shadow-xl">
      <img class="w-full h-32 md:h-40 object-cover rounded-md mb-3 border border-emerald-100 dark:border-emerald-700" src="https://picsum.photos/400/250?random=1" alt="Article Image 1">
      <div class="text-xs text-emerald-600 dark:text-emerald-400 mb-1">[TAG] WebDev [/]</div>
      <h3 class="text-lg font-semibold mb-2 text-emerald-800 dark:text-emerald-200">// From Dev to Deploy: A Journey</h3>
      <p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3">Exploring the intricate pipeline from writing the first line of code to seeing it live in production...</p>
      <button class="mt-4 text-sm font-semibold text-emerald-700 dark:text-emerald-300 hover:underline">
        > READ MORE
      </button>
    </div>

    <!-- Slice 2 -->
    <div class="flex-none w-64 md:w-80 lg:w-96 snap-center bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 border border-emerald-200 dark:border-emerald-600 transition-all duration-300 hover:shadow-xl">
      <img class="w-full h-32 md:h-40 object-cover rounded-md mb-3 border border-emerald-100 dark:border-emerald-700" src="https://picsum.photos/400/250?random=2" alt="Article Image 2">
      <div class="text-xs text-emerald-600 dark:text-emerald-400 mb-1">[TAG] AI & ML [/]</div>
      <h3 class="text-lg font-semibold mb-2 text-emerald-800 dark:text-emerald-200">// The Rise of Generative Models</h3>
      <p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3">Delving into the exciting world of AI's generative capabilities and their impact on creativity and industry...</p>
      <button class="mt-4 text-sm font-semibold text-emerald-700 dark:text-emerald-300 hover:underline">
        > READ MORE
      </button>
    </div>

    <!-- Slice 3 -->
    <div class="flex-none w-64 md:w-80 lg:w-96 snap-center bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 border border-emerald-200 dark:border-emerald-600 transition-all duration-300 hover:shadow-xl">
      <img class="w-full h-32 md:h-40 object-cover rounded-md mb-3 border border-emerald-100 dark:border-emerald-700" src="https://picsum.photos/400/250?random=3" alt="Article Image 3">
      <div class="text-xs text-emerald-600 dark:text-emerald-400 mb-1">[TAG] Cybersecurity [/]</div>
      <h3 class="text-lg font-semibold mb-2 text-emerald-800 dark:text-emerald-200">// Securing Your Digital Fortress</h3>
      <p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3">Best practices and essential tools for protecting your data and privacy in an increasingly connected world...</p>
      <button class="mt-4 text-sm font-semibold text-emerald-700 dark:text-emerald-300 hover:underline">
        > READ MORE
      </button>
    </div>

    <!-- Slice 4 (hidden on smaller screens, appears on md and up) -->
    <div class="hidden md:flex flex-none w-64 md:w-80 lg:w-96 snap-center bg-white dark:bg-gray-800 rounded-lg shadow-md p-4 border border-emerald-200 dark:border-emerald-600 transition-all duration-300 hover:shadow-xl">
      <img class="w-full h-32 md:h-40 object-cover rounded-md mb-3 border border-emerald-100 dark:border-emerald-700" src="https://picsum.photos/400/250?random=4" alt="Article Image 4">
      <div class="text-xs text-emerald-600 dark:text-emerald-400 mb-1">[TAG] Cloud Computing [/]</div>
      <h3 class="text-lg font-semibold mb-2 text-emerald-800 dark:text-emerald-200">// Serverless Architectures Explored</h3>
      <p class="text-sm text-gray-700 dark:text-gray-300 line-clamp-3">A deep dive into the benefits and challenges of building applications without managing servers...</p>
      <button class="mt-4 text-sm font-semibold text-emerald-700 dark:text-emerald-300 hover:underline">
        > READ MORE
      </button>
    </div>
  </div>

  <!-- Scroll Indicator for mobile (optional visual flair) -->
  <div class="block md:hidden text-center text-xs text-gray-500 dark:text-gray-400 mt-4 px-4">
    &lt; SCROLL FOR MORE &gt;
  </div>

  <!-- Tailwind Typography plugin classes are used for line-clamp. If you don't have this plugin installed, 
       replace line-clamp-3 with fixed height and hidden overflow, e.g., 'h-16 overflow-hidden' -->

  <!-- To make the scrollbar-hide work, you need to install the Tailwind CSS Scrollbar Hiding Plugin: -->
  <!-- npm install tailwindcss-scrollbar-hide -->
  <!-- Then add it to your tailwind.config.js: -->
  <!-- plugins: [require('tailwindcss-scrollbar-hide')] -->
</div>