JSFiddle - React, Tailwind, and code Playground

by colleenroxas

HTML

<svg id="gear-head" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1038 1343.3" xml:space="preserve" enable-background="new 0 0 1038 1343.3">
    <switch>
        <foreignObject requiredExtensions="http://ns.adobe.com/AdobeIllustrator/10.0/" x="0" y="0" width="1" height="1"/>
        <g>
            <g id="Layer_2">
                <path d="M596.6,988.2l5.6,2.5l2.9-3.9c1.3,0.3,2.5,0.4,3.8,0.4l1.9,4.4l6-1.2l0-4.8c1.2-0.5,2.3-1.1,3.3-1.9 l4.2,2.4l4.1-4.6l-2.8-3.9c0.3-0.5,0.6-1.1,0.9-1.7c0.3-0.6,0.5-1.2,0.7-1.8l4.8-0.5l0.7-6.1l-4.6-1.5c-0.1-1.3-0.4-2.5-0.8-3.7 l3.6-3.2l-3-5.3l-4.6,1.5c-0.8-0.9-1.8-1.8-2.8-2.6l1-4.7l-5.6-2.5l-2.9,3.9c-1.3-0.3-2.5-0.4-3.8-0.4l-1.9-4.4l-6,1.2l0,4.8 c-1.2,0.5-2.3,1.2-3.3,1.9l-4.2-2.4l-4.1,4.5l2.8,3.9c-0.3,0.5-0.6,1.1-0.9,1.7c-0.3,0.6-0.5,1.2-0.7,1.8l-4.8,0.5l-0.7,6.1 l4.6,1.5c0.1,1.3,0.4,2.5,0.8,3.7l-3.6,3.2l3,5.4l4.6-1.5c0.8,0.9,1.8,1.8,2.8,2.6L596.6,988.2z M602.6,978.6l0.5-2.5 c-0.5-0.4-1-0.9-1.5-1.3l-2.4,0.8l-1.6-2.8l1.9-1.7c-0.2-0.6-0.3-1.3-0.4-1.9l-2.4-0.8l0.4-3.2l2.5-0.3c0.1-0.3,0.2-0.6,0.4-0.9 c0.1-0.3,0.3-0.6,0.5-0.9L599,961l2.2-2.4l2.2,1.3c0.5-0.4,1.1-0.7,1.7-1l0-2.5l3.2-0.7l1,2.3c0.7,0,1.3,0.1,2,0.2l1.5-2l2.9,1.3 l-0.5,2.5c0.5,0.4,1,0.9,1.5,1.3l2.4-0.8l1.6,2.8l-1.9,1.7c0.2,0.6,0.3,1.3,0.4,2l2.4,0.8l-0.4,3.2l-2.5,0.3 c-0.1,0.3-0.2,0.6-0.4,0.9c-0.1,0.3-0.3,0.6-0.5,0.9l1.5,2.1l-2.2,2.4l-2.2-1.3c-0.5,0.4-1.1,0.7-1.7,1l0,2.5l-3.2,0.6l-1-2.3 c-0.7,0-1.3-0.1-2-0.2l-1.5,2L602.6,978.6z" opacity="0.3" fill="#F2FAFF"/>
                <path d="M72.7,1204.5l5.6,2.5l2.9-3.9c1.3,0.3,2.5,0.4,3.8,0.4l1.9,4.4l6-1.2l0-4.8c1.2-0.5,2.3-1.1,3.3-1.9 l4.2,2.4l4.1-4.6l-2.8-3.9c0.3-0.5,0.6-1.1,0.9-1.7c0.3-0.6,0.5-1.2,0.7-1.8l4.8-0.5l0.7-6.1l-4.6-1.5c-0.1-1.3-0.4-2.5-0.8-3.7 l3.6-3.2l-3-5.3l-4.6,1.5c-0.8-0.9-1.8-1.8-2.8-2.6l1-4.7l-5.6-2.5l-2.9,3.9c-1.3-0.3-2.5-0.4-3.8-0.4l-1.9-4.4l-6,1.2l0,4.8 c-1.2,0.5-2.3,1.2-3.3,1.9l-4.2-2.4l-4.1,4.5l2.8,3.9c-0.3,0.5-0.6,1.1-0.9,1.7c-0.3,0.6-0.5,1.2-0.7,1.8l-4.8,0.5l-0.7,6.1...

CSS

#gear-head {
  position: fixed;
  background: #172235;
  width: auto;
  height: 100%;
}
#gear-head .gear {
  -webkit-animation: rotation 6s infinite linear;
  -moz-animation: rotation 6s infinite linear;
  -o-animation: rotation 6s infinite linear;
  animation: rotation 6s infinite linear;
  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
}
@-webkit-keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(359deg);
  }
}
@-moz-keyframes rotation {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(359deg);
  }
}
@-o-keyframes rotation {
  from {
    -o-transform: rotate(0deg);
  }
  to {
    -o-transform: rotate(359deg);
  }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
#gear-head .pulsating {
  -webkit-animation: pulsate 6s ease-out;
  -webkit-animation-iteration-count: infinite;
  opacity: 0.5;
  transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
}
@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(0.5, 0.5);
    opacity: 0.0;
  }
  50% {
    opacity: 1.0;
  }
  100% {
    -webkit-transform: scale(1.2, 1.2);
    opacity: 0.0;
  }
}