JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<ul>
    <li>
        <i class="fa fa-user"></i> 1 Student
    </li>
    <li>
        <span class="users-2">
            <i class="fa fa-user"></i>
            <i class="fa fa-user"></i>
        </span>
        2 Students
    </li>
    <li>
        <i class="fa fa-users"></i> 3 Students
    </li>
</ul>

SCSS

body {
    font-family: Arial, Tahoma, sans-serif;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
    
    li {
        background-color: #fff;
        padding: 0.5em;
        margin: 0 0 1em 0;
    }
}

i.fa {
    margin-right: 1em;
    text-align: center;
}

.users-2 {
    position: relative;
    display: inline-block;
    width: 0.75em;
    height: 1em;
    margin-right: 1.3em;
    
    i {
        position: absolute;
        left: 0;
        top: 0;
        
        &:last-child {
            left: 0.5em;
            text-shadow: 0 1px 0 #ffffff;
        }
    }
}