JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list">
  <li data-number="round1">round 1</li>
  <li data-number="round1-copy">round 2</li>
</ul>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="300px" height="300px" viewBox="0 0 300 300" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 48.2 (47327) - http://www.bohemiancoding.com/sketch -->
    <title>square</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <rect id="path-1" x="0" y="0" width="300" height="300"></rect>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="square">
            <g id="rectangle">
                <use fill="#D8D8D8" fill-rule="evenodd" xlink:href="#path-1"></use>
                <rect stroke="#979797" stroke-width="1" x="0.5" y="0.5" width="299" height="299"></rect>
            </g>
            <g id="round1" class="round" transform="translate(119.000000, 119.000000)">
                <g id="number">
                    <circle id="Oval" stroke="#979797" fill="#FFFFFF" cx="31" cy="31" r="31"></circle>
                    <text id="1" font-family="Helvetica-Bold, Helvetica" font-size="20" font-weight="bold" fill="#272A2F">
                        <tspan x="25" y="38">1</tspan>
                    </text>
                </g>
            </g>
            <g id="round1-copy" class="round" transform="translate(181.000000, 57.000000)">
                <g id="number2">
                    <circle id="Oval2" stroke="#979797" fill="#FFFFFF" cx="31" cy="31" r="31"></circle>
                    <text id="2" font-family="Helvetica-Bold, Helvetica" font-size="20" font-weight="bold" fill="#272A2F">
                        <tspan x="25" y="38">2</tspan>
                    </text>
                </g>
            </g>
        </g>
    </g>
</svg>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
  $('.list >...

CSS

li.active {
  color: red;
}

.round {
  transition: transform .3 ease;
}

.round.active {
  transform: scale(1.3)
}