Monospace_Developer_Food_Grid_Layout

<div class="font-['JetBrains_Mono',_monospace] bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8 min-h-screen">
  <h2 class="text-3xl sm:text-4xl font-bold mb-8 text-center text-gray-900 dark:text-gray-100 uppercase tracking-widest">
    <span class="block">/MENU/</span><span class="block text-xl sm:text-2xl mt-2 lowercase text-gray-700 dark:text-gray-300">[select]</span>
  </h2>

  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 max-w-7xl mx-auto">

    <!-- Item 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] hover:border-blue-400 dark:hover:border-blue-600">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1080/400/300" alt="Spicy Noodles">
      <div class="p-4 sm:p-5">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">console.log('spicy_noodles');</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">A fiery delight, perfect for those who crave a kick. Fresh noodles with chili oil and special sauce.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$12.99;</span>
          <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm uppercase font-bold rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            add_to_cart
          </button>
        </div>
      </div>
    </div>

    <!-- Item 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] hover:border-blue-400 dark:hover:border-blue-600">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1060/400/300" alt="Vegetable Curry">
      <div class="p-4 sm:p-5">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">console.log('veg_curry');</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Hearty and wholesome, packed with fresh garden vegetables in a rich, aromatic sauce.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$10.50;</span>
          <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm uppercase font-bold rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            add_to_cart
          </button>
        </div>
      </div>
    </div>

    <!-- Item 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] hover:border-blue-400 dark:hover:border-blue-600">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1/400/300" alt="Chicken Burger">
      <div class="p-4 sm:p-5">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">console.log('chicken_burger');</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Classic grilled chicken patty with fresh lettuce, tomato, and special burger sauce.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$8.75;</span>
          <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm uppercase font-bold rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            add_to_cart
          </button>
        </div>
      </div>
    </div>

    <!-- Item 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] hover:border-blue-400 dark:hover:border-blue-600">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/400/400/300" alt="Fresh Salad">
      <div class="p-4 sm:p-5">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">console.log('fresh_salad');</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Light and refreshing, a mix of seasonal greens, vibrant vegetables, and a tangy dressing.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$7.00;</span>
          <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm uppercase font-bold rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            add_to_cart
          </button>
        </div>
      </div>
    </div>

    <!-- Item 5 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] hover:border-blue-400 dark:hover:border-blue-600">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/10/400/300" alt="Pepperoni Pizza">
      <div class="p-4 sm:p-5">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">console.log('pepperoni_pizza');</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Classic pepperoni, melted cheese, and a crispy crust. A timeless favorite.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$15.99;</span>
          <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm uppercase font-bold rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            add_to_cart
          </button>
        </div>
      </div>
    </div>

    <!-- Item 6 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700 transition-all duration-300 hover:shadow-xl hover:scale-[1.01] hover:border-blue-400 dark:hover:border-blue-600">
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/141/400/300" alt="Chocolate Cake">
      <div class="p-4 sm:p-5">
        <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-gray-100 uppercase tracking-wide">console.log('chocolate_cake');</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">Rich, decadent chocolate cake, a perfect end to any meal or a sweet treat on its own.</p>
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-blue-600 dark:text-blue-400">$6.25;</span>
          <button class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white text-sm uppercase font-bold rounded-md transition duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
            add_to_cart
          </button>
        </div>
      </div>
    </div>

  </div>
</div>