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>
      <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 class="sector" d="M330,250 l170,0 A250,250 0 0,0 125.00000000000006,33.493649053890294 l84.99999999999994,147.2243186433546 A80,80 0 0,1 330,250" stroke="" fill="none"></path><use transform="rotate(30 348.49835205078125 111.44287109375)" y="60" x="330.99835205078125" height="35" width="35" xlink:href="#icon-1"></use></a>

              <a data-svg-origin="250 250" transform="matrix(-0.49999,-0.86602,0.86602,-0.49999,158.49364905389024,591.5063509461097)" xlink:title=" " xlink:href=" "...

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;
}