JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row mt-5">
    <div class="col">
      <div id="countdown">
        <div id="countdown-number"></div>
          <svg>
            <circle r="18" cx="20" cy="20" *ngIf="svgAnimation"></circle>
          </svg>
       </div>
    </div>
  </div> 
</div>

CSS

#countdown {
      position: relative;
      margin: auto;
      height: 40px;
      width: 40px;
      text-align: center;
    }
    
    #countdown-number {
      color: #1C5BA2;
      display: inline-block;
      line-height: 40px;
    }
    
    svg {
      position: absolute;
      top: 0;
      right: 0;
      width: 40px;
      height: 40px;
      transform: rotateY(-180deg) rotateZ(-90deg);
    }
    
    svg circle {
      stroke-dasharray: 113px;
      stroke-dashoffset: 0px;
      stroke-linecap: round;
      stroke-width: 2px;
      stroke: #1C5BA2;
      fill: none;
      -webkit-animation: countdown 31s linear forwards;
      animation: countdown 31s linear forwards;
    }
    
    @keyframes countdown {
      from {
        stroke-dashoffset: 0px;
      }
      to {
        stroke-dashoffset: 113px;
      }
    }