JSFiddle - React, Tailwind, and code Playground

by dhavaljani

HTML

<div class="oval">
</div>
<div style="width: 36px;
    height: 36px;
    background-image: linear-gradient(to bottom, #e07708, #e07708 33%, #a25a01 33%, #a25a01 66%, #442221 66%, #442221);
    border-radius: 50%;
    border: 1px solid #333;">
    
    </div>
    
<div style="width: 36px;
    height: 36px;
    background-image: linear-gradient(to bottom, #e07708, #e07708 50%, #a25a01 50%, #a25a01 100%, #442221);
    border-radius: 50%;
    border: 1px solid #333;">
    
    </div>

CSS

.oval {
    width: 36px;
    height: 36px;
    background-image: linear-gradient(to bottom, #e07708, #e07708 33%, #a25a01 33%, #a25a01 66%, #442221 66%, #442221);
    border-radius: 50%;
    border: 1px solid #333;
}
ul {
    list-style-type: circle;
    display: block;
    margin: 10px;
}