JSFiddle - React, Tailwind, and code Playground

by Jerrygoyal

HTML

<div class='circle'>
    <div class='line'></div>
</div>

CSS

.circle {
            display: inline-block;
            border: solid 20px blue;
            border-radius: 51%;
            position: absolute;
            z-index: 5;
            
        }
        .line{
            margin: 0 0 0 -2px;
            position: absolute;
            top: 0;
            left: 50%;
            width: 6px;
            height: 100px;
            background: red;
            z-index: -1;
            }