JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="circle">
    
</div>

<div class="circle">
    
</div>

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="1" fill="red" />
</svg>

CSS

.circle{
    background-color:red;
    height:90px;
    width:90px;
    border-radius:50%;
    margin:10px;
    border:1px solid #000;
    display:inline-block;
}
.circle2{
    background-color:red;
    height:90px;
    width:90px;
    border-radius:50%;
    margin:10px;
    box-shadow: inset 0 0 0 -1px red
    display:inline-block;
}

.fa{
    font-size:100px;
    color:red;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    display:inline;
}