<section
  class="flex h-screen place-content-center items-center bg-background px-4"
>
  <div class="flex w-fit max-md:w-[98%] place-content-center">
    <div
      class="inline-flex rounded-full items-center overflow-x-auto bg-accent/5 text-xs font-medium [scrollbar-width:none] md:overflow-hidden md:text-sm [&::-webkit-scrollbar]:hidden"
    >
      <button
        role="tab"
        class="inline-flex items-center space-x-1 bg-primary px-5 py-2 text-primary-foreground transition ease-in-out rounded-full md:px-10"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-4 w-4 md:h-6 md:w-6"
          viewBox="0 0 24 24"
          fill="currentColor"
        
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <path
            d="M12.707 2.293l9 9c.63 .63 .184 1.707 -.707 1.707h-1v6a3 3 0 0 1 -3 3h-1v-7a3 3 0 0 0 -2.824 -2.995l-.176 -.005h-2a3 3 0 0 0 -3 3v7h-1a3 3 0 0 1 -3 -3v-6h-1c-.89 0 -1.337 -1.077 -.707 -1.707l9 -9a1 1 0 0 1 1.414 0m.293 11.707a1 1 0 0 1 1 1v7h-4v-7a1 1 0 0 1 .883 -.993l.117 -.007z"
          />
        </svg>
        <span>Home</span>
      </button>
      <button
        role="tab"
        class="inline-flex items-center space-x-1 px-5 py-2 transition ease-in-out rounded-full hover:bg-accent/20 md:px-10"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-4 w-4 md:h-6 md:w-6"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <path
            d="M4 4m0 2a2 2 0 0 1 2 -2h12a2 2 0 0 1 2 2v12a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2z"
          />
          <path d="M8 4l0 16" />
          <path d="M16 4l0 16" />
          <path d="M4 8l4 0" />
          <path d="M4 16l4 0" />
          <path d="M4 12l16 0" />
          <path d="M16 8l4 0" />
          <path d="M16 16l4 0" />
        </svg>
        <span>Videos</span>
        <span
        class="flex h-4 w-4 place-content-center items-center rounded-full bg-accent/10 text-xs"
        >2</span
      >
      </button>
      <button
        role="tab"
        class="inline-flex items-center space-x-1 px-5 py-2 transition ease-in-out rounded-full hover:bg-accent/20 md:px-10"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-4 w-4 md:h-6 md:w-6"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <path d="M3 17a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
          <path d="M13 17a3 3 0 1 0 6 0a3 3 0 0 0 -6 0" />
          <path d="M9 17v-13h10v13" />
          <path d="M9 8h10" />
        </svg>
        <span>Music</span>
        <span
        class="flex h-4 w-4 place-content-center items-center rounded-full bg-accent/10 text-xs"
        >2</span
      >
      </button>
      <button
        role="tab"
        class="inline-flex items-center space-x-1 px-5 py-2 transition ease-in-out rounded-full hover:bg-accent/20 md:px-10"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-4 w-4 md:h-6 md:w-6"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        "
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" />
          <path d="M12 10m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0" />
          <path
            d="M6.168 18.849a4 4 0 0 1 3.832 -2.849h4a4 4 0 0 1 3.834 2.855"
          />
        </svg>
        <span>Profile</span>
      </button>
      <button
        role="tab"
        class="inline-flex items-center space-x-1 px-5 py-2 transition ease-in-out rounded-full hover:bg-accent/20 md:px-10"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="h-4 w-4 md:h-6 md:w-6"
          viewBox="0 0 24 24"
          fill="currentColor"
        
        >
          <path stroke="none" d="M0 0h24v24H0z" fill="none" />
          <path
            d="M14.647 4.081a.724 .724 0 0 0 1.08 .448c2.439 -1.485 5.23 1.305 3.745 3.744a.724 .724 0 0 0 .447 1.08c2.775 .673 2.775 4.62 0 5.294a.724 .724 0 0 0 -.448 1.08c1.485 2.439 -1.305 5.23 -3.744 3.745a.724 .724 0 0 0 -1.08 .447c-.673 2.775 -4.62 2.775 -5.294 0a.724 .724 0 0 0 -1.08 -.448c-2.439 1.485 -5.23 -1.305 -3.745 -3.744a.724 .724 0 0 0 -.447 -1.08c-2.775 -.673 -2.775 -4.62 0 -5.294a.724 .724 0 0 0 .448 -1.08c-1.485 -2.439 1.305 -5.23 3.744 -3.745a.722 .722 0 0 0 1.08 -.447c.673 -2.775 4.62 -2.775 5.294 0zm-2.647 4.919a3 3 0 1 0 0 6a3 3 0 0 0 0 -6z"
          />
        </svg>
        <span>Settings</span>
      </button>
    </div>
  </div>
</section>
#Simple Tabs

#Underlined Tabs

#Tabs with Icons

#Underlined Tabs with Icons

#Pilled Tabs with Badge

#Pilled Tabs with Badge & icon
