JSFiddle - React, Tailwind, and code Playground

HTML

<input type="radio" id="v" name="button" value="video">
  <label for="v"> <svg class="chart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="200px" height="200px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
        <g>
          <g>
			<path d="M144.831 148.373v-7.175c0-2.377-1.931-4.307-4.305-4.307h-5.743c-2.376 0-4.302 1.93-4.302 4.307v7.175 H70.21v-7.175c0-2.377-1.926-4.307-4.306-4.307h-5.737c-2.38 0-4.306 1.93-4.306 4.307v7.175H50.12V50.795h5.742v7.174 c0 2.4 1.9 4.3 4.3 4.306h5.737c2.379 0 4.306-1.93 4.306-4.306v-7.174h60.269v7.174c0 2.4 1.9 4.3 4.3 4.3 h5.742c2.375 0 4.304-1.93 4.304-4.306v-7.174h5.739v97.578H144.831L144.831 148.373z M70.21 72.3 c0-2.379-1.926-4.305-4.306-4.305h-5.737c-2.38 0-4.306 1.926-4.306 4.305v2.87c0 2.4 1.9 4.3 4.3 4.305h5.737 c2.379 0 4.306-1.927 4.306-4.305V72.319L70.21 72.319z M70.21 89.539c0-2.375-1.926-4.305-4.306-4.305h-5.737 c-2.38 0-4.306 1.93-4.306 4.305v2.873c0 2.4 1.9 4.3 4.3 4.301h5.737c2.379 0 4.306-1.926 4.306-4.301V89.539 L70.21 89.539z M70.21 106.76c0-2.379-1.926-4.305-4.306-4.305h-5.737c-2.38 0-4.306 1.927-4.306 4.305v2.87 c0 2.4 1.9 4.3 4.3 4.305h5.737c2.379 0 4.306-1.931 4.306-4.305V106.76L70.21 106.76z M70.21 124 c0-2.379-1.926-4.305-4.306-4.305h-5.737c-2.38 0-4.306 1.926-4.306 4.305v2.87c0 2.4 1.9 4.3 4.3 4.305h5.737 c2.379 0 4.306-1.926 4.306-4.305V123.979L70.21 123.979z M144.831 72.319c0-2.379-1.931-4.305-4.305-4.305h-5.743 c-2.376 0-4.302 1.926-4.302 4.305v2.87c0 2.4 1.9 4.3 4.3 4.305h5.743c2.376 0 4.305-1.927 4.305-4.305V72.319 L144.831 72.319z M144.831 89.539c0-2.375-1.931-4.305-4.305-4.305h-5.743c-2.376 0-4.302 1.93-4.302 4.305v2.873 c0 2.4 1.9 4.3 4.3 4.301h5.743c2.376 0 4.305-1.926 4.305-4.301V89.539L144.831 89.539z M144.831 106.8 c0-2.379-1.931-4.305-4.305-4.305h-5.743c-2.376 0-4.302 1.927-4.302 4.305v2.87c0 2.4 1.9 4.3 4.3 4.305h5.743 c2.376 0 4.305-1.931 4.305-4.305V106.76L144.831 106.76z M144.831...

CSS

.chart {
    position: absolute
}
#icon_circle {
    /*transition*/
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
    fill: white;
    fill-opacity: 0;
    stroke: #F8AE42;
    stroke-width: 7px;
}

#icon_square {
    /*transition*/
    -webkit-transition: .2s;
    -moz-transition: .2s;
    -o-transition: .2s;
    transition: .2s;
    fill: white;
    fill-opacity: 0;
    stroke: #F8AE42;
    stroke-width: 7px;
}

.icon_circle:hover {
    opacity: 0.8
}
/* Services Icons */
.chart {
    width: 100%;
    max-width: 150px;
    max-height: 150px;
}
.branding0 {
    fill: #F69321
}
.branding1 {
    fill: #FAAF42
}
.branding2 {
    fill: #EF4137
}

input {
    display: none
}
label {
    position: relative;
    display: inline-block;
    width: 150px;
    height: 150px;
}


input:checked + label #icon_square {
   stroke: #EF4137;
 }

input:checked + label #icon_circle {
   stroke: #EF4137;
 }