JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<div class="shadow">
<div class="gear">

</div>
</div>

SCSS

body {
  background: #ccc;
}
.shadow {
  position: relative;
  width: 20px;
  height: 20px;
  -webkit-filter: drop-shadow(0 0 1px #000);
  filter: drop-shadow(0 0 1px #000);
}
.gear {
  position: absolute;
  top: 5px;
  left: 5px;
  width: 5px;
  height: 5px;
  border-radius: 100%;
  border-width: 3px;
  border-color: white;
  border-style: solid;
  background-color: #ccc;
  box-shadow: 0 0 1px 0 #000 inset;
  &:before, &:after {
    position: absolute;
    border-radius: 3px;
    background: white;
    left: 0;
    top: 0;
    content: '';
    z-index: -1;
  }
  &:before {
    height: 13px;
    width: 3px;
    margin-top: -4px;
    margin-left: -1px;
    box-shadow: 4px 0 0 0 white;
  }
  &:after {
    width: 13px;
    height: 3px;
    margin-top: -1px;
    margin-left: -4px;
    box-shadow: 0 4px 0 0 white;
  }
}