Counter

<div class="flex justify-center p-6">
  <div class="inline-flex h-10 -space-x-px rounded-lg">
    <button
      class="relative flex h-full w-10 shrink-0 items-center justify-center rounded-l-lg border border-gray-300 bg-gray-50 text-gray-500 focus:outline-0 focus-visible:z-10 focus-visible:border-gray-500 focus-visible:ring-1 focus-visible:ring-gray-500"
    >
      <!-- Heroicons name: mini/minus -->
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0">
        <path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
      </svg>
    </button>
    <input
      type="text"
      value="0"
      class="relative w-14 border border-gray-300 bg-white px-1 text-center focus:z-10 focus:border-gray-500 focus:outline-0 focus:ring-1 focus:ring-gray-500"
    />
    <button
      class="relative flex h-full w-10 shrink-0 items-center justify-center rounded-r-lg border border-gray-300 bg-gray-50 text-gray-500 focus:outline-0 focus-visible:z-10 focus-visible:border-gray-500 focus-visible:ring-1 focus-visible:ring-gray-500"
    >
      <!-- Heroicons name: mini/plus -->
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0">
        <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
      </svg>
    </button>
  </div>
</div>

<div class="flex justify-center p-6">
  <div class="inline-flex -space-x-px">
    <input
      type="text"
      value="0"
      class="relative h-12 w-20 border border-gray-300 bg-white px-1 text-center focus:z-10 focus:border-gray-500 focus:outline-0 focus:ring-1 focus:ring-gray-500"
    />
    <div class="grid -space-y-px">
      <div>
        <button
          class="relative flex h-full w-6 shrink-0 items-center justify-center border border-gray-300 bg-gray-50 text-gray-500 focus:outline-0 focus-visible:z-10 focus-visible:border-gray-500 focus-visible:ring-1 focus-visible:ring-gray-500"
        >
          <!-- Heroicons name: mini/plus -->
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4 shrink-0">
            <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
          </svg>
        </button>
      </div>
      <div>
        <button
          class="relative flex h-full w-6 shrink-0 items-center justify-center border border-gray-300 bg-gray-50 text-gray-500 focus:outline-0 focus-visible:z-10 focus-visible:border-gray-500 focus-visible:ring-1 focus-visible:ring-gray-500"
        >
          <!-- Heroicons name: mini/minus -->
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-4 shrink-0">
            <path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

<div class="flex justify-center p-6">
  <div class="relative inline-flex">
    <input
      type="text"
      value="0"
      class="h-12 w-24 border border-gray-300 bg-white pl-1 pr-7 text-center focus:border-gray-500 focus:outline-0 focus:ring-1 focus:ring-gray-500"
    />
    <div class="absolute right-1 top-0 grid h-full py-1">
      <button class="flex w-6 shrink-0 items-center justify-center text-gray-500">
        <!-- Heroicons name: mini/chevron-up -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
          <path
            fill-rule="evenodd"
            d="M14.77 12.79a.75.75 0 01-1.06-.02L10 8.832 6.29 12.77a.75.75 0 11-1.08-1.04l4.25-4.5a.75.75 0 011.08 0l4.25 4.5a.75.75 0 01-.02 1.06z"
            clip-rule="evenodd"
          />
        </svg>
      </button>
      <button class="flex w-6 shrink-0 items-center justify-center text-gray-500">
        <!-- Heroicons name: mini/chevron-down -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5">
          <path
            fill-rule="evenodd"
            d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
            clip-rule="evenodd"
          />
        </svg>
      </button>
    </div>
  </div>
</div>

<div class="flex justify-center p-6">
  <div class="w-full max-w-sm space-y-4">
    <div class="flex items-center justify-between">
      <label for="adults" class="text-sm font-medium text-gray-900"> Adults </label>
      <div class="inline-flex h-10 -space-x-px rounded-lg">
        <button
          class="relative flex h-full w-10 shrink-0 items-center justify-center rounded-l-lg border border-gray-300 bg-gray-50 text-gray-500 focus:outline-0 focus-visible:z-10 focus-visible:border-gray-500 focus-visible:ring-1 focus-visible:ring-gray-500"
        >
          <!-- Heroicons name: mini/minus -->
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0">
            <path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
          </svg>
        </button>
        <input
          id="adults"
          type="text"
          value="0"
          class="relative w-14 border border-gray-300 bg-white px-1 text-center focus:z-10 focus:border-gray-500 focus:outline-0 focus:ring-1 focus:ring-gray-500"
        />
        <button
          class="relative flex h-full w-10 shrink-0 items-center justify-center rounded-r-lg border border-gray-300 bg-gray-50 text-gray-500 focus:outline-0 focus-visible:z-10 focus-visible:border-gray-500 focus-visible:ring-1 focus-visible:ring-gray-500"
        >
          <!-- Heroicons name: mini/plus -->
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0">
            <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
          </svg>
        </button>
      </div>
    </div>

    <div class="flex items-center justify-between">
      <label for="child" class="text-sm font-medium text-gray-900"> Child </label>
      <div class="inline-flex h-10 -space-x-px rounded-lg">
        <button
          class="relative flex h-full w-10 shrink-0 items-center justify-center rounded-l-lg border border-gray-300 bg-gray-50 text-gray-500 focus:outline-0 focus-visible:z-10 focus-visible:border-gray-500 focus-visible:ring-1 focus-visible:ring-gray-500"
        >
          <!-- Heroicons name: mini/minus -->
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0">
            <path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
          </svg>
        </button>
        <input
          id="child"
          type="text"
          value="0"
          class="relative w-14 border border-gray-300 bg-white px-1 text-center focus:z-10 focus:border-gray-500 focus:outline-0 focus:ring-1 focus:ring-gray-500"
        />
        <button
          class="relative flex h-full w-10 shrink-0 items-center justify-center rounded-r-lg border border-gray-300 bg-gray-50 text-gray-500 focus:outline-0 focus-visible:z-10 focus-visible:border-gray-500 focus-visible:ring-1 focus-visible:ring-gray-500"
        >
          <!-- Heroicons name: mini/plus -->
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0">
            <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>

<div class="flex justify-center p-6">
  <div class="inline-block">
    <div class="flex h-10 space-x-2 text-gray-600">
      <input
        type="text"
        value="0"
        class="w-24 border border-gray-300 bg-white px-2 focus:border-gray-500 focus:outline-0 focus:ring-1 focus:ring-gray-500"
      />
      <button
        class="flex w-10 shrink-0 items-center justify-center border border-gray-300 bg-gray-50 text-gray-500 focus:outline-0 focus-visible:border-gray-500 focus-visible:ring-1 focus-visible:ring-gray-500"
      >
        <!-- Heroicons name: mini/minus -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0">
          <path fill-rule="evenodd" d="M4 10a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75A.75.75 0 014 10z" clip-rule="evenodd" />
        </svg>
      </button>
      <button
        class="flex w-10 shrink-0 items-center justify-center border border-gray-300 bg-gray-50 text-gray-500 focus:outline-0 focus-visible:border-gray-500 focus-visible:ring-1 focus-visible:ring-gray-500"
      >
        <!-- Heroicons name: mini/plus -->
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-5 shrink-0">
          <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
        </svg>
      </button>
    </div>
    <div class="mt-2 flex items-baseline justify-between text-gray-600">
      <span class="text-sm">(₺50/each)</span>
      <span class="text-base font-semibold">₺650</span>
    </div>
  </div>
</div>