JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<canvas width="300" height="300"></canvas>
<div class="center"></div>

CSS

canvas{
  position: relative;
  margin: 20px;
  border-radius: 100%;
  box-shadow: 15px 15px 25px #33333330,
  -15px -15px 20px #ffffff30,
  -5px -5px 5px inset #33333330,
  5px 5px 5px inset #ffffff30;
}
.center{
  position: absolute;
  display: block;
  height: 30px;
  width: 30px;
  top: 160px;
  left: 160px;
  margin: 0;
  border-radius: 100%;
  box-shadow: 5px 5px 10px inset #33333330,
  -5px -5px 10px inset #ffffff30;
}
body{
  background: #aaa;
}