Neobrutalism Textareas Actions inside

<div>
      <label for="Notes">
        <span class="text-sm font-semibold"> Notes </span>

        <div
          class="relative mt-0.5 overflow-hidden border-2 border-black shadow-[4px_4px_0_0] focus-within:ring-2 focus-within:ring-yellow-300"
        >
          <textarea
            id="Notes"
            class="w-full resize-none border-0 focus:ring-0 sm:text-sm"
            rows="4"
          ></textarea>

          <div class="flex items-center justify-end gap-3 border-t-2 border-black p-3">
            <button
              type="button"
              class="border-2 px-3 py-1.5 text-sm font-semibold shadow-[2px_2px_0_0] hover:bg-yellow-100 focus:ring-2 focus:ring-yellow-300 focus:outline-0"
            >
              Clear
            </button>

            <button
              type="button"
              class="border-2 bg-yellow-300 px-3 py-1.5 text-sm font-semibold shadow-[2px_2px_0_0] hover:bg-yellow-400 focus:bg-yellow-300 focus:ring-2 focus:ring-yellow-300 focus:outline-0"
            >
              Save
            </button>
          </div>
        </div>
      </label>
    </div>