Neobrutalism Tabs Contained

<div class="border-b-2 border-black">
      <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-0.5 border-2 border-black p-4 shadow-[4px_4px_0_0]">
      <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>