JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">


<span class="fa-stack">
  <i class="fas fa-book-open fa-stack-1x"></i>
  <i class="fas fa-arrow-up fa-stack-1x fa-custom"></i>  
</span>
<span class="fa-stack">
  <i class="fas fa-book-open fa-stack-1x"></i>
  <i class="fas fa-arrow-up fa-stack-1x fa-custom2"></i>  
</span>

CSS

body {
  background: #3cb888;
  color: #0a4830;
}

.fa-stack {
  font-size: 65px;
}

i {
  vertical-align: middle;
}

.fa-custom {
  color: #3cb888;
  font-size: 45px;
  padding-top: 5px;
}
.fa-custom2 {
  color: #ffffff;
  font-size: 45px;
  padding-top: 5px;
}
.fa-stack:hover {
  background: #0a4830;
  color: #ffffff;
}
.fa-stack:hover .fa-custom2 {
   color: #0a4830;
}