JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.jsdelivr.net/g/[email protected](riot.min.js+compiler.min.js)"></script>
<script src="https://cdn.rawgit.com/NawaMan/RiotComponent/master/riotcomponent.min.js"></script>
    <count-down id='count' label='Count: ' start=5></count-down>

    <script type="riot/tag">
      <count-down>
        <span>{label}</span><span>{count}</span>
    
        var self = riotComponent.makeComponent(this)
        self.label = opts.label
        self.count = opts.start
    
        self._method('restart', function() {
          self.count = opts.start
          self.update()
          startTimer()
        })
        
        self._property('label', function(newLebel, storeValue) {
          storeValue()
          self.update()
        })
        
        var onzero = self._event('zero')
        startTimer()
        
        function startTimer() {
          var timer = setInterval(function() {
            self.count--
            self.update()
            if (self.count == 0) {
              onzero()
              clearTimeout(timer)
            }
          }, 1000)
        }
      </count-down>
    </script>

    <script>
      riot.mount('*')
  
      var count = document.getElementById('count')
      count.on('zero', function() {
        alert('It is ZERO!')
        count.label = prompt('Enter new label (or "STOP at " to stop the timer): ', "STOP at ")
        if (!(count.label === 'STOP at ')) {
          count.restart()
        }
    })
    </script>