Neobrutalism Tabs Base

<div class="border-b-2 border-black px-2">
      <div role="tablist" class="-mb-0.5 flex">
        <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"
        >
          Profile
        </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"
        >
          Account
        </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"
        >
          Notifications
        </button>
      </div>
    </div>

    <div role="tabpanel" class="mt-4">
      <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>