JSFiddle - React, Tailwind, and code Playground

by Ritesh Pandey

HTML

<div class="outer-circle">
    <div class="circle">
        <div class="right-arrow">
        </div>
    </div>
</div>

CSS

.circle{
    width: 400px;
    height: 400px;
    border-radius: 200px;
    background-color: red;
    margin: 0 auto;
}
.right-arrow{
    border-top: 100px solid transparent;
    border-right: none;
    border-bottom: 100px solid transparent;
    border-left: 100px solid black;
    position: absolute;
    margin-left: 175px;
    margin-top: 100px;
    width: 0px;
    height: 0px;
}
.outer-circle{
    background-color: maroon;
    height: 410px;
    width: 410px;
    border-radius: 205px;
}