JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<link href="https://file.myfontastic.com/waDv65qHUBEkhUrsgK8rVC/icons.css" rel="stylesheet">


<div class="icon-16">
	<p>16px</p>
  <ul>
    <li><i class="icon-bbox-no-left"></i></li>
    <li><i class="icon-bbox-no-right"></i></li>
    <li><i class="icon-bbox-no-uturn"></i></li>
    <li><i class="icon-bbox-no-straight"></i></li>
    <li><i class="icon-bbox-oneway"></i></li>
  </ul>
</div>

<div class="icon-20">
	<p>20px</p>
  <ul>
    <li><i class="icon-bbox-no-left"></i></li>
    <li><i class="icon-bbox-no-right"></i></li>
    <li><i class="icon-bbox-no-uturn"></i></li>
    <li><i class="icon-bbox-no-straight"></i></li>
    <li><i class="icon-bbox-oneway"></i></li>
  </ul>
</div>

<div class="icon-24">
	<p>24px</p>
  <ul>
    <li><i class="icon-bbox-no-left"></i></li>
    <li><i class="icon-bbox-no-right"></i></li>
    <li><i class="icon-bbox-no-uturn"></i></li>
    <li><i class="icon-bbox-no-straight"></i></li>
    <li><i class="icon-bbox-oneway"></i></li>
  </ul>
</div>


<div class="icon-60">
	<p>60px</p>
  <ul>
    <li><i class="icon-bbox-no-left"></i></li>
    <li><i class="icon-bbox-no-right"></i></li>
    <li><i class="icon-bbox-no-uturn"></i></li>
    <li><i class="icon-bbox-no-straight"></i></li>
    <li><i class="icon-bbox-oneway"></i></li>
  </ul>
</div>

SCSS

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	padding: 50px;
}

p {
	font-size: 20px;
	font-weight: bold;
	margin: 40px 0 10px;
}

ul {
	list-style-type: none;
	display: flex;
	
	li {
		margin-right: 16px;
	}
	
}

.icon-16 i {font-size: 16px;}
.icon-20 i {font-size: 20px;}
.icon-24 i {font-size: 24px;}
.icon-60 i {font-size: 60px;}