JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<h2>Icon</h2>
<p><span class="icon menu-icon"></span> Menu</p>

<h2>Icon in a link</h2>
<p>Notice how the link color is inherited into the box-shadows of the icon.</p>
<p><a href="javascript:;"><span class="icon menu-icon"></span> Menu</a></p>

<h2>Blue icon</h2>
<p>Just another example</p>
<p style="color: blue"><span class="icon menu-icon"></span> Menu</p>

CSS

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

.menu-icon {
    vertical-align: middle;
    position: relative;
    margin-right: .25em;
    top: -.125em
}