Manufacturing_Industrial_Grayscale_Paper_Tabs

<div class="font-sans bg-gray-100 text-gray-800 p-4 sm:p-6 md:p-8 dark:bg-gray-900 dark:text-gray-200 min-h-screen">

  <div class="max-w-4xl mx-auto bg-white shadow-xl rounded-lg overflow-hidden dark:bg-gray-800 border border-gray-200 dark:border-gray-700">
    
    <div class="border-b border-gray-200 dark:border-gray-700 px-4 pt-4 sm:px-6 sm:pt-6 md:px-8 md:pt-8">
      <nav class="-mb-px flex space-x-4 sm:space-x-6 md:space-x-8 overflow-x-auto pb-4 custom-scrollbar" aria-label="Tabs">
        <a href="#" class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm sm:text-base text-gray-500 hover:text-gray-700 border-transparent hover:border-gray-300 transition-colors duration-200 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-600 outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 focus:ring-offset-white dark:focus:ring-offset-gray-800" aria-current="page">
          Production Overview
        </a>
        <a href="#" class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm sm:text-base text-gray-700 border-gray-500 dark:text-gray-200 dark:border-gray-400 outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 focus:ring-offset-white dark:focus:ring-offset-gray-800">
          Inventory Status
        </a>
        <a href="#" class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm sm:text-base text-gray-500 hover:text-gray-700 border-transparent hover:border-gray-300 transition-colors duration-200 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-600 outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 focus:ring-offset-white dark:focus:ring-offset-gray-800">
          Quality Control
        </a>
        <a href="#" class="whitespace-nowrap py-3 px-1 border-b-2 font-medium text-sm sm:text-base text-gray-500 hover:text-gray-700 border-transparent hover:border-gray-300 transition-colors duration-200 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:border-gray-600 outline-none focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 focus:ring-offset-white dark:focus:ring-offset-gray-800">
          Maintenance Logs
        </a>
      </nav>
    </div>

    <div class="p-4 sm:p-6 md:p-8">
      <h2 class="text-xl sm:text-2xl font-bold mb-4 dark:text-gray-100">Inventory Status</h2>
      <div class="prose prose-sm sm:prose dark:prose-invert max-w-none">
        <p class="mb-4 text-gray-700 dark:text-gray-300">Current stock levels and replenishment forecasts are critical for uninterrupted manufacturing processes. Below is a summary of key components and finished goods in our warehouses.</p>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
          <div class="bg-gray-50 p-4 rounded-md border border-gray-200 dark:bg-gray-700 dark:border-gray-600">
            <p class="text-lg font-semibold text-gray-900 dark:text-gray-100">Raw Materials</p>
            <ul class="list-none p-0 mt-2 space-y-1 text-gray-700 dark:text-gray-300">
                <li>Steel Coils: <span class="font-bold">1200 tons</span> (Capacity: 1500 tons)</li>
                <li>Aluminum Sheets: <span class="font-bold">850 units</span> (Capacity: 1000 units)</li>
                <li>Circuit Boards: <span class="font-bold">3500 units</span> (Capacity: 4000 units)</li>
            </ul>
          </div>
          <div class="bg-gray-50 p-4 rounded-md border border-gray-200 dark:bg-gray-700 dark:border-gray-600">
            <p class="text-lg font-semibold text-gray-900 dark:text-gray-100">Finished Products</p>
            <ul class="list-none p-0 mt-2 space-y-1 text-gray-700 dark:text-gray-300">
                <li>Industrial Pumps (Model X): <span class="font-bold">45 units</span> (Order: 50)</li>
                <li>Precision Robotics (Series Y): <span class="font-bold">18 units</span> (Order: 20)</li>
                <li>Heavy Duty Connectors: <span class="font-bold">980 units</span> (Order: 1000)</li>
            </ul>
          </div>
        </div>

        <figure class="mt-6 mb-4">
          <img src="https://picsum.photos/800/450?random=10" alt="Industrial inventory warehouse" class="w-full h-auto rounded-lg shadow-md border border-gray-200 dark:border-gray-700 object-cover">
          <figcaption class="text-sm text-gray-500 mt-2 text-center dark:text-gray-400">Visual representation of current inventory levels in automated warehouse system.</figcaption>
        </figure>

        <h3 class="text-lg sm:text-xl font-semibold mt-6 mb-2 dark:text-gray-100">Next Delivery Schedule</h3>
        <ul class="list-disc list-inside space-y-1 text-gray-700 dark:text-gray-300">
          <li>Steel Coils: <span class="font-semibold">Expected Oct 25, 2023</span> from Supplier A (PO# 12345)</li>
          <li>Circuit Boards: <span class="font-semibold">Expected Oct 28, 2023</span> from Supplier B (PO# 67890)</li>
          <li>Packaging Material: <span class="font-semibold">Expected Nov 01, 2023</span> from Supplier C (PO# 54321)</li>
        </ul>

      </div>
    </div>

  </div>

  <style>
  /* Custom scrollbar for better appearance */
  .custom-scrollbar::-webkit-scrollbar {
    height: 6px;
  }

  .custom-scrollbar::-webkit-scrollbar-track {
    background: #e0e0e0; /* Light gray for scrollbar track */
    border-radius: 3px;
  }
  .dark .custom-scrollbar::-webkit-scrollbar-track {
    background: #4a4a4a; /* Darker gray for dark mode */
  }

  .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #a0a0a0; /* Medium gray for scrollbar thumb */
    border-radius: 3px;
  }
  .dark .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #6b6b6b; /* Slightly lighter gray for dark mode */
  }

  .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #888; /* Darker gray on hover */
  }
  .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #808080;
  }
  </style>
</div>