Home
ᴀʀ!ᴀ
Brand Grid with Hover Effect

Brand Grid with Hover Effect

This tailwind example is contributed by ᴀʀ!ᴀ, on 18-Mar-2025. Component is made with Tailwind CSS v3. It is responsive.

253

<div class="flex items-center justify-center">
  <div class="mx-auto w-full max-w-7xl">
    <div class="grid grid-cols-2 gap-2 p-2 text-center sm:grid-cols-3 md:grid-cols-4 md:p-5 lg:grid-cols-6">
      
      <a href="#" class="group relative flex h-[200px] w-full flex-col items-center justify-center overflow-hidden rounded-xl transition-all duration-300 hover:shadow-lg">
        <div class="relative z-0 h-[100px] w-[100px] rounded-full">
          
          <div class="absolute inset-0 translate-z-0 rounded-full transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)] group-hover:scale-[4] group-hover:bg-[#0070CC]"></div>
          
          <div class="absolute inset-0 z-10 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-52 text-[#0070CC] transition-all duration-500 group-hover:scale-110 group-hover:text-white" viewBox="0 0 24 24"><path fill="currentColor" d="M22.585 17.011c-.43.543-1.483.93-1.483.93l-7.832 2.817V18.68l5.764-2.057c.654-.234.754-.566.223-.74s-1.492-.125-2.147.111l-3.84 1.354v-2.155l.221-.076s1.11-.393 2.67-.566c1.561-.172 3.472.024 4.972.593c1.69.535 1.88 1.323 1.452 1.866m-8.57-3.537V8.162c0-.624-.115-1.198-.7-1.36c-.447-.144-.725.272-.725.895V21l-3.583-1.139V4c1.523.283 3.743.953 4.936 1.355c3.035 1.043 4.064 2.342 4.064 5.267c0 2.851-1.758 3.932-3.992 2.852m-11.583 4.99c-1.736-.49-2.025-1.51-1.234-2.097c.731-.542 1.975-.95 1.975-.95l5.138-1.83v2.086l-3.698 1.325c-.653.234-.753.566-.223.74c.532.175 1.493.125 2.147-.11l1.774-.644v1.865l-.354.06c-1.774.29-3.663.169-5.525-.445" /></svg>
          </div>
        </div>
        
        <h2 class="z-10 mt-4 text-xl transition-all duration-500 group-hover:text-white">Playstation</h2>
      </a>

<a href="#" class="group relative flex h-[200px] w-full flex-col items-center justify-center overflow-hidden rounded-xl transition-all duration-300 hover:shadow-lg">
        <div class="relative z-0 h-[100px] w-[100px] rounded-full">
          
          <div class="absolute inset-0 translate-z-0 rounded-full transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)] group-hover:scale-[4] group-hover:bg-[#0C7A1F]"></div>
          
          <div class="absolute inset-0 z-10 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-52 text-[#0C7A1F] transition-all duration-500 group-hover:scale-110 group-hover:text-white" viewBox="0 0 24 24">
              <path fill="currentColor" d="M5.42 19.528A9.96 9.96 0 0 0 12 22a9.97 9.97 0 0 0 6.585-2.472c1.564-1.594-3.597-7.258-6.585-9.515c-2.985 2.257-8.15 7.921-6.582 9.515m9.3-12.005c2.083 2.467 6.236 8.594 5.063 10.76A9.95 9.95 0 0 0 22 12.002a9.96 9.96 0 0 0-2.975-7.113s-.023-.018-.068-.035a.7.7 0 0 0-.234-.038c-.494 0-1.655.362-4.005 2.706M5.045 4.855c-.048.017-.068.034-.072.035A9.96 9.96 0 0 0 2 12.003c0 2.379.832 4.561 2.217 6.278C3.051 16.11 7.201 9.988 9.285 7.523C6.935 5.178 5.772 4.818 5.28 4.818a.6.6 0 0 0-.234.039zM12 4.959S9.546 3.523 7.63 3.455c-.753-.027-1.213.246-1.268.282C8.15 2.539 10.05 2 11.988 2H12c1.945 0 3.838.538 5.638 1.737c-.056-.038-.512-.31-1.266-.282c-1.917.068-4.372 1.5-4.372 1.5z" />
            </svg>
          </div>
        </div>
        
        <h2 class="z-10 mt-4 text-xl transition-all duration-500 group-hover:text-white">Xbox</h2>
      </a>

<a href="#" class="group relative flex h-[200px] w-full flex-col items-center justify-center overflow-hidden rounded-xl transition-all duration-300 hover:shadow-lg">
        <div class="relative z-0 h-[100px] w-[100px] rounded-full">
          
          <div class="absolute inset-0 translate-z-0 rounded-full transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)] group-hover:scale-[4] group-hover:bg-[#000000]"></div>
          
          <div class="absolute inset-0 z-10 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-52 text-[#000000] transition-all duration-500 group-hover:scale-110 group-hover:text-white" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2a10 10 0 0 1 10 10a10 10 0 0 1-10 10c-4.6 0-8.45-3.08-9.64-7.27l3.83 1.58a2.84 2.84 0 0 0 2.78 2.27c1.56 0 2.83-1.27 2.83-2.83v-.13l3.4-2.43h.08c2.08 0 3.77-1.69 3.77-3.77s-1.69-3.77-3.77-3.77s-3.78 1.69-3.78 3.77v.05l-2.37 3.46l-.16-.01c-.59 0-1.14.18-1.59.49L2 11.2C2.43 6.05 6.73 2 12 2M8.28 17.17c.8.33 1.72-.04 2.05-.84s-.05-1.71-.83-2.04l-1.28-.53c.49-.18 1.04-.19 1.56.03c.53.21.94.62 1.15 1.15c.22.52.22 1.1 0 1.62c-.43 1.08-1.7 1.6-2.78 1.15c-.5-.21-.88-.59-1.09-1.04zm9.52-7.75c0 1.39-1.13 2.52-2.52 2.52a2.52 2.52 0 0 1-2.51-2.52a2.5 2.5 0 0 1 2.51-2.51a2.52 2.52 0 0 1 2.52 2.51m-4.4 0c0 1.04.84 1.89 1.89 1.89c1.04 0 1.88-.85 1.88-1.89s-.84-1.89-1.88-1.89c-1.05 0-1.89.85-1.89 1.89" /></svg>
          </div>
        </div>
        
        <h2 class="z-10 mt-4 text-xl transition-all duration-500 group-hover:text-white">Steam</h2>
      </a>

<a href="#" class="group relative flex h-[200px] w-full flex-col items-center justify-center overflow-hidden rounded-xl transition-all duration-300 hover:shadow-lg">
        <div class="relative z-0 h-[100px] w-[100px] rounded-full">
          
          <div class="absolute inset-0 translate-z-0 rounded-full transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)] group-hover:scale-[4] group-hover:bg-[#5865F2]"></div>
          
          <div class="absolute inset-0 z-10 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-52 text-[#5865F2] transition-all duration-500 group-hover:scale-110 group-hover:text-white" viewBox="0 0 24 24"><path fill="currentColor" d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.1.1 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.1 16.1 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02M8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12m6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12" /></svg>
          </div>
        </div>
        
        <h2 class="z-10 mt-4 text-xl transition-all duration-500 group-hover:text-white">Discord</h2>
      </a>

<a href="#" class="group relative flex h-[200px] w-full flex-col items-center justify-center overflow-hidden rounded-xl transition-all duration-300 hover:shadow-lg">
        <div class="relative z-0 h-[100px] w-[100px] rounded-full">
          
          <div class="absolute inset-0 translate-z-0 rounded-full transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)] group-hover:scale-[4] group-hover:bg-[#F37422]"></div>
          
          <div class="absolute inset-0 z-10 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-52 text-[#F37422] transition-all duration-500 group-hover:scale-110 group-hover:text-white" viewBox="0 0 640 512"><path fill="currentColor" d="M639.8 298.6c-1.3 23.1-11.5 44.8-28.4 60.5s-39.2 24.4-62.3 24.1h-218c-4.8 0-9.4-2-12.8-5.4s-5.3-8-5.3-12.8V130.2c-.2-4 .9-8 3.1-11.4s5.3-6.1 9-7.7c0 0 20.1-13.9 62.3-13.9c25.8 0 51.1 6.9 73.3 20.1c17.3 10.2 32.3 23.8 44.1 40.1s20 34.8 24.2 54.4c7.5-2.1 15.3-3.2 23.1-3.2c11.7-.1 23.3 2.2 34.2 6.7s20.5 11.3 28.7 19.7s14.6 18.3 18.9 29.3s6.3 22.6 5.9 34.3m-354-153.5c.1-1 0-2-.3-2.9s-.8-1.8-1.5-2.6s-1.5-1.3-2.4-1.7s-1.9-.6-2.9-.6s-2 .2-2.9.6s-1.7 1-2.4 1.7s-1.2 1.6-1.5 2.6s-.4 1.9-.3 2.9c-6 78.9-10.6 152.9 0 231.6c.2 1.7 1 3.3 2.3 4.5s3 1.8 4.7 1.8s3.4-.6 4.7-1.8s2.1-2.8 2.3-4.5c11.3-79.4 6.6-152 0-231.6zm-44 27.3c-.2-1.8-1.1-3.5-2.4-4.7s-3.1-1.9-5-1.9s-3.6.7-5 1.9s-2.2 2.9-2.4 4.7c-7.9 67.9-7.9 136.5 0 204.4c.3 1.8 1.2 3.4 2.5 4.5s3.1 1.8 4.8 1.8s3.5-.6 4.8-1.8s2.2-2.8 2.5-4.5c8.8-67.8 8.8-136.5.1-204.4zm-44.3-6.9c-.2-1.8-1-3.4-2.3-4.6s-3-1.8-4.8-1.8s-3.5.7-4.8 1.8s-2.1 2.8-2.3 4.6c-6.7 72-10.2 139.3 0 211.1c0 1.9.7 3.7 2.1 5s3.1 2.1 5 2.1s3.7-.7 5-2.1s2.1-3.1 2.1-5c10.5-72.8 7.3-138.2.1-211.1zm-44 20.6c0-1.9-.8-3.8-2.1-5.2s-3.2-2.1-5.2-2.1s-3.8.8-5.2 2.1s-2.1 3.2-2.1 5.2c-8.1 63.3-8.1 127.5 0 190.8c.2 1.8 1 3.4 2.4 4.6s3.1 1.9 4.8 1.9s3.5-.7 4.8-1.9s2.2-2.8 2.4-4.6c8.8-63.3 8.9-127.5.3-190.8zM109 233.7c0-1.9-.8-3.8-2.1-5.1s-3.2-2.1-5.1-2.1s-3.8.8-5.1 2.1s-2.1 3.2-2.1 5.1c-10.5 49.2-5.5 93.9.4 143.6c.3 1.6 1.1 3.1 2.3 4.2s2.8 1.7 4.5 1.7s3.2-.6 4.5-1.7s2.1-2.5 2.3-4.2c6.6-50.4 11.6-94.1.4-143.6m-44.1-7.5c-.2-1.8-1.1-3.5-2.4-4.8s-3.2-1.9-5-1.9s-3.6.7-5 1.9s-2.2 2.9-2.4 4.8c-9.3 50.2-6.2 94.4.3 144.5c.7 7.6 13.6 7.5 14.4 0c7.2-50.9 10.5-93.8.3-144.5zm-44.6 24.6c-.2-1.8-1.1-3.5-2.4-4.8s-3.2-1.9-5-1.9s-3.6.7-5 1.9s-2.3 2.9-2.4 4.8c-8.5 33.7-5.9 61.6.6 95.4c.2 1.7 1 3.3 2.3 4.4s2.9 1.8 4.7 1.8s3.4-.6 4.7-1.8s2.1-2.7 2.3-4.4c7.5-34.5 11.2-61.8.4-95.4z" /></svg>
          </div>
        </div>
        
        <h2 class="z-10 mt-4 text-xl transition-all duration-500 group-hover:text-white">SoundCloud</h2>
      </a>

<a href="#" class="group relative flex h-[200px] w-full flex-col items-center justify-center overflow-hidden rounded-xl transition-all duration-300 hover:shadow-lg">
        <div class="relative z-0 h-[100px] w-[100px] rounded-full">
          
          <div class="absolute inset-0 translate-z-0 rounded-full transition-all duration-500 ease-[cubic-bezier(0.4,0,0.2,1)] group-hover:scale-[4] group-hover:bg-indigo-500"></div>
          
          <div class="absolute inset-0 z-10 flex items-center justify-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-52 text-indigo-500 transition-all duration-500 group-hover:scale-110 group-hover:text-white" viewBox="0 0 24 24"><path fill="currentColor" d="m10.176 20.058l.858-1.28l6.513-9.838c.57-.86.026-2.014-1.005-2.131L.378 4.95l8.373 15.055a.84.84 0 0 0 1.424.052h.001zM23.586 7.14l-9.662 14.61c-1.036 1.567-3.38 1.478-4.293-.162l-.093-.168c.3-.01.594-.086.855-.235a1.85 1.85 0 0 0 .612-.57l.86-1.28l6.516-9.844c.46-.694.525-1.56.173-2.314a2.38 2.38 0 0 0-1.899-1.364L.493 3.956l-.476-.054C-.163 2.392 1.101.95 2.784 1.143l18.991 2.16c1.856.21 2.835 2.289 1.812 3.838z" /></svg>
          </div>
        </div>
        
        <h2 class="z-10 mt-4 text-xl transition-all duration-500 group-hover:text-white">Proton</h2>
      </a>
    </div>
  </div>
</div>

Related Examples