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%;
}
.tool-container .tool-wrapper #s-values .arrow-container .arrow-wrapper .arrow {
width: 78px;
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;
}
.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);
}