Tab Customization | HeroUI | Page 1

Trying to achieve this design in tab almost there but cant have a selected left border in purple color on active tab

      selectedKey={selected}
      //@ts-ignore
      onSelectionChange={setSelected}
      isVertical
      color="secondary"
      classNames={{
        tabList: "rounded-lg gap-0 w-full relative rounded-none p-0 flex-col mt-2  ",
        tab: `rounded-lg justify-start bg-white dark:bg-content1 p-8  w-[190px]  h-[70px]  `,
      }}
    >
      <Tab
        key="profile"
        title={
          <div className="flex flex-row space-x-3 justify-start items-start">
            <Cog6ToothIcon className="h-5 w-5" />
            <h3 className="font-semibold text-sm dark:text-white">Profile Settings</h3>
          </div>
        }
      >
        <OrganizationProfile />
      </Tab>```

      selectedKey={selected}
      //@ts-ignore
      onSelectionChange={setSelected}
      isVertical
      variant="underlined"
      color="secondary"
      classNames={{
        cursor: "w-[2px] h-full left-0",
        tabList: "rounded-lg gap-0 w-full relative rounded-none p-0 flex-col mt-2  ",
        tab: ` justify-start bg-white dark:bg-content1 p-8 data-[selected=true]:bg-default/60  w-[190px]  h-[70px]  `,
      }}
    >```

#Tab Customization