JSFiddle - React, Tailwind, and code Playground

HTML

<body>

    <div class="circulus-menu">
      <!-- CIRCULUS SVG menu -->



      <svg style="transform-origin: 50% 50% 0px; transform: matrix3d(0.864276, 0.503018, 0, 0, -0.503018, 0.864276, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -moz-user-select: none;" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-2 -2 504 504" id="menu">
      <style>
        #menu{display:block;margin:0 auto;}
        a{cursor:pointer;outline:none;}
        .item .sector{transition:all .1s linear;fill:#fff;stroke:;}
        .item:hover .sector,.item:focus .sector{fill:#eee;}
        .menu-trigger{fill:#EA2A55;pointer-events:auto;}
        .menu-trigger:hover,.menu-trigger:focus{cursor:pointer;}
        symbol{overflow:visible;}
      </style>
      
      <defs>
        <pattern id="item-1" patternUnits="userSpaceOnUse" width="100" height="100">
          <image xlink:href="https://c.stocksy.com/a/8rO400/z0/1048862.jpg" x="0" y="0" width="100" height="100" />
        </pattern>
      </defs>
      <path d="M5,50
         l0,100 l100,0 l0,-100 l-100,0
         M215,100
         a50,50 0 1 1 -100,0 50,50 0 1 1 100,0
         M265,50
         l50,100 l-100,0 l50,-100
         z"
         fill="url(#item-1)" />
      
      <g id="symbolsContainer">

          <symbol viewBox="0 0 35 35" id="icon-1" class="icon icon-"><rect height="100%" width="100%" stroke-width="1" stroke="#111" fill="none"></rect><text font-size="1.2em" text-anchor="middle" dy=".3em" y="50%" x="50%" fill="#222">1</text></symbol>

          <symbol viewBox="0 0 35 35" id="icon-2" class="icon icon-"><rect height="100%" width="100%" stroke-width="1" stroke="#111" fill="none"></rect><text font-size="1.2em" text-anchor="middle" dy=".3em" y="50%" x="50%" fill="#222">2</text></symbol>

      </g>
      <g id="itemsContainer">

              <a data-svg-origin="250 250" transform="matrix(1,0,0,1,0,0)" xlink:title=" " xlink:href=" " tabindex="0" role="link" id="item-1" class="item"><path...

CSS

/*************************
STYLE
*************************/

* {
  box-sizing: border-box; /* The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.

Should they include the border-box or just the content-box which is the default value of the width and height properties. */
}

body {
  max-width: 960px;
  margin: auto;
  background: url('../img/background_man-boat_1600.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.circulus-menu {
  max-width: 60%;
  max-height: 60%;
  margin: 50px auto auto auto;
}