JSFiddle - React, Tailwind, and code Playground

HTML

<div class="player" id="player-2">
                <div class="player-info">
                    <div class="player-avatar"></div>
                    <p class="player-name"></p>
                </div>
                <div class="card-layout">

                </div>
            </div>
            <div class="player" id="player-3">
                <div class="card-layout">

                </div>
                <div class="player-info">
                    <div class="player-avatar"></div>
                    <p class="player-name"></p>
                </div>
            </div>
            <div class="player" id="player-4">
                <div class="card-layout">

                </div>
                <div class="player-info">
                    <div class="player-avatar"></div>
                    <p class="player-name player-name_right"></p>
                </div>
            </div>

CSS

.player-avatar {
  width: 96px;
  height: 96px;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center center;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: relative;
  -webkit-box-shadow: 0 5px 25.5px 4.5px rgba(0, 0, 0, 0.35);
  -moz-box-shadow: 0 5px 25.5px 4.5px rgba(0, 0, 0, 0.35);
  box-shadow: 0 5px 25.5px 4.5px rgba(0, 0, 0, 0.35);
}


.player-avatar .timer-svg-container {
  width: 100px;
  height: 100px;
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  position: relative;
  top: -2px;
  left: -2px;
  background-color: rgba(0, 0, 0, 0.08);
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.player-avatar .timer-time {
  font: 300 45px 'Roboto', sans-serif;
  position: absolute;
  top: 21px;
  color: #fff;
  text-shadow: 1px 1px 6px #000;
  width: 100%;
  text-align: center;
  z-index: 2;
}
.player-avatar .timer-circle-animation {
  stroke-dasharray: 300;
  /* this value is the pixel circumference of the circle */
  stroke-dashoffset: 300;
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
  stroke: #00c853;
  fill: none;
  stroke-width: 5;
  stroke-linecap: round;
}
.player-avatar .timer-svg-container {
  -webkit-filter: drop-shadow(0px 0px 7px rgba(0, 200, 83, 0.5));
  filter: drop-shadow(0px 0px 7px rgba(0, 200, 83, 0.5));
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;
}
.player-avatar .timer-svg-container.terminate {
  -webkit-filter: drop-shadow(0px 0px 7px rgba(255, 61, 0, 0.5));
  filter: drop-shadow(0px 0px 7px rgba(255, 61, 0, 0.5));
}
.player-avatar .timer-svg-container.terminate .timer-circle-animation {
  stroke:...

JavaScript

function Timer(settings)
{
    var that = this;
    var _settings;
    var _options = {};

    /**
     * Init
     */
    this.init = function init(settings)
    {
        _settings = settings || {};
        _settings.maxTime =  settings.maxTime;
        _settings.seconds = (_settings.seconds <= 0) ? 1 : parseInt(_settings.seconds);
        _settings.classPrefix = _settings.classPrefix || 'timer-';
        _settings.initialOffset = _settings.initialOffset || 100;
        _settings.strokeTime = settings.strokeTime;
        _settings.circle = _settings.circle || {
                initialOffset: 300,
                r: 47.2555,
                cy: 50,
                cx: 50
            };

        _options = {
            seconds: _settings.seconds,
            secondsHit: _settings.seconds,
            element: null,
            elementSvg: null,
            elementTimer: null,
            elementCircle: null
        };

        _options.element = document.querySelector(_settings.targetSelector);

        that.createSvg();

        var timeoutInPercentage = _settings.seconds / _settings.maxTime * 100;
        var realStrokeDashoffset = _settings.circle.initialOffset / 100 * timeoutInPercentage;

        _options.elementCircle.style.strokeDashoffset = _settings.circle.initialOffset - realStrokeDashoffset;
        _options.elementTimer.innerHTML = _options.secondsHit;

        _settings.start && _settings.start(_options);

        that.timer();
    };

    /**
     * Таймер
     */
    this.timer = function()
    {
        --_options.secondsHit;

        that.interval = setInterval(function() {

            var _p = (_options.secondsHit / _settings.maxTime * 100);

            _options.elementCircle.style.strokeDashoffset = _settings.circle.initialOffset - (_settings.circle.initialOffset / 100 * _p);
            //_options.elementTimer && ( _options.elementTimer.innerHTML = _p);

            _options.elementTimer && (_options.elementTimer.innerHTML =...