JSFiddle - React, Tailwind, and code Playground

HTML

<html><head></head>
<body>

<style>
svg {
  margin: 1em;
  width: 240px; 
  height: 400px;
}
#robot-1 {
  --primary-color: #0099CC;
  --secondary-color: #FFDF34;
  --tertiary-color: #333;
}
/*
#robot-1 {
  --primary-color: #E52A39;
  --secondary-color: #11EBD8;
  --tertiary-color: #000;
}*/


p {
  text-align: center;
  width: 60%;
  margin: 3em auto;
  color: grey;
}
</style>
     <svg style="display: none">
    <symbol id="robot" viewBox="0 0 340 536">
        <path d="M99.581 504.076c0 13.056-10.583 23.639-23.638 23.639-13.055 0-23.638-10.583-23.638-23.639 0-13.055 10.583-23.638 23.638-23.638 13.055 0 23.638 10.583 23.638 23.638m67.395-2.467c0 13.056-10.584 23.639-23.639 23.639-13.054 0-23.637-10.583-23.637-23.639 0-13.054 10.583-23.637 23.637-23.637 13.055 0 23.639 10.583 23.639 23.637m67.751 0c0 13.056-10.584 23.639-23.639 23.639-13.054 0-23.637-10.583-23.637-23.639 0-13.054 10.583-23.637 23.637-23.637 13.055 0 23.639 10.583 23.639 23.637" fill="#fff" />
        <path d="M153.643 501.609c0 5.692-4.614 10.306-10.306 10.306-5.691 0-10.304-4.614-10.304-10.306 0-5.691 4.613-10.304 10.304-10.304 5.692 0 10.306 4.613 10.306 10.304m69.045 0c0 5.692-4.614 10.306-10.306 10.306-5.691 0-10.304-4.614-10.304-10.306 0-5.691 4.613-10.304 10.304-10.304 5.692 0 10.306 4.613 10.306 10.304m-136.581-.001c0 5.692-4.614 10.306-10.305 10.306-5.692 0-10.305-4.614-10.305-10.306 0-5.691 4.613-10.304 10.305-10.304 5.691 0 10.305 4.613 10.305 10.304" fill="#D1312C" />
        <path d="M139.421 17.747h5.662v53.232h-5.662v-53.232z" fill="#1E8F90" style="fill: var(--primary-color, #1E8F90)" />
        <path d="M160.375 79.12c0 9.265-7.893 16.776-17.627 16.776-9.734 0-17.626-7.511-17.626-16.776 0-9.266 7.892-16.777 17.626-16.777 9.734 0 17.627 7.511 17.627 16.777" fill="#1E8F90" style="fill: var(--primary-color, #1E8F90)" />
        <path d="M127.798 292.562h33.317v7.918h-33.317v-7.918zm0-15.833h33.317v7.916h-33.317v-7.916z" fill="#fff" />
        <path d="M127.798...