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;
  box-shadow: 0 0 20px 20px #ff4444;
  border-radius: 50%;
  padding: 2px;
}

#halo i {
  text-align:center;
}

#halo i:before {
  display:inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 20px;
  display: inline-block;
  position: relative;
  top: 0px;
  left: 0px;
}