JSFiddle - React, Tailwind, and code Playground

by terby

HTML

<div class="pane">
	<h1>Simple Buttons</h1>
	<span class="button"><p>N</p></span>
	<span class="button"><p>C</p></span>
	<span class="button"><p>H</p></span>
	<span class="button"><p>S</p></span>
	<span class="button"><p>U</p></span>
	<span class="button"><p>A</p></span>
</div>

<!-- Social buttons -->
<div class="pane social">
	<h1>Share Buttons</h1>
	<span class="button"><p class="t">t</p></span>
	<span class="button"><p class="s">s</p></span>
	<span class="button"><p class="y">y</p></span>
	<span class="button"><p class="f">f</p></span>
	<span class="button"><p class="g">g</p></span>
	<span class="button"><p class="k">k</p></span>
	<span class="button"><p class="l">l</p></span>
	<span class="button"><p class="m">m</p></span>

</div>

CSS

@font-face {
    font-family: 'pictos';
    src: url('http://web-gate.fr/fonts/websymbols-regular-webfont.ttf');
    src: url('http://web-gate.fr/fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('http://web-gate.fr/fonts/websymbols-regular-webfont.woff') format('woff'), url('http://web-gate.fr/fonts/websymbols-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
body {
    background: #999;
    font-family: 'pictos';
}
h1,
h2,
h3,
H4 {
    font-family: helvetica;
    font-weight: bold;
    background-color: #333;
    /*background-clip*/
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: rgba(0,0,0,0.3);
    text-shadow: rgba(255,255,255,0.3) 1px 1px 1px;
}
h1:before,
h1:after { content: " - " }
.pane {
    display: block;
    width: 520px;
	text-align: center;
    height: 260px;
    padding: 10px;
    margin: 20px auto;
    position: relative;
    /*box-shadow*/
    -webkit-box-shadow: 0px 0px 1px 0px rgba(0,0,0,1), 0px 3px 15px 2px rgba(0,0,0,1);
    -moz-box-shadow: 0px 0px 1px 0px rgba(0,0,0,1), 0px 3px 15px 2px rgba(0,0,0,1);
    box-shadow: 0px 0px 1px 0px rgba(0,0,0,1), 0px 3px 15px 2px rgba(0,0,0,1);
    border: 1px solid #5c5c5c;
    border-top: 1px solid #999;
    /*border-radius*/
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: rgba(0,0,0,0.8);
    background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%);
    background-image: -webkit-repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%);
    background-image: -moz-repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 25%, transparent 25%, transparent 50%);
    background-image: -ms-repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0%,...