JSFiddle - React, Tailwind, and code Playground

HTML

<button id="btn-play" class="btn-circle-large"></button>
<br />

CSS

#btn-play {
  left: calc(50% - 40px);
  top: 10px;
}
.btn-circle-large {
  border-radius: 50%;
  width: 80px;
  height: 80px;
  border: 5px solid #555;
  font-size: 2em;
}

#timer {
    margin: 20px;
    width: 280px; 
    height: 380px
}

.pietimer {
    position:relative;
    font-size: 200px;
    width:1em;
    height:1em;
    float: left;
}
.pietimer > .percent {
    position: absolute;
    top: 1.05em;
    left: 0;
    width: 3.33em;
    font-size: 0.3em;
    text-align:center;
    display: none;
}
.pietimer > .slice {
    position:absolute;
    width:20em;
    height:20em;
    clip:rect(0px,1em,1em,0.5em);
}
.pietimer > .slice.gt50 {
    clip:rect(auto, auto, auto, auto);
}
.pietimer > .slice > .pie {
    border: 0.2em solid #c0c0c0;
    position:absolute;
    background-color: red;
    width:100%; /* 1 - (2 * border width) */
    height:100%; /* 1 - (2 * border width) */
    clip:rect(0em,0.5em,1em,0em);
    -moz-border-radius:0.5em;
    -webkit-border-radius:0.5em; 
    border-radius:0.5em; 
}
.pietimer > .slice > .pie.fill {

    -moz-transform:rotate(180deg) !important;
    -webkit-transform:rotate(180deg) !important;
    -o-transform:rotate(180deg) !important;
    transform:rotate(180deg) !important;
}
.pietimer.fill > .percent {
    display: none;
}
.pietimer.fill > .slice > .pie {
    border: transparent;
    background-color: 'red';
    width:1em;
    height:1em;
}

JavaScript

$("#btn-play").html("<div  id='timer'></div>");


$("#btn-play").click(function() {
    console.log("btn-play");
    
    $('#timer').pietimer({
        timerSeconds: 10,
        color: 'green',
        fill: true,
        showPercentage: true,
        callback: function() {

//            $('#timer').pietimer('reset');
        }
    });
});





(function( $ ){

    $.fn.pietimer = function( method ) {
        // Method calling logic
        if ( methods[method] ) {
            return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.pietimer' );
        }
    };

    var methods = {
        init : function( options ) {
            var state = {
                timer: null,
                timerSeconds: 10,
                callback: function () {},
                timerCurrent: 0,
                showPercentage: false,
                fill: false,
                color: '#CCC'
            };

            state = $.extend(state, options);

            return this.each(function() {

                var $this = $(this);
                var data = $this.data('pietimer');
                if ( ! data ) {
                    $this.addClass('pietimer');
                    $this.css({
                        fontSize: '20px'
                        });
                    $this.data('pietimer', state);
                    if (state.showPercentage) {
                        $this.find('.percent').show();
                    }
                    if (state.fill) {
                        $this.addClass('fill');
                    }
                    $this.pietimer('start');
                }
            });
        },

        stopWatch : function() {
            var data = $(this).data('pietimer');
            if ( data ) {
              ...