Radio-buttons | Safvan tsy rare eagle 99

<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<div class="flex gap-2 p-2">
  <div>
    <input
      class="peer sr-only"
      value="male"
      name="gender"
      id="male"
      type="radio"
    />
    <div
      class="flex h-16 w-24 cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-gray-300 bg-gray-50 p-1 transition-transform duration-150 hover:border-blue-400 active:scale-95 peer-checked:border-blue-500 peer-checked:shadow-md peer-checked:shadow-blue-400"
    >
      <label
        class="flex cursor-pointer items-center justify-center text-sm uppercase text-gray-500 peer-checked:text-blue-500"
        for="male"
      >
        <svg
          viewBox="0 0 100000 100000"
          text-rendering="geometricPrecision"
          shape-rendering="geometricPrecision"
          image-rendering="optimizeQuality"
          clip-rule="evenodd"
          fill-rule="evenodd"
          class="h-8 w-8 fill-current peer-checked:fill-blue-500"