JSFiddle - React, Tailwind, and code Playground

by Shane

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div id="frame">
  
  <div id="halo">
    <i class="fa fa-check-circle"></i>
  </div>
  
</div>

CSS

#frame {
  text-align: center;
  margin-top: 80px;
}

#halo {
  display: inline-block;
  font-size: 58px;
  /*box-shadow: 0 0 20px 20px #ff4444;*/
  border-radius: 50%;
  width: 60px;
  height: 60px;
}

#halo i {
  padding: 3px;
  width: 60px;
  height: 60px;
  display: inline-block;
  vertical-align: baseline;
  text-shadow: 0 0 20px #ff4444;
}

#halo i:before {
  display:inline-block;
  width: 60px;
  height: 60px;
}