JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<h2><code class="inline">1em</code> sized icons</h2>

<p>
  <code class="inline">.menu-icon</code>
</p>

<p>
  <span class="icon menu-icon"></span>
</p>

<p>
  <code class="inline">.add-icon</code>
</p>

<p>
  <span class="icon add-icon"></span>
</p>

<p>
  <code class="inline">.edit-icon</code>
</p>

<p>
  <span class="icon edit-icon"></span>
</p>

<p>
  <code class="inline">.left-arrow-icon</code>
</p>

<p>
  <span class="icon left-arrow-icon"></span>
</p>

<p>
  <code class="inline">.right-arrow-icon</code>
</p>

<p>
  <span class="icon right-arrow-icon"></span>
</p>

<p>
  <code class="inline">.down-arrow-icon</code>
</p>

<p>
  <span class="icon down-arrow-icon"></span>
</p>

<p>
  <code class="inline">.up-arrow-icon</code>
</p>

<p>
  <span class="icon up-arrow-icon"></span>
</p>

<p>
  <code class="inline">.left-arrow-icon</code>
</p>

<p>
  <span class="icon left-arrow-icon"></span>
</p>

<p>
  <code class="inline">.right-arrow-icon</code>
</p>

<p>
  <span class="icon right-arrow-icon"></span>
</p>

<p>
  <code class="inline">.down-arrow-icon</code>
</p>

<p>
  <span class="icon down-arrow-icon"></span>
</p>

<p>
  <code class="inline">.up-arrow-icon</code>
</p>

<p>
  <span class="icon up-arrow-icon"></span>
</p>

<p>
  <code class="inline">.ellipsis-icon</code>
</p>

<p>
  <span class="icon ellipsis-icon"></span>
</p>

<p>
  <code class="inline">.spinner-icon</code>
</p>

<p>
  <span class="icon spinner-icon"></span>
</p>

<h2><code class="inline">2em</code> sized icons</h2>

<p>
  <code class="inline">.menu-icon</code>
</p>

<p>
  <span class="icon icon-large menu-icon"></span>
</p>

<p>
  <code class="inline">.add-icon</code>
</p>

<p>
  <span class="icon icon-large add-icon"></span>
</p>

<p>
  <code class="inline">.edit-icon</code>
</p>

<p>
  <span class="icon icon-large edit-icon"></span>
</p>

<p>
  <code class="inline">.left-arrow-icon</code>
</p>

<p>
  <span class="icon icon-large left-arrow-icon"></span>
</p>

<p>
  <code...

CSS

</style>
<link rel="stylesheet" href="https://eager.io/3109d5add233/app.css">
<style>
body {
    margin: 1em
}

.icon {
    font-size: 1em
}

.icon-large {
    font-size: 2em
}