JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="nav">
				<ul>
					<li><a class="" href="#">Mail</a></li>
					<li><a class="" href="#">Dribbble</a></li>
					<li><a class="" href="#">Facebook</a></li>
					<li><a class="" href="#">GooglePlus</a></li>
					<li><a class="" href="#">Twitter</a></li>
				</ul>
			</nav>

CSS

@font-face{
	font-family:'glyphs';
  
	src:url('http://irfandesign.com/dev/assets/fonts/glyphs.eot');
	src:url('http://irfandesign.com/dev/assets/fonts/glyphs.eot?#iefix') format('embedded-opentype'),
		url('http://irfandesign.com/dev/assets/fonts/glyphs.woff') format('woff'),
		url('http://irfandesign.com/dev/assets/fonts/glyphs.ttf') format('truetype'),
		url('http://irfandesign.com/dev/assets/fonts/glyphs.svg#glyphs') format('svg');
	font-weight: normal;
	font-style: normal;
	unicode-range: U+00-FFFF;
}

.nav{
	font-family:'glyphs';
	-moz-font-feature-settings:"liga=1, dlig=1";
	-moz-font-feature-settings:"liga","dlig";
	-ms-font-feature-settings:"liga","dlig";
	-o-font-feature-settings:"liga","dlig";
	-webkit-font-feature-settings:"liga","dlig";
	font-feature-settings:"liga","dlig";
	font-size:261.8%;
	text-rendering: optimizeLegibility;
}