JSFiddle - React, Tailwind, and code Playground

by Jasper Krielaars

HTML

<div class="container">
  <div class="big"></div>
  <div class="small"></div>
</div>

CSS

body{
  background: url('https://picsum.photos/200/300?image=1043');
  background-size:cover;
}

.container{
  position: relative;
  margin: 30px auto;
  width: 200px;
  height: 200px;
}

.big{
    position:absolute;
    width:200px; 
    height:200px;
    border-radius: 50%;
    overflow:hidden;
}
.big:after{
    content:'';
    position:absolute;
    top:100px;
    left:100px; 
    border-radius:50%;
    width:100px; 
    height:100px;
    box-shadow: 0px 0px 0px 2000px red;
}

.small{
  position: absolute;
  left: 105px;
  top: 105px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: green;
}