JSFiddle - React, Tailwind, and code Playground

by mahny

HTML

<svg width="256" height="256">
  <defs>
    <linearGradient id="iconColor">
      <stop stop-color="#99ffff" offset="0%" />
      <stop stop-color="#006666" offset="100%" />
    </linearGradient>
    <style>
      @keyframes spin {
        from {
          transform: rotate(0deg);
        }
        to {
          transform: rotate(359deg);
        }
      }
      #icon {
        transform-origin: 128px 128px;
        animation: 1.0s linear infinite spin;
      }
    </style>
  </defs>
  <circle id="icon" cx="128" cy="128" r="126"
    stroke="url(#iconColor)" stroke-width="4"
    fill="none" />
</svg>

CSS

body {
  background-color: #333333;
}