Groups not working as intended with links.

[PruthviPraj00]

Hello,

I encountered this issue while building a project where using groups with links does not work as intended.

To reproduce, just copy and paste the code below into the Tailwind CSS playground.

<!-- Include this script tag or install `@tailwindplus/elements` via npm: -->
<!-- <script src="https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1" type="module"></script> -->
<nav class="bg-gray-800">
  <div class="flex space-x-4">
    <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" -->
    <a href="#" aria-current="page" class="group flex gap-1.25 rounded-md px-3 py-2 text-sm font-medium text-white"
      >Dashboard
      <span class="hidden group-hover:block">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M6.76875 4.04408C6.82142 4.13979 6.93581 4.17985 7.02881 4.23717L7.86505 4.75266C7.90644 4.7793 7.94049 4.81591 7.96407 4.85912C7.98764 4.90233 8 4.95077 8 5C8 5.04923 7.98764 5.09767 7.96407 5.14088C7.94049 5.18409 7.90644 5.2207 7.86505 5.24734L6.88907 5.78212C6.83788 5.8029 6.79539 5.84066 6.76875 5.88907L6.24733 6.86505C6.22069 6.90644 6.18409 6.94049 6.14088 6.96407C6.09767 6.98764 6.04923 7 6 7C5.95077 7 5.90233 6.98764 5.85912 6.96407C5.81591 6.94049 5.7793 6.90644 5.75266 6.86505L5.21789 5.88907C5.19327 5.84387 5.15613 5.80673 5.11093 5.78212L4.13495 5.24734C4.09356 5.2207 4.05951 5.18409 4.03593 5.14088C4.01235 5.09767 4 5.04923 4 5C4 4.95077 4.01235 4.90233 4.03593 4.85912C4.05951 4.81591 4.09356 4.7793 4.13495 4.75266L5.11093 4.21788C5.15613 4.19327 5.19327 4.15613 5.21789 4.11093L5.75266 3.13495C5.7793 3.09356 5.81591 3.05951 5.85912 3.03593C5.90233 3.01235 5.95077 3 6 3C6.04923 3 6.09767 3.01235 6.14088 3.03593C6.18409 3.05951 6.22069 3.09356 6.24733 3.13495L6.76875 4.04408ZM9.42704 12.7237L12.3835 14.2892C12.5195 14.3659 12.632 14.4782 12.7087 14.6141L14.2757 17.5678C14.3428 17.698 14.4445 17.8072 14.5697 17.8834C14.6949 17.9597 14.8386 18 14.9852 18C15.1318 18 15.2756 17.9597 15.4007 17.8834C15.5259 17.8072 15.6276 17.698 15.6948 17.5678L17.2913 14.6141C17.321 14.541 17.3651 14.4745 17.421 14.4187C17.4768 14.3629 17.5433 14.3189 17.6165 14.2892L20.5729 12.7237C20.7023 12.6522 20.8102 12.5473 20.8853 12.42C20.9604 12.2928 21 12.1477 21 12C21 11.8523 20.9604 11.7072 20.8853 11.58C20.8102 11.4527 20.7023 11.3479 20.5729 11.2763L17.6165 9.71083C17.4805 9.63414 17.368 9.52179 17.2913 9.38592L15.6948 6.43216C15.6276 6.30198 15.5259 6.19279 15.4007 6.11656C15.2756 6.04033 15.1318 6 14.9852 6C14.8386 6 14.6949 6.04033 14.5697 6.11656C14.4445 6.19279 14.3428 6.30198 14.2757 6.43216L12.8165 9.18281C12.745 9.31746 12.6539 9.44069 12.5461 9.54842C12.4383 9.65609 12.3151 9.74708 12.1804 9.81836L9.42704 11.2763C9.29766 11.3479 9.18981 11.4527 9.11471 11.58C9.03961 11.7072 9 11.8523 9 12C9 12.1477 9.03961 12.2928 9.11471 12.42C9.18981 12.5473 9.29766 12.6522 9.42704 12.7237ZM7.54321 16.8558C7.40372 16.7698 7.23213 16.7097 7.15312 16.5661L6.371 15.2024C6.33104 15.1403 6.27614 15.0893 6.21132 15.0539C6.1465 15.0185 6.07384 15 6 15C5.92616 15 5.8535 15.0185 5.78868 15.0539C5.72386 15.0893 5.66895 15.1403 5.62899 15.2024L4.82683 16.6664C4.7899 16.7342 4.73419 16.7899 4.66639 16.8268L3.20243 17.629C3.14034 17.669 3.08926 17.7239 3.05389 17.7887C3.01853 17.8535 3 17.9262 3 18C3 18.0738 3.01853 18.1465 3.05389 18.2113C3.08926 18.2761 3.14034 18.331 3.20243 18.371L4.66639 19.1732C4.73419 19.2101 4.7899 19.2658 4.82683 19.3336L5.62899 20.7976C5.66895 20.8597 5.72386 20.9107 5.78868 20.9461C5.8535 20.9815 5.92616 21 6 21C6.07384 21 6.1465 20.9815 6.21132 20.9461C6.27614 20.9107 6.33104 20.8597 6.371 20.7976L7.15312 19.3336C7.19308 19.261 7.25681 19.2043 7.33361 19.1732L8.79757 18.371C8.85966 18.331 8.91073 18.2761 8.9461 18.2113C8.98146 18.1465 9 18.0738 9 18C9 17.9262 8.98146 17.8535 8.9461 17.7887C8.91073 17.7239 8.85966 17.669 8.79757 17.629L7.54321 16.8558Z" fill="url(#paint0_linear_17031_229063)" />
          <defs>
            <linearGradient id="paint0_linear_17031_229063" x1="12" y1="3" x2="12" y2="21" gradientUnits="userSpaceOnUse">
              <stop offset="0.0279863" stop-color="#D8B4FE" />
              <stop offset="0.509615" stop-color="#C084FC" />
              <stop offset="1" stop-color="var(--color-primary)" />
            </linearGradient>
          </defs>
        </svg> </span
    ></a>
    <a href="#" class="group flex gap-1.25 rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
      >Team
      <span class="hidden group-hover:block">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M6.76875 4.04408C6.82142 4.13979 6.93581 4.17985 7.02881 4.23717L7.86505 4.75266C7.90644 4.7793 7.94049 4.81591 7.96407 4.85912C7.98764 4.90233 8 4.95077 8 5C8 5.04923 7.98764 5.09767 7.96407 5.14088C7.94049 5.18409 7.90644 5.2207 7.86505 5.24734L6.88907 5.78212C6.83788 5.8029 6.79539 5.84066 6.76875 5.88907L6.24733 6.86505C6.22069 6.90644 6.18409 6.94049 6.14088 6.96407C6.09767 6.98764 6.04923 7 6 7C5.95077 7 5.90233 6.98764 5.85912 6.96407C5.81591 6.94049 5.7793 6.90644 5.75266 6.86505L5.21789 5.88907C5.19327 5.84387 5.15613 5.80673 5.11093 5.78212L4.13495 5.24734C4.09356 5.2207 4.05951 5.18409 4.03593 5.14088C4.01235 5.09767 4 5.04923 4 5C4 4.95077 4.01235 4.90233 4.03593 4.85912C4.05951 4.81591 4.09356 4.7793 4.13495 4.75266L5.11093 4.21788C5.15613 4.19327 5.19327 4.15613 5.21789 4.11093L5.75266 3.13495C5.7793 3.09356 5.81591 3.05951 5.85912 3.03593C5.90233 3.01235 5.95077 3 6 3C6.04923 3 6.09767 3.01235 6.14088 3.03593C6.18409 3.05951 6.22069 3.09356 6.24733 3.13495L6.76875 4.04408ZM9.42704 12.7237L12.3835 14.2892C12.5195 14.3659 12.632 14.4782 12.7087 14.6141L14.2757 17.5678C14.3428 17.698 14.4445 17.8072 14.5697 17.8834C14.6949 17.9597 14.8386 18 14.9852 18C15.1318 18 15.2756 17.9597 15.4007 17.8834C15.5259 17.8072 15.6276 17.698 15.6948 17.5678L17.2913 14.6141C17.321 14.541 17.3651 14.4745 17.421 14.4187C17.4768 14.3629 17.5433 14.3189 17.6165 14.2892L20.5729 12.7237C20.7023 12.6522 20.8102 12.5473 20.8853 12.42C20.9604 12.2928 21 12.1477 21 12C21 11.8523 20.9604 11.7072 20.8853 11.58C20.8102 11.4527 20.7023 11.3479 20.5729 11.2763L17.6165 9.71083C17.4805 9.63414 17.368 9.52179 17.2913 9.38592L15.6948 6.43216C15.6276 6.30198 15.5259 6.19279 15.4007 6.11656C15.2756 6.04033 15.1318 6 14.9852 6C14.8386 6 14.6949 6.04033 14.5697 6.11656C14.4445 6.19279 14.3428 6.30198 14.2757 6.43216L12.8165 9.18281C12.745 9.31746 12.6539 9.44069 12.5461 9.54842C12.4383 9.65609 12.3151 9.74708 12.1804 9.81836L9.42704 11.2763C9.29766 11.3479 9.18981 11.4527 9.11471 11.58C9.03961 11.7072 9 11.8523 9 12C9 12.1477 9.03961 12.2928 9.11471 12.42C9.18981 12.5473 9.29766 12.6522 9.42704 12.7237ZM7.54321 16.8558C7.40372 16.7698 7.23213 16.7097 7.15312 16.5661L6.371 15.2024C6.33104 15.1403 6.27614 15.0893 6.21132 15.0539C6.1465 15.0185 6.07384 15 6 15C5.92616 15 5.8535 15.0185 5.78868 15.0539C5.72386 15.0893 5.66895 15.1403 5.62899 15.2024L4.82683 16.6664C4.7899 16.7342 4.73419 16.7899 4.66639 16.8268L3.20243 17.629C3.14034 17.669 3.08926 17.7239 3.05389 17.7887C3.01853 17.8535 3 17.9262 3 18C3 18.0738 3.01853 18.1465 3.05389 18.2113C3.08926 18.2761 3.14034 18.331 3.20243 18.371L4.66639 19.1732C4.73419 19.2101 4.7899 19.2658 4.82683 19.3336L5.62899 20.7976C5.66895 20.8597 5.72386 20.9107 5.78868 20.9461C5.8535 20.9815 5.92616 21 6 21C6.07384 21 6.1465 20.9815 6.21132 20.9461C6.27614 20.9107 6.33104 20.8597 6.371 20.7976L7.15312 19.3336C7.19308 19.261 7.25681 19.2043 7.33361 19.1732L8.79757 18.371C8.85966 18.331 8.91073 18.2761 8.9461 18.2113C8.98146 18.1465 9 18.0738 9 18C9 17.9262 8.98146 17.8535 8.9461 17.7887C8.91073 17.7239 8.85966 17.669 8.79757 17.629L7.54321 16.8558Z" fill="url(#paint0_linear_17031_229063)" />
          <defs>
            <linearGradient id="paint0_linear_17031_229063" x1="12" y1="3" x2="12" y2="21" gradientUnits="userSpaceOnUse">
              <stop offset="0.0279863" stop-color="#D8B4FE" />
              <stop offset="0.509615" stop-color="#C084FC" />
              <stop offset="1" stop-color="var(--color-primary)" />
            </linearGradient>
          </defs>
        </svg> </span
    ></a>
    <a href="#" class="group flex gap-1.25 rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
      >Projects
      <span class="hidden group-hover:block">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M6.76875 4.04408C6.82142 4.13979 6.93581 4.17985 7.02881 4.23717L7.86505 4.75266C7.90644 4.7793 7.94049 4.81591 7.96407 4.85912C7.98764 4.90233 8 4.95077 8 5C8 5.04923 7.98764 5.09767 7.96407 5.14088C7.94049 5.18409 7.90644 5.2207 7.86505 5.24734L6.88907 5.78212C6.83788 5.8029 6.79539 5.84066 6.76875 5.88907L6.24733 6.86505C6.22069 6.90644 6.18409 6.94049 6.14088 6.96407C6.09767 6.98764 6.04923 7 6 7C5.95077 7 5.90233 6.98764 5.85912 6.96407C5.81591 6.94049 5.7793 6.90644 5.75266 6.86505L5.21789 5.88907C5.19327 5.84387 5.15613 5.80673 5.11093 5.78212L4.13495 5.24734C4.09356 5.2207 4.05951 5.18409 4.03593 5.14088C4.01235 5.09767 4 5.04923 4 5C4 4.95077 4.01235 4.90233 4.03593 4.85912C4.05951 4.81591 4.09356 4.7793 4.13495 4.75266L5.11093 4.21788C5.15613 4.19327 5.19327 4.15613 5.21789 4.11093L5.75266 3.13495C5.7793 3.09356 5.81591 3.05951 5.85912 3.03593C5.90233 3.01235 5.95077 3 6 3C6.04923 3 6.09767 3.01235 6.14088 3.03593C6.18409 3.05951 6.22069 3.09356 6.24733 3.13495L6.76875 4.04408ZM9.42704 12.7237L12.3835 14.2892C12.5195 14.3659 12.632 14.4782 12.7087 14.6141L14.2757 17.5678C14.3428 17.698 14.4445 17.8072 14.5697 17.8834C14.6949 17.9597 14.8386 18 14.9852 18C15.1318 18 15.2756 17.9597 15.4007 17.8834C15.5259 17.8072 15.6276 17.698 15.6948 17.5678L17.2913 14.6141C17.321 14.541 17.3651 14.4745 17.421 14.4187C17.4768 14.3629 17.5433 14.3189 17.6165 14.2892L20.5729 12.7237C20.7023 12.6522 20.8102 12.5473 20.8853 12.42C20.9604 12.2928 21 12.1477 21 12C21 11.8523 20.9604 11.7072 20.8853 11.58C20.8102 11.4527 20.7023 11.3479 20.5729 11.2763L17.6165 9.71083C17.4805 9.63414 17.368 9.52179 17.2913 9.38592L15.6948 6.43216C15.6276 6.30198 15.5259 6.19279 15.4007 6.11656C15.2756 6.04033 15.1318 6 14.9852 6C14.8386 6 14.6949 6.04033 14.5697 6.11656C14.4445 6.19279 14.3428 6.30198 14.2757 6.43216L12.8165 9.18281C12.745 9.31746 12.6539 9.44069 12.5461 9.54842C12.4383 9.65609 12.3151 9.74708 12.1804 9.81836L9.42704 11.2763C9.29766 11.3479 9.18981 11.4527 9.11471 11.58C9.03961 11.7072 9 11.8523 9 12C9 12.1477 9.03961 12.2928 9.11471 12.42C9.18981 12.5473 9.29766 12.6522 9.42704 12.7237ZM7.54321 16.8558C7.40372 16.7698 7.23213 16.7097 7.15312 16.5661L6.371 15.2024C6.33104 15.1403 6.27614 15.0893 6.21132 15.0539C6.1465 15.0185 6.07384 15 6 15C5.92616 15 5.8535 15.0185 5.78868 15.0539C5.72386 15.0893 5.66895 15.1403 5.62899 15.2024L4.82683 16.6664C4.7899 16.7342 4.73419 16.7899 4.66639 16.8268L3.20243 17.629C3.14034 17.669 3.08926 17.7239 3.05389 17.7887C3.01853 17.8535 3 17.9262 3 18C3 18.0738 3.01853 18.1465 3.05389 18.2113C3.08926 18.2761 3.14034 18.331 3.20243 18.371L4.66639 19.1732C4.73419 19.2101 4.7899 19.2658 4.82683 19.3336L5.62899 20.7976C5.66895 20.8597 5.72386 20.9107 5.78868 20.9461C5.8535 20.9815 5.92616 21 6 21C6.07384 21 6.1465 20.9815 6.21132 20.9461C6.27614 20.9107 6.33104 20.8597 6.371 20.7976L7.15312 19.3336C7.19308 19.261 7.25681 19.2043 7.33361 19.1732L8.79757 18.371C8.85966 18.331 8.91073 18.2761 8.9461 18.2113C8.98146 18.1465 9 18.0738 9 18C9 17.9262 8.98146 17.8535 8.9461 17.7887C8.91073 17.7239 8.85966 17.669 8.79757 17.629L7.54321 16.8558Z" fill="url(#paint0_linear_17031_229063)" />
          <defs>
            <linearGradient id="paint0_linear_17031_229063" x1="12" y1="3" x2="12" y2="21" gradientUnits="userSpaceOnUse">
              <stop offset="0.0279863" stop-color="#D8B4FE" />
              <stop offset="0.509615" stop-color="#C084FC" />
              <stop offset="1" stop-color="var(--color-primary)" />
            </linearGradient>
          </defs>
        </svg> </span
    ></a>
    <a href="#" class="group flex gap-1.25 rounded-md px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white"
      >Calendar
      <span class="hidden group-hover:block">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
          <path fill-rule="evenodd" clip-rule="evenodd" d="M6.76875 4.04408C6.82142 4.13979 6.93581 4.17985 7.02881 4.23717L7.86505 4.75266C7.90644 4.7793 7.94049 4.81591 7.96407 4.85912C7.98764 4.90233 8 4.95077 8 5C8 5.04923 7.98764 5.09767 7.96407 5.14088C7.94049 5.18409 7.90644 5.2207 7.86505 5.24734L6.88907 5.78212C6.83788 5.8029 6.79539 5.84066 6.76875 5.88907L6.24733 6.86505C6.22069 6.90644 6.18409 6.94049 6.14088 6.96407C6.09767 6.98764 6.04923 7 6 7C5.95077 7 5.90233 6.98764 5.85912 6.96407C5.81591 6.94049 5.7793 6.90644 5.75266 6.86505L5.21789 5.88907C5.19327 5.84387 5.15613 5.80673 5.11093 5.78212L4.13495 5.24734C4.09356 5.2207 4.05951 5.18409 4.03593 5.14088C4.01235 5.09767 4 5.04923 4 5C4 4.95077 4.01235 4.90233 4.03593 4.85912C4.05951 4.81591 4.09356 4.7793 4.13495 4.75266L5.11093 4.21788C5.15613 4.19327 5.19327 4.15613 5.21789 4.11093L5.75266 3.13495C5.7793 3.09356 5.81591 3.05951 5.85912 3.03593C5.90233 3.01235 5.95077 3 6 3C6.04923 3 6.09767 3.01235 6.14088 3.03593C6.18409 3.05951 6.22069 3.09356 6.24733 3.13495L6.76875 4.04408ZM9.42704 12.7237L12.3835 14.2892C12.5195 14.3659 12.632 14.4782 12.7087 14.6141L14.2757 17.5678C14.3428 17.698 14.4445 17.8072 14.5697 17.8834C14.6949 17.9597 14.8386 18 14.9852 18C15.1318 18 15.2756 17.9597 15.4007 17.8834C15.5259 17.8072 15.6276 17.698 15.6948 17.5678L17.2913 14.6141C17.321 14.541 17.3651 14.4745 17.421 14.4187C17.4768 14.3629 17.5433 14.3189 17.6165 14.2892L20.5729 12.7237C20.7023 12.6522 20.8102 12.5473 20.8853 12.42C20.9604 12.2928 21 12.1477 21 12C21 11.8523 20.9604 11.7072 20.8853 11.58C20.8102 11.4527 20.7023 11.3479 20.5729 11.2763L17.6165 9.71083C17.4805 9.63414 17.368 9.52179 17.2913 9.38592L15.6948 6.43216C15.6276 6.30198 15.5259 6.19279 15.4007 6.11656C15.2756 6.04033 15.1318 6 14.9852 6C14.8386 6 14.6949 6.04033 14.5697 6.11656C14.4445 6.19279 14.3428 6.30198 14.2757 6.43216L12.8165 9.18281C12.745 9.31746 12.6539 9.44069 12.5461 9.54842C12.4383 9.65609 12.3151 9.74708 12.1804 9.81836L9.42704 11.2763C9.29766 11.3479 9.18981 11.4527 9.11471 11.58C9.03961 11.7072 9 11.8523 9 12C9 12.1477 9.03961 12.2928 9.11471 12.42C9.18981 12.5473 9.29766 12.6522 9.42704 12.7237ZM7.54321 16.8558C7.40372 16.7698 7.23213 16.7097 7.15312 16.5661L6.371 15.2024C6.33104 15.1403 6.27614 15.0893 6.21132 15.0539C6.1465 15.0185 6.07384 15 6 15C5.92616 15 5.8535 15.0185 5.78868 15.0539C5.72386 15.0893 5.66895 15.1403 5.62899 15.2024L4.82683 16.6664C4.7899 16.7342 4.73419 16.7899 4.66639 16.8268L3.20243 17.629C3.14034 17.669 3.08926 17.7239 3.05389 17.7887C3.01853 17.8535 3 17.9262 3 18C3 18.0738 3.01853 18.1465 3.05389 18.2113C3.08926 18.2761 3.14034 18.331 3.20243 18.371L4.66639 19.1732C4.73419 19.2101 4.7899 19.2658 4.82683 19.3336L5.62899 20.7976C5.66895 20.8597 5.72386 20.9107 5.78868 20.9461C5.8535 20.9815 5.92616 21 6 21C6.07384 21 6.1465 20.9815 6.21132 20.9461C6.27614 20.9107 6.33104 20.8597 6.371 20.7976L7.15312 19.3336C7.19308 19.261 7.25681 19.2043 7.33361 19.1732L8.79757 18.371C8.85966 18.331 8.91073 18.2761 8.9461 18.2113C8.98146 18.1465 9 18.0738 9 18C9 17.9262 8.98146 17.8535 8.9461 17.7887C8.91073 17.7239 8.85966 17.669 8.79757 17.629L7.54321 16.8558Z" fill="url(#paint0_linear_17031_229063)" />
          <defs>
            <linearGradient id="paint0_linear_17031_229063" x1="12" y1="3" x2="12" y2="21" gradientUnits="userSpaceOnUse">
              <stop offset="0.0279863" stop-color="#D8B4FE" />
              <stop offset="0.509615" stop-color="#C084FC" />
              <stop offset="1" stop-color="var(--color-primary)" />
            </linearGradient>
          </defs>
        </svg> </span
    ></a>
  </div>
</nav>

I was trying to make an SVG visible when a link is hovered over, but it only works for the first link.

Now, for the other link, it only works when the first link is hovered, showing the image.

[adamwathan]

This is because your SVGs contain duplicate IDs, and IDs have to be unique in HTML:

https://play.tailwindcss.com/eyY04Apo6U

[PruthviPraj00]

Hello @adamwathan,

Thank you for your response!