La sombra de la caja de Tailwindcss no se muestra.

Estoy tratando de usar Tailwindcss en un proyecto de React donde estoy replicando el menú móvil del sitio web de Star Wars. Sin embargo, la sombra de la caja que estoy agregando a los segmentos del icono de hamburguesa no aparece cuando se abre el cajón de navegación.

Enlace al sandbox: https://play.tailwindcss.com/upmiAWTcso

index.js:

const toggleDrawer = (event) => {
  document.querySelector("#drawer").classList.toggle("left-[-100%]");
  document.querySelector("#drawer").classList.toggle("left-0");
  document.querySelector("#bar-1").classList.toggle("hidden");
  document.querySelector("#bar-2").classList.toggle("active-2");
  document.querySelector("#bar-3").classList.toggle("active-3");
};

<div onclick="{toggleDrawer}" classname="h-full flex flex-col justify-center items-center space-y-[8px]">
  <span id="bar-1" classname="block h-[2px] w-[30px] border-zinc-500 border-l-[4px] border-r-[20px] rounded-full transition-all duration-300"></span>
  <span id="bar-2" classname="block h-[2px] w-[30px] border-zinc-500 shadow-md border-l-[20px] border-r-[4px] rounded-full origin-bottom-right transition-all duration-300"></span>
  <span id="bar-3" classname="block h-[2px] w-[30px] border-zinc-500 shadow-md border-l-[4px] border-r-[20px] rounded-full origin-bottom-left transition-all duration-300"></span>
</div>;

global.css:

@layer components {
  .active-2 {
    @apply
      rotate-45
      -translate-x-2
      translate-y-[530%]
      !w-[34px]
      !border-l-[25px]
      !border-r-[5px]
      !border-white
      shadow-[#d50032];
  }
  .active-3 {
    @apply
      -rotate-45
      translate-x-1
      !w-[34px]
      !border-l-[5px]
      !border-r-[25px]
      !border-white
      shadow-[#106ae0] !important;
  }
}