JSFiddle - React, Tailwind, and code Playground

by klierik

HTML

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<ul>
    <li><i class="fas fa-check-circle"></i><span class="title">Vestibulum</span></li>
    <li><i class="fas fa-check-circle"></i><span class="title">Tristique Fringilla</span></li>
    <li><i class="fas fa-check-circle"></i><span class="title">Inceptos Nibh</span></li>
    <li><i class="fas fa-check-circle"></i><span class="title">Ipsum Cras</span></li>
    <li><i class="fas fa-check-circle"></i><span class="title">Quam Mollis</span></li>
</ul>

SCSS

body {
  padding: 5%;
}
ul {
  
  li {
    display: inline-block;
    margin: 0 10px;
    
    text-align: center;
    
    &:hover {
      color: red;
    }
  }
  
  .title {
    display: block;
    margin-top: 5px;
    
    text-transform: uppercase;
  }
}