Neobrutalism Tabs Pills

<div>
      <div role="tablist" class="-mb-0.5 flex gap-3">
        <button
          role="tab"
          aria-selected="true"
          class="border-2 border-black bg-yellow-300 px-6 py-2 font-semibold text-black shadow-[4px_4px_0_0] focus:ring-2 focus:ring-yellow-300 focus:outline-0"
        >
          Profile
        </button>

        <button
          role="tab"
          aria-selected="false"
          class="border-2 border-black px-6 py-2 font-semibold shadow-[4px_4px_0_0] hover:translate-1 hover:shadow-none focus:ring-2 focus:ring-yellow-300 focus:outline-0"
        >
          Account
        </button>

        <button
          role="tab"
          aria-selected="false"
          class="border-2 border-black px-6 py-2 font-semibold shadow-[4px_4px_0_0] hover:translate-1 hover:shadow-none 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>