JSFiddle - React, Tailwind, and code Playground

by Chun

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container">
  <div class="icon one">
    <div class="fa fa-plus"></div>
  </div>
  <div class="icon two">
    <div class="fa fa-rocket"></div>
  </div>
  <div class="icon three">
    <div class="fa fa-anchor"></div>
  </div>
  <div class="icon four">
    <div class="fa fa-plane"></div>
  </div>
  <div class="icon five">
    <div class="fa fa-leaf"></div>
  </div>
  <div class="icon six">
    <div class="fa fa-lemon-o"></div>
  </div>
  <div class="icon facebook">
    <div class="fa fa-facebook"></div>
  </div>
  <div class="icon twitter">
    <div class="fa fa-twitter"></div>
  </div>
  <div class="icon github">
    <div class="fa fa-github"></div>
  </div>
  <div class="icon codepen">
    <div class="fa fa-codepen"></div>
  </div>
  <div class="icon linkedin">
    <div class="fa fa-linkedin"></div>
  </div>
  <div class="icon stack-exchange">
    <div class="fa fa-stack-exchange"></div>
  </div>
</div>

CSS

body, html {
    height: 100%;
    background: -webkit-radial-gradient(ellipse farthest-corner at bottom right, #cfcfcf, #efefef);
    background: radial-gradient(ellipse farthest-corner at bottom right, #cfcfcf, #efefef);
    background-attachment: fixed;
}
.container .icon {
    display: inline-block;
    text-align: center;
    line-height: 15vw;
    width: 15vw;
    height: 15vw;
    margin: 0.5em 0.25em;
    font-size: calc(15vw / 2);
    border-radius: 50%;
    overflow: hidden;
    color: white;
}
.container .one {
    background-color: #2ecc71;
    text-shadow: 2px 2px 0 #208e4e , 2px 2px  0 #208f4f , 3px 3px  0 #209050 , 4px 4px  0 #219150 , 5px 5px  0 #219251 , 6px 6px  0 #219351 , 7px 7px  0 #219352 , 8px 8px  0 #219452 , 9px 9px  0 #229553 , 10px 10px  0 #229653 , 11px 11px  0 #229753 , 12px 12px  0 #229854 , 13px 13px  0 #229854 , 14px 14px  0 #239955 , 15px 15px  0 #239a55 , 16px 16px  0 #239b56 , 17px 17px  0 #239c56 , 18px 18px  0 #239d57 , 19px 19px  0 #239d57 , 20px 20px  0 #249e58 , 21px 21px  0 #249f58 , 22px 22px  0 #24a059 , 23px 23px  0 #24a159 , 24px 24px  0 #24a259 , 25px 25px  0 #25a25a , 26px 26px  0 #25a35a , 27px 27px  0 #25a45b , 28px 28px  0 #25a55b , 29px 29px  0 #25a65c , 30px 30px  0 #26a75c , 31px 31px  0 #26a75d , 32px 32px  0 #26a85d , 33px 33px  0 #26a95e , 34px 34px  0 #26aa5e , 35px 35px  0 #26ab5f , 36px 36px  0 #27ac5f , 37px 37px  0 #27ac5f , 38px 38px  0 #27ad60 , 39px 39px  0 #27ae60 , 40px 40px  0 #27af61 , 41px 41px  0 #28b061 , 42px 42px  0 #28b162 , 43px 43px  0 #28b162 , 44px 44px  0 #28b263 , 45px 45px  0 #28b363 , 46px 46px  0 #29b464 , 47px 47px  0 #29b564 , 48px 48px  0 #29b665 , 49px 49px  0 #29b665 , 50px 50px  0 #29b765 , 51px 51px  0 #29b866 , 52px 52px  0 #2ab966 , 53px 53px  0 #2aba67 , 54px 54px  0 #2abb67 , 55px 55px  0 #2abb68 , 56px 56px  0 #2abc68 , 57px 57px  0 #2bbd69 , 58px 58px  0 #2bbe69 , 59px 59px  0 #2bbf6a , 60px 60px  0 #2bc06a , 61px 61px  0 #2bc06b , 62px 62px  0 #2cc16b , 63px 63px  0...