Компонент интерактивных компонентов

<div class="p-4 sm:p-6 lg:p-8 bg-gradient-to-br from-indigo-200 to-purple-300 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">

  <!-- Component Wrapper -->
  <div class="max-w-4xl mx-auto p-6 lg:p-8 rounded-3xl shadow-xl border border-white dark:border-gray-700
              bg-gradient-to-br from-indigo-100 to-purple-200 dark:from-gray-850 dark:to-gray-950
              transform transition-all duration-300 hover:shadow-2xl hover:scale-100 dark:hover:shadow-lg">

    <h1 class="text-4xl lg:text-5xl font-extrabold mb-8 text-center
               text-indigo-700 dark:text-purple-400
               text-shadow-md drop-shadow-lg
               relative after:content-[''] after:absolute after:bottom-[-8px] after:left-1/2 after:-translate-x-1/2 
               after:w-16 after:h-1.5 after:rounded-full after:bg-purple-500 dark:after:bg-indigo-300">
      Order delicious food!</h1>

    <!-- Category Selection -->
    <div class="mb-10">
      <h2 class="text-2xl font-bold mb-4 text-purple-700 dark:text-indigo-400">Categories</h2>
      <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">

        <!-- Category Card 1 -->
        <button class="category-button group">
          <img src="https://picsum.photos/id/1080/100/100" alt="Burger" class="w-16 h-16 rounded-full mx-auto mb-2 object-cover transition-transform duration-300 group-hover:scale-110">
          <span class="text-lg font-semibold text-purple-800 dark:text-indigo-200 group-hover:text-purple-900 group-hover:dark:text-indigo-100">Burgers</span>
        </button>

        <!-- Category Card 2 -->
        <button class="category-button group">
          <img src="https://picsum.photos/id/1040/100/100" alt="Pizza" class="w-16 h-16 rounded-full mx-auto mb-2 object-cover transition-transform duration-300 group-hover:scale-110">
          <span class="text-lg font-semibold text-purple-800 dark:text-indigo-200 group-hover:text-purple-900 group-hover:dark:text-indigo-100">Pizzas</span>
        </button>

        <!-- Category Card 3 -->
        <button class="category-button group">
          <img src="https://picsum.photos/id/1050/100/100" alt="Sushi" class="w-16 h-16 rounded-full mx-auto mb-2 object-cover transition-transform duration-300 group-hover:scale-110">
          <span class="text-lg font-semibold text-purple-800 dark:text-indigo-200 group-hover:text-purple-900 group-hover:dark:text-indigo-100">Sushi</span>
        </button>

        <!-- Category Card 4 -->
        <button class="category-button group">
          <img src="https://picsum.photos/id/1049/100/100" alt="Desserts" class="w-16 h-16 rounded-full mx-auto mb-2 object-cover transition-transform duration-300 group-hover:scale-110">
          <span class="text-lg font-semibold text-purple-800 dark:text-indigo-200 group-hover:text-purple-900 group-hover:dark:text-indigo-100">Desserts</span>
        </button>
      </div>
    </div>

    <!-- Price Range Slider (Conceptual) -->
    <div class="mb-10">
      <h2 class="text-2xl font-bold mb-4 text-purple-700 dark:text-indigo-400">Price Range</h2>
      <div class="p-4 rounded-xl shadow-inner-neumorphism dark:shadow-inner-neumorphism-dark flex items-center justify-center">
        <label for="price-range" class="sr-only">Price Range</label>
        <input type="range" id="price-range" min="5" max="50" value="25" class="w-full h-3 rounded-full cursor-pointer
              bg-purple-300 dark:bg-gray-700
              accent-purple-600 dark:accent-indigo-400
              shadow-neumorphism-sm dark:shadow-neumorphism-sm-dark
              focus:outline-none focus:ring-2 focus:ring-purple-400 dark:focus:ring-indigo-300
              transition duration-200 ease-in-out
              [&::-webkit-slider-thumb]:w-6 [&::-webkit-slider-thumb]:h-6 [&::-webkit-slider-thumb]:-mt-1.5 
              [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-purple-600 dark:[&::-webkit-slider-thumb]:bg-indigo-400
              [&::-webkit-slider-thumb]:shadow-neumorphism dark:[&::-webkit-slider-thumb]:shadow-neumorphism-dark
              [&::-webkit-slider-thumb]:appearance-none
              [&::-moz-range-thumb]:w-6 [&::-moz-range-thumb]:h-6 [&::-moz-range-thumb]:-mt-1.5 
              [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-purple-600 dark:[&::-moz-range-thumb]:bg-indigo-400
              [&::-moz-range-thumb]:shadow-neumorphism dark:[&::-moz-range-thumb]:shadow-neumorphism-dark
              [&::-moz-range-thumb]:appearance-none
              ">
      </div>
      <div class="mt-2 flex justify-between text-sm text-gray-600 dark:text-gray-400">
        <span>$5</span>
        <span>$50</span>
      </div>
    </div>

    <!-- Dietary Preferences / Multiple Choice -->
    <div class="mb-10">
      <h2 class="text-2xl font-bold mb-4 text-purple-700 dark:text-indigo-400">Dietary Preferences</h2>
      <div class="flex flex-wrap gap-4">

        <!-- Checkbox 1 -->
        <div class="neumorphism-checkbox">
          <input type="checkbox" id="vegan" class="sr-only">
          <label for="vegan" class="neumorphism-checkbox-label group">
            <div class="w-6 h-6 rounded-full border border-purple-300 dark:border-gray-600 transition-all duration-200 group-hover:scale-105 group-active:scale-95
                        shadow-neumorphism-sm dark:shadow-neumorphism-sm-dark
                        peer-checked:bg-purple-500 peer-checked:border-purple-600 dark:peer-checked:bg-indigo-500 dark:peer-checked:border-indigo-600
                        peer-checked:shadow-inner-neumorphism-sm dark:peer-checked:shadow-inner-neumorphism-sm-dark
                        flex items-center justify-center
                        group-[.neumorphism-checkbox:has(input:checked)]:-translate-y-0.5
                        relative
                        ">
              <svg class="w-4 h-4 text-white opacity-0 transform scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <span class="ml-2 text-lg font-medium text-gray-700 dark:text-gray-300">Vegan</span>
          </label>
        </div>

        <!-- Checkbox 2 -->
        <div class="neumorphism-checkbox">
          <input type="checkbox" id="gluten-free" class="sr-only">
          <label for="gluten-free" class="neumorphism-checkbox-label group">
            <div class="w-6 h-6 rounded-full border border-purple-300 dark:border-gray-600 transition-all duration-200 group-hover:scale-105 group-active:scale-95
                        shadow-neumorphism-sm dark:shadow-neumorphism-sm-dark
                        peer-checked:bg-purple-500 peer-checked:border-purple-600 dark:peer-checked:bg-indigo-500 dark:peer-checked:border-indigo-600
                        peer-checked:shadow-inner-neumorphism-sm dark:peer-checked:shadow-inner-neumorphism-sm-dark
                        flex items-center justify-center
                        group-[.neumorphism-checkbox:has(input:checked)]:-translate-y-0.5
                        relative
                        ">
              <svg class="w-4 h-4 text-white opacity-0 transform scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <span class="ml-2 text-lg font-medium text-gray-700 dark:text-gray-300">Gluten-Free</span>
          </label>
        </div>

        <!-- Checkbox 3 -->
        <div class="neumorphism-checkbox">
          <input type="checkbox" id="vegetarian" class="sr-only">
          <label for="vegetarian" class="neumorphism-checkbox-label group">
            <div class="w-6 h-6 rounded-full border border-purple-300 dark:border-gray-600 transition-all duration-200 group-hover:scale-105 group-active:scale-95
                        shadow-neumorphism-sm dark:shadow-neumorphism-sm-dark
                        peer-checked:bg-purple-500 peer-checked:border-purple-600 dark:peer-checked:bg-indigo-500 dark:peer-checked:border-indigo-600
                        peer-checked:shadow-inner-neumorphism-sm dark:peer-checked:shadow-inner-neumorphism-sm-dark
                        flex items-center justify-center
                        group-[.neumorphism-checkbox:has(input:checked)]:-translate-y-0.5
                        relative
                        ">
              <svg class="w-4 h-4 text-white opacity-0 transform scale-0 transition-all duration-200 peer-checked:opacity-100 peer-checked:scale-100" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
              </svg>
            </div>
            <span class="ml-2 text-lg font-medium text-gray-700 dark:text-gray-300">Vegetarian</span>
          </label>
        </div>

      </div>
    </div>

    <!-- Quantity Selector / Spinner (Conceptual) -->
    <div class="mb-10 flex items-center justify-between">
      <h2 class="text-2xl font-bold text-purple-700 dark:text-indigo-400">Quantity:</h2>
      <div class="flex items-center space-x-4 p-2 rounded-full
                  shadow-neumorphism-sm dark:shadow-neumorphism-sm-dark
                  bg-purple-100 dark:bg-gray-800">
        <button aria-label="Decrease quantity" class="neumorphism-button-icon-round">
          <svg class="w-6 h-6 text-purple-600 dark:text-indigo-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6"></path>
          </svg>
        </button>
        <span class="text-2xl font-bold text-indigo-700 dark:text-purple-400">1</span> <!-- This would be dynamic -->
        <button aria-label="Increase quantity" class="neumorphism-button-icon-round">
          <svg class="w-6 h-6 text-purple-600 dark:text-indigo-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
          </svg>
        </button>
      </div>
    </div>

    <!-- Call to Action Buttons -->
    <div class="flex flex-col sm:flex-row gap-6 mt-12 justify-center">
      <button class="neumorphism-button-lg bg-pink-500 hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700
                     active:bg-pink-700 dark:active:bg-pink-800
                     text-white">
        <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z"></path>
        </svg>
        Add to Cart
      </button>
      <button class="neumorphism-button-lg bg-yellow-400 hover:bg-yellow-500 dark:bg-yellow-500 dark:hover:bg-yellow-600
                     active:bg-yellow-600 dark:active:bg-yellow-700
                     text-gray-900">
        <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
        </svg>
        Checkout Now
      </button>
    </div>

    <p class="text-center text-sm text-gray-500 dark:text-gray-400 mt-12">
      Experience the soft magic of Neumorphism with vibrant flavors!
    </p>

  </div>

  <!-- Tailwind JIT custom classes for Neumorphism -->
  <style>
    /* Base Neumorphism Shadows */
    .shadow-neumorphism {
      box-shadow: 6px 6px 12px #b0c4e7, -6px -6px 12px #e0f0ff;
    }
    .dark .shadow-neumorphism {
      box-shadow: 6px 6px 12px #22222b, -6px -6px 12px #3a3a48;
    }

    .shadow-neumorphism-sm {
      box-shadow: 3px 3px 6px #b0c4e7, -3px -3px 6px #e0f0ff;
    }
    .dark .shadow-neumorphism-sm {
      box-shadow: 3px 3px 6px #22222b, -3px -3px 6px #3a3a48;
    }

    /* Inner Neumorphism Shadows (for pressed/active states) */
    .shadow-inner-neumorphism {
      box-shadow: inset 3px 3px 6px #9aaed1, inset -3px -3px 6px #f6ffff;
    }
    .dark .shadow-inner-neumorphism {
      box-shadow: inset 3px 3px 6px #1a1a22, inset -3px -3px 6px #414151;
    }

    .shadow-inner-neumorphism-sm {
      box-shadow: inset 2px 2px 4px #9aaed1, inset -2px -2px 4px #f6ffff;
    }
    .dark .shadow-inner-neumorphism-sm {
      box-shadow: inset 2px 2px 4px #1a1a22, inset -2px -2px 4px #414151;
    }

    /* Specific Component Styles */
    .category-button {
      @apply flex flex-col items-center p-4 rounded-2xl cursor-pointer select-none
             bg-purple-100 dark:bg-gray-800
             shadow-neumorphism dark:shadow-neumorphism-dark
             transform transition-all duration-200
             hover:-translate-y-1 hover:shadow-lg dark:hover:shadow-lg-dark
             active:shadow-inner-neumorphism dark:active:shadow-inner-neumorphism-dark
             active:translate-y-0.5;
    }
    .dark .category-button {
        box-shadow: 6px 6px 12px #22222b, -6px -6px 12px #3a3a48;
    }
    .dark .category-button:hover {
        box-shadow: 8px 8px 16px #1a1a22, -8px -8px 16px #414151;
    }
    .dark .category-button:active {
      box-shadow: inset 3px 3px 6px #1a1a22, inset -3px -3px 6px #414151;
    }

    /* General Button Style */
    .neumorphism-button-lg {
      @apply flex items-center justify-center px-8 py-4 rounded-full font-bold text-xl
             shadow-neumorphism dark:shadow-neumorphism-dark
             transform transition-all duration-200
             hover:-translate-y-1 hover:scale-105 hover:shadow-lg dark:hover:shadow-lg-dark
             active:shadow-inner-neumorphism dark:active:shadow-inner-neumorphism-dark
             active:translate-y-0.5 active:scale-98;
             white-space: nowrap; /* Prevent text wrapping */
    }
    .dark .neumorphism-button-lg {
        box-shadow: 6px 6px 12px #22222b, -6px -6px 12px #3a3a48;
    }
    .dark .neumorphism-button-lg:hover {
        box-shadow: 8px 8px 16px #1a1a22, -8px -8px 16px #414151;
    }
    .dark .neumorphism-button-lg:active {
      box-shadow: inset 3px 3px 6px #1a1a22, inset -3px -3px 6px #414151;
    }

    /* Round Icon Button */
    .neumorphism-button-icon-round {
      @apply p-3 rounded-full
             shadow-neumorphism-sm dark:shadow-neumorphism-sm-dark
             bg-purple-200 dark:bg-gray-700
             transform transition-all duration-200
             hover:scale-110 hover:-translate-y-0.5
             active:shadow-inner-neumorphism-sm dark:active:shadow-inner-neumorphism-sm-dark
             active:translate-y-0.5 active:scale-95;
    }
    .dark .neumorphism-button-icon-round {
        box-shadow: 3px 3px 6px #22222b, -3px -3px 6px #3a3a48;
    }
    .dark .neumorphism-button-icon-round:hover {
        box-shadow: 4px 4px 8px #1a1a22, -4px -4px 8px #414151;
    }
    .dark .neumorphism-button-icon-round:active {
      box-shadow: inset 2px 2px 4px #1a1a22, inset -2px -2px 4px #414151;
    }

    /* Checkbox Styles */
    .neumorphism-checkbox-label {
      @apply flex items-center cursor-pointer select-none;
    }
    .neumorphism-checkbox input[type="checkbox"]:focus + .neumorphism-checkbox-label div {
      @apply ring-2 ring-purple-400 dark:ring-indigo-300 ring-offset-2 ring-offset-purple-50 dark:ring-offset-gray-900;
    }

    /* Dark Mode specific shadows that Tailwind doesn't allow for custom properties within theme easily */
    .dark\:shadow-neumorphism-dark {
        box-shadow: 6px 6px 12px #22222b, -6px -6px 12px #3a3a48;
    }
    .dark\:shadow-neumorphism-sm-dark {
        box-shadow: 3px 3px 6px #22222b, -3px -3px 6px #3a3a48;
    }
    .dark\:shadow-inner-neumorphism-dark {
        box-shadow: inset 3px 3px 6px #1a1a22, inset -3px -3px 6px #414151;
    }
    .dark\:shadow-inner-neumorphism-sm-dark {
        box-shadow: inset 2px 2px 4px #1a1a22, inset -2px -2px 4px #414151;
    }
    .dark\:hover\:shadow-lg-dark {
      box-shadow: 8px 8px 16px #1a1a22, -8px -8px 16px #414151;
    }

    /* Custom text shadow */
    .text-shadow-md {
      text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    }

    .dark .text-shadow-md {
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }
  </style>
</div>