3D Glass Icon Grid

<div class="bg-gray-50 p-8">
  <style>@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');</style>
  <div class="grid gap-[5em] grid-cols-2 md:grid-cols-3 mx-auto py-[3em]
    overflow-visible font-['Inter','Helvetica_Neue',sans-serif]">
    <button type="button" aria-label="Design" class="relative bg-transparent outline-none w-[4.5em] h-[4.5em]
      [perspective:24em] [transform-style:preserve-3d]
      [-webkit-tap-highlight-color:transparent] group">
      <span class="absolute top-0 left-0 w-full h-full rounded-[1.25em] block
        transition-[opacity,transform] duration-300
        ease-[cubic-bezier(0.83,0,0.17,1)] origin-[100%_100%]
        rotate-[15deg]
        group-hover:[transform:rotate(25deg)_translate3d(-0.5em,-0.5em,0.5em)]" style="background: linear-gradient(hsl(223, 90%, 50%), hsl(208, 90%, 50%)); box-shadow: 0.5em -0.5em 0.75em hsla(223, 10%, 10%, 0.15);"></span>
      <span class="absolute top-0 left-0 w-full h-full rounded-[1.25em]
        bg-[hsla(0,0%,100%,0.15)] transition-[opacity,transform]
        duration-300 ease-[cubic-bezier(0.83,0,0.17,1)]
        origin-[80%_50%] flex backdrop-blur-[0.75em]
        [-webkit-backdrop-filter:blur(0.75em)] transform
        group-hover:[transform:translateZ(2em)]" style="box-shadow: 0 0 0 0.1em hsla(0, 0%, 100%, 0.3) inset;">
        <span class="m-auto w-[1.5em] h-[1.5em] flex items-center justify-center text-white" aria-hidden="true">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path>
          </svg>
        </span>
      </span>
      <span class="absolute top-full left-0 right-0 text-center
        whitespace-nowrap leading-[2] text-base opacity-0
        transition-[opacity,transform] duration-300
        ease-[cubic-bezier(0.83,0,0.17,1)] translate-y-0
        group-hover:opacity-100
        group-hover:[transform:translateY(20%)] text-gray-700">Design</span>
    </button>
    <button type="button" aria-label="Development" class="relative bg-transparent outline-none w-[4.5em] h-[4.5em]
      [perspective:24em] [transform-style:preserve-3d]
      [-webkit-tap-highlight-color:transparent] group">
      <span class="absolute top-0 left-0 w-full h-full rounded-[1.25em] block
        transition-[opacity,transform] duration-300
        ease-[cubic-bezier(0.83,0,0.17,1)] origin-[100%_100%]
        rotate-[15deg]
        group-hover:[transform:rotate(25deg)_translate3d(-0.5em,-0.5em,0.5em)]" style="background: linear-gradient(hsl(283, 90%, 50%), hsl(268, 90%, 50%)); box-shadow: 0.5em -0.5em 0.75em hsla(223, 10%, 10%, 0.15);"></span>
      <span class="absolute top-0 left-0 w-full h-full rounded-[1.25em]
        bg-[hsla(0,0%,100%,0.15)] transition-[opacity,transform]
        duration-300 ease-[cubic-bezier(0.83,0,0.17,1)]
        origin-[80%_50%] flex backdrop-blur-[0.75em]
        [-webkit-backdrop-filter:blur(0.75em)] transform
        group-hover:[transform:translateZ(2em)]" style="box-shadow: 0 0 0 0.1em hsla(0, 0%, 100%, 0.3) inset;">
        <span class="m-auto w-[1.5em] h-[1.5em] flex items-center justify-center text-white" aria-hidden="true">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="16,18 22,12 16,6"></polyline>
            <polyline points="8,6 2,12 8,18"></polyline>
          </svg>
        </span>
      </span>
      <span class="absolute top-full left-0 right-0 text-center
        whitespace-nowrap leading-[2] text-base opacity-0
        transition-[opacity,transform] duration-300
        ease-[cubic-bezier(0.83,0,0.17,1)] translate-y-0
        group-hover:opacity-100
        group-hover:[transform:translateY(20%)] text-gray-700">Development</span>
    </button>
    <button type="button" aria-label="Analytics" class="relative bg-transparent outline-none w-[4.5em] h-[4.5em]
      [perspective:24em] [transform-style:preserve-3d]
      [-webkit-tap-highlight-color:transparent] group">
      <span class="absolute top-0 left-0 w-full h-full rounded-[1.25em] block
        transition-[opacity,transform] duration-300
        ease-[cubic-bezier(0.83,0,0.17,1)] origin-[100%_100%]
        rotate-[15deg]
        group-hover:[transform:rotate(25deg)_translate3d(-0.5em,-0.5em,0.5em)]" style="background: linear-gradient(hsl(123, 90%, 40%), hsl(108, 90%, 40%)); box-shadow: 0.5em -0.5em 0.75em hsla(223, 10%, 10%, 0.15);"></span>
      <span class="absolute top-0 left-0 w-full h-full rounded-[1.25em]
        bg-[hsla(0,0%,100%,0.15)] transition-[opacity,transform]
        duration-300 ease-[cubic-bezier(0.83,0,0.17,1)]
        origin-[80%_50%] flex backdrop-blur-[0.75em]
        [-webkit-backdrop-filter:blur(0.75em)] transform
        group-hover:[transform:translateZ(2em)]" style="box-shadow: 0 0 0 0.1em hsla(0, 0%, 100%, 0.3) inset;">
        <span class="m-auto w-[1.5em] h-[1.5em] flex items-center justify-center text-white" aria-hidden="true">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <line x1="18" y1="20" x2="18" y2="10"></line>
            <line x1="12" y1="20" x2="12" y2="4"></line>
            <line x1="6" y1="20" x2="6" y2="14"></line>
          </svg>
        </span>
      </span>
      <span class="absolute top-full left-0 right-0 text-center
        whitespace-nowrap leading-[2] text-base opacity-0
        transition-[opacity,transform] duration-300
        ease-[cubic-bezier(0.83,0,0.17,1)] translate-y-0
        group-hover:opacity-100
        group-hover:[transform:translateY(20%)] text-gray-700">Analytics</span>
    </button>
    <button type="button" aria-label="Marketing" class="relative bg-transparent outline-none w-[4.5em] h-[4.5em]
      [perspective:24em] [transform-style:preserve-3d]
      [-webkit-tap-highlight-color:transparent] group">
      <span class="absolute top-0 left-0 w-full h-full rounded-[1.25em] block
        transition-[opacity,transform] duration-300
        ease-[cubic-bezier(0.83,0,0.17,1)] origin-[100%_100%]
        rotate-[15deg]
        group-hover:[transform:rotate(25deg)_translate3d(-0.5em,-0.5em,0.5em)]" style="background: linear-gradient(hsl(43, 90%, 50%), hsl(28, 90%, 50%)); box-shadow: 0.5em -0.5em 0.75em hsla(223, 10%, 10%, 0.15);"></span>
      <span class="absolute top-0 left-0 w-full h-full rounded-[1.25em]
        bg-[hsla(0,0%,100%,0.15)] transition-[opacity,transform]
        duration-300 ease-[cubic-bezier(0.83,0,0.17,1)]
        origin-[80%_50%] flex backdrop-blur-[0.75em]
        [-webkit-backdrop-filter:blur(0.75em)] transform
        group-hover:[transform:translateZ(2em)]" style="box-shadow: 0 0 0 0.1em hsla(0, 0%, 100%, 0.3) inset;">
        <span class="m-auto w-[1.5em] h-[1.5em] flex items-center justify-center text-white" aria-hidden="true">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M3 3v18h18"></path>
            <circle cx="9" cy="9" r="2"></circle>
            <path d="m21 15-3.086-3.086a2 2 0 0 0-1.414-.586H13l-2.5-2.5"></path>
            <path d="m7 10 2.5 2.5M17 8h4"></path>
          </svg>
        </span>
      </span>
      <span class="absolute top-full left-0 right-0 text-center
        whitespace-nowrap leading-[2] text-base opacity-0
        transition-[opacity,transform] duration-300
        ease-[cubic-bezier(0.83,0,0.17,1)] translate-y-0
        group-hover:opacity-100
        group-hover:[transform:translateY(20%)] text-gray-700">Marketing</span>
    </button>
    <button type="button" aria-label="Support" class="relative bg-transparent outline-none w-[4.5em] h-[4.5em]
      [perspective:24em] [transform-style:preserve-3d]
      [-webkit-tap-highlight-color:transparent] group">
      <span class="absolute top-0 left-0 w-full h-full rounded-[1.25em] block
        transition-[opacity,transform] duration-300
        ease-[cubic-bezier(0.83,0,0.17,1)] origin-[100%_100%]
        rotate-[15deg]
        group-hover:[transform:rotate(25deg)_translate3d(-0.5em,-0.5em,0.5em)]" style="background: linear-gradient(hsl(3, 90%, 50%), hsl(348, 90%, 50%)); box-shadow: 0.5em -0.5em 0.75em hsla(223, 10%, 10%, 0.15);"></span>
      <span class="absolute top-0 left-0 w-full h-full rounded-[1.25em]
        bg-[hsla(0,0%,100%,0.15)] transition-[opacity,transform]
        duration-300 ease-[cubic-bezier(0.83,0,0.17,1)]
        origin-[80%_50%] flex backdrop-blur-[0.75em]
        [-webkit-backdrop-filter:blur(0.75em)] transform
        group-hover:[transform:translateZ(2em)]" style="box-shadow: 0 0 0 0.1em hsla(0, 0%, 100%, 0.3) inset;">
        <span class="m-auto w-[1.5em] h-[1.5em] flex items-center justify-center text-white" aria-hidden="true">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M9 12l2 2 4-4"></path>
            <path d="M21 12c.552 0 1-.448 1-1V5c0-.552-.448-1-1-1H3c-.552 0-1 .448-1 1v6c0 .552.448 1 1 1h9l4 4h4z"></path>
          </svg>
        </span>
      </span>
      <span class="absolute top-full left-0 right-0 text-center
        whitespace-nowrap leading-[2] text-base opacity-0
        transition-[opacity,transform] duration-300
        ease-[cubic-bezier(0.83,0,0.17,1)] translate-y-0
        group-hover:opacity-100
        group-hover:[transform:translateY(20%)] text-gray-700">Support</span>
    </button>
    <button type="button" aria-label="Security" class="relative bg-transparent outline-none w-[4.5em] h-[4.5em]
      [perspective:24em] [transform-style:preserve-3d]
      [-webkit-tap-highlight-color:transparent] group">
      <span class="absolute top-0 left-0 w-full h-full rounded-[1.25em] block
        transition-[opacity,transform] duration-300
        ease-[cubic-bezier(0.83,0,0.17,1)] origin-[100%_100%]
        rotate-[15deg]
        group-hover:[transform:rotate(25deg)_translate3d(-0.5em,-0.5em,0.5em)]" style="background: linear-gradient(hsl(253, 90%, 50%), hsl(238, 90%, 50%)); box-shadow: 0.5em -0.5em 0.75em hsla(223, 10%, 10%, 0.15);"></span>
      <span class="absolute top-0 left-0 w-full h-full rounded-[1.25em]
        bg-[hsla(0,0%,100%,0.15)] transition-[opacity,transform]
        duration-300 ease-[cubic-bezier(0.83,0,0.17,1)]
        origin-[80%_50%] flex backdrop-blur-[0.75em]
        [-webkit-backdrop-filter:blur(0.75em)] transform
        group-hover:[transform:translateZ(2em)]" style="box-shadow: 0 0 0 0.1em hsla(0, 0%, 100%, 0.3) inset;">
        <span class="m-auto w-[1.5em] h-[1.5em] flex items-center justify-center text-white" aria-hidden="true">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
          </svg>
        </span>
      </span>
      <span class="absolute top-full left-0 right-0 text-center
        whitespace-nowrap leading-[2] text-base opacity-0
        transition-[opacity,transform] duration-300
        ease-[cubic-bezier(0.83,0,0.17,1)] translate-y-0
        group-hover:opacity-100
        group-hover:[transform:translateY(20%)] text-gray-700">Security</span>
    </button>
  </div>
</div>