JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tool-container">
                          <div class="tool-wrapper">
                              <div id="s-values">
                                  <div class="arrow-container">
                                      <span class="arrow-wrapper">
                                          <span class="circle"/>
                                          <span class="arrow"/>
                                      </span>
                                  </div>
                              </div>
                              <div class="tool-subtitle">
                                  <h1>60</h1>
                                  <h4>Спидометр, км/ч</h4>
                              </div>
                          </div>
                      </div>

CSS

.tool-container {
  display: flex;
}
.tool-container .tool-wrapper {
  margin: auto;
  border-radius: 50%;
  width: 300px;
  height: 300px;
  border: 0.5em solid #0d6efd;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: flex;
  flex-wrap: wrap;
}
.tool-container .tool-wrapper #s-values {
  width: 265px;
  height: 265px;
  border: 6px dashed #ECE8E8;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: flex;
  margin: 10px auto;
}
.tool-container .tool-wrapper #s-values .arrow-container {
  margin: auto;
}
.tool-container .tool-wrapper #s-values .arrow-container .arrow-wrapper .circle {
    width: 35px;
    height: 35px;
    background: #ECE8E8;
    display: block;
    border-radius: 50%;
    position: absolute;
    top: -22px;
    left: -14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tool-container .tool-wrapper #s-values .arrow-container .arrow-wrapper .arrow {
    width: 120px;
    height: 7px;
    background: #0d6efd;
    display: block;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 5px;
    border-top-left-radius: 100%;
    border-top-right-radius: 5px;
    z-index: 1;
    position: absolute;
    right: 17px;
}
.tool-container .tool-wrapper .tool-subtitle {
  width: 100%;
}
.tool-container .tool-wrapper .tool-subtitle h1 {
  text-align: center;
  color: #0d6efd;
  font-weight: 800;
  font-family: "Montserrat", sans-serif;
  font-size: 90px;
}
.tool-container .tool-wrapper .tool-subtitle h4 {
  font-style: normal;
  font-weight: bold;
  text-align: center;
  font-size: 25px;
  margin: 0;
  color: rgba(61, 63, 70, 0.3);
}
.arrow-wrapper {
    position: relative;
}

.circle {
    transform: rotate(-50deg);
    animation: speedRotate 0.7s linear infinite;
}
@keyframes speedRotate {
    0% {
       transform: rotate(50deg);
    }
    60% {
         transform: rotate(30deg);
    }
    90% {
       transform: rotate(70deg);  
    }
    100% {
       transform:...