JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


<div class="test"></div>

CSS

.test {
  margin: 100px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #3dc9b3;
  overflow: hidden;
  position: relative;
}

.test:before {
  content: "\f004";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  color: #fff;
  font-size: 60px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-shadow: 1px 1px #39bba7, 
  2px 2px #39bba7, 
  3px 3px #39bba7, 
  4px 4px #39bba7, 
  5px 5px #39bba7, 
  6px 6px #39bba7,
  7px 7px #39bba7,
  8px 8px #39bba7,
  9px 9px #39bba7,
  10px 10px #39bba7,
  11px 11px #39bba7,
  12px 12px #39bba7,
  13px 13px #39bba7,
  14px 14px #39bba7,
  14px 14px #39bba7,
  15px 15px #39bba7,
  16px 16px #39bba7,
  17px 17px #39bba7,
  18px 18px #39bba7,
  19px 19px #39bba7,
  20px 20px #39bba7,
  21px 21px #39bba7,
  22px 22px #39bba7,
  23px 23px #39bba7,
  24px 24px #39bba7,
  25px 25px #39bba7,
  26px 26px #39bba7,
  27px 27px #39bba7,
  28px 28px #39bba7,
  29px 29px #39bba7,
  30px 30px #39bba7,
  31px 31px #39bba7,
  32px 32px #39bba7,
  33px 33px #39bba7,
  34px 34px #39bba7,
  35px 35px #39bba7,
  36px 36px #39bba7,
  37px 37px #39bba7,
  38px 38px #39bba7;
}