JSFiddle - React, Tailwind, and code Playground

by maxious

HTML

<section class="mtm clearfix" id="glyphs">
	<header>
		<h1>Class Names</h1>
	</header>
	<span class="box1">
		<span aria-hidden="true" class="icon-home"></span>
		&nbsp;icon-home
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-home-2"></span>
		&nbsp;icon-home-2
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-home-3"></span>
		&nbsp;icon-home-3
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-home-4"></span>
		&nbsp;icon-home-4
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-home-5"></span>
		&nbsp;icon-home-5
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-home-6"></span>
		&nbsp;icon-home-6
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-home-7"></span>
		&nbsp;icon-home-7
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-home-8"></span>
		&nbsp;icon-home-8
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-home-9"></span>
		&nbsp;icon-home-9
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-home-10"></span>
		&nbsp;icon-home-10
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-home-11"></span>
		&nbsp;icon-home-11
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-office"></span>
		&nbsp;icon-office
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-newspaper"></span>
		&nbsp;icon-newspaper
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-pencil"></span>
		&nbsp;icon-pencil
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-pencil-2"></span>
		&nbsp;icon-pencil-2
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-pencil-3"></span>
		&nbsp;icon-pencil-3
	</span>
	<span class="box1">
		<span aria-hidden="true" class="icon-pencil-4"></span>
		&nbsp;icon-pencil-4
	</span>
	<span class="box1">
		<span aria-hidden="true"...

CSS

section, header, footer {display: block;}
	body {
		font-family: sans-serif;
		color: #444;
		line-height: 1.5;
		font-size: 1em;
	}
	* {
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
	.glyph {
		font-size: 16px;
		float: left;
		text-align: center;
		background: #eee;
		padding: .75em;
		margin: .75em 1.5em .75em 0;
		width: 7em;
		border-radius: .25em;
		box-shadow: inset 0 0 0 1px #f8f8f8, 0 0 0 1px #CCC;
	}
	.glyph input {
		font-family: consolas, monospace;
		font-size: 13px;
		width: 100%;
		text-align: center;
		border: 0;
		box-shadow: 0 0 0 1px #ccc;
		padding: .125em;
	}
	.w-main {
		width: 80%;
	}
	.centered {
		margin-left: auto;
		margin-right: auto;
	}
	.fs1 {
		font-size: 2em;
	}
	header {
		margin: 2em 0;
		padding-bottom: .5em;
		color: #666;
		box-shadow: 0 2px #eee;
	}
	header h1 {
		font-size: 2em;
		font-weight: normal;
	}
	.clearfix:before, .clearfix:after { content: ""; display: table; }
	.clearfix:after, .clear { clear: both; }
	footer {
		margin-top: 2em;
		padding: .5em 0;
		box-shadow: 0 -2px #eee;
	}
	a, a:visited {
		color: #B35047;
		text-decoration: none;
	}
	a:hover, a:focus {color: #000;}
	.box1 {
		font-size: 16px;
		display: inline-block;
		width: 15em;
		padding: .25em .5em;
		background: #eee;
		margin: .5em 1em .5em 0;
	}

@font-face {
	font-family: 'icomoon-ultimate';
	src:url('http://webmax.ru/icomoon/fonts/icomoon-ultimate.eot');
	src:url('http://webmax.ru/icomoon/fonts/icomoon-ultimate.eot?#iefix') format('embedded-opentype'),
		url('http://webmax.ru/icomoon/fonts/icomoon-ultimate.woff') format('woff'),
		url('http://webmax.ru/icomoon/fonts/icomoon-ultimate.ttf') format('truetype'),
		url('http://webmax.ru/icomoon/fonts/icomoon-ultimate.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
	font-family:...