Neobrutalism Tabs Vertical

<div class="flex gap-8">
      <div class="border-r-2 border-black py-2">
        <div role="tablist" class="-mr-0.5 flex flex-col">
          <button
            role="tab"
            aria-selected="true"
            class="border-2 border-black bg-yellow-300 px-6 py-2 font-semibold text-black focus:ring-2 focus:ring-yellow-300 focus:outline-0"
          >
            General
          </button>

          <button
            role="tab"
            aria-selected="false"
            class="border-2 border-transparent px-6 py-2 font-semibold hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0"
          >
            Privacy
          </button>

          <button
            role="tab"
            aria-selected="false"
            class="border-2 border-transparent px-6 py-2 font-semibold hover:bg-black hover:text-white focus:ring-2 focus:ring-yellow-300 focus:outline-0"
          >
            Security
          </button>
        </div>
      </div>

      <div role="tabpanel" class="flex-1 py-2">
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt similique, quae hic
          dicta quo facere facilis praesentium a sunt, est quia pariatur nam, modi aut minus iste
          odio consectetur molestias iusto cupiditate ullam laborum veniam quos officia. Quos,
          temporibus perspiciatis!
        </p>
      </div>
    </div>