JSFiddle - React, Tailwind, and code Playground

by tlgreg

HTML

<link href="https://unpkg.com/[email protected]/dist/tailwind.min.css" rel="stylesheet" />

<svg class="h-8 w-8 flex-shrink-0" viewBox="0 0 40 40">
  <circle cx="20" cy="20" r="20" class="text-green-200 fill-current"></circle>
  <path class="transform move-x-2 move-y-2 text-green-600 fill-current" d="M16.21 16.95a5 5 0 0 1-4.02 4.9l-3.85.77a1 1 0 0 1-.9-.27l-.71-.7a2 2 0 0 1 0-2.83l1.44-1.45a13.17 13.17 0 0 1-1.42-1.41L5.31 17.4a2 2 0 0 1-2.83 0l-.7-.7a1 1 0 0 1-.28-.9l.77-3.86a5 5 0 0 1 4.9-4.02h.86a13.07 13.07 0 0 1 12.82-5.47 1 1 0 0 1 .83.83A12.98 12.98 0 0 1 16.2 16.1v.85zm-4.41 2.94a3 3 0 0 0 2.41-2.94v-1.4a1 1 0 0 1 .47-.84A11.04 11.04 0 0 0 19.8 4.33 10.98 10.98 0 0 0 9.42 9.45a1 1 0 0 1-.85.47h-1.4a3 3 0 0 0-2.94 2.4l-.66 3.34.33.33 2.24-2.24a1 1 0 0 1 1.52.12 11.08 11.08 0 0 0 2.6 2.6 1 1 0 0 1 .12 1.52l-2.24 2.24.33.33 3.33-.67zM15 10a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
</svg>

CSS

.transform {
  --translate-x: 0;
  --translate-y: 0;
  transform: translateX(var(--translate-x)) translateY(var(--translate-y));
}

.move-x-2 {
  --translate-x: 0.5rem;
}

.move-y-2 {
  --translate-y: 0.5rem;
}