JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/font-awesome.min.css">
<h4>Fontawesome 4.7</h4>
<div>
<i class="fa fa-bars" aria-hidden="true"></i>
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
<i class="fa fa-user" aria-hidden="true"></i>
<i class="fa fa-bar-chart" aria-hidden="true"></i>
<i class="fa fa-heart" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
</div>
<h4>Fontawesome 5</h4>
<div>
<span class="iconify" data-icon="fa-solid:bars" data-inline="false"></span>
<span class="iconify" data-icon="fa-solid:shopping-cart" data-inline="false"></span>
<span class="iconify" data-icon="fa-solid:user" data-inline="false"></span>
<span class="iconify" data-icon="fa-solid:user-alt" data-inline="false"></span>
<span class="iconify" data-icon="fa-solid:chart-bar" data-inline="false"></span>
<span class="iconify" data-icon="fa-solid:heart" data-inline="false"></span>
</div>
<h4>Dashicons</h4>
<div>

<span class="iconify" data-icon="dashicons:menu" data-inline="false"></span>
<span class="iconify" data-icon="dashicons:cart" data-inline="false"></span>
<span class="iconify" data-icon="dashicons:admin-users" data-inline="false"></span>
<span class="iconify" data-icon="dashicons:chart-bar" data-inline="false"></span>
<span class="iconify" data-icon="dashicons:heart" data-inline="false"></span>
</div>

<h4>Material Design Icons</h4>
<div>
<span class="iconify" data-icon="mdi:menu" data-inline="false"></span>
<span class="iconify" data-icon="mdi:cart" data-inline="false"></span>
<span class="iconify" data-icon="mdi:account" data-inline="false"></span>
<span class="iconify" data-icon="mdi:chart-box-outline" data-inline="false"></span>
<span class="iconify" data-icon="mdi:chart-box" data-inline="false"></span>
<span class="iconify" data-icon="mdi:heart" data-inline="false"></span>
</div>

<h4>Google Material Icons</h4>
<div>

<span...

CSS

body {
  font-size: 60px;
  font-family: sans-serif;
}
h4 {
  font-size: 40px;
  margin: 60px 0 20px;
}
div {
  padding: 10px;
}
div:hover {
  background: #BC152F;
  color: #fff;
}
a {
  font-size: 14px;
}