JSFiddle - React, Tailwind, and code Playground

by hito

HTML

<h1 id="intro" contenteditable="true">
    Css3 button snippet
</h1>
<div id="buttonLink">
    <a href="#" title="Link 1" id="link1">Link 1</a>
    <a href="#" title="Link 2" id="link2">Link 2</a>
    <a href="#" title="Link 3" id="link3">Link 3</a>
    <hr/>
</div>
<form id="inputLink">
    <input type="button" value="button 1" id="button1"/>
    <input type="button" value="button 2" id="button2"/>
    <input type="button" value="button 3" id="button3"/>
</form>

CSS

body { 
    font: normal 12px helvetica neue;
    text-shadow:1px 1px 0 rgba(0,0,0,.5);
    background-image: 
        -webkit-gradient(linear, 100% 100%, 0% 0%,
        from(transparent), color-stop(0.25, transparent),
        color-stop(0.25, hsla(0,0%,100%,.12)), color-stop(0.50, hsla(0,0%,100%,.12)),
        color-stop(0.50, transparent), color-stop(0.75, transparent),
        color-stop(0.75, hsla(0,0%,100%,.12)), to(hsla(0,0%,100%,.12)));
    background-image: 
        -webkit-linear-gradient(right bottom,
        transparent 0%, transparent 25%,
        hsla(0,0%,100%,.12) 25%, hsla(0,0%,100%,.12) 50%,
        transparent 50%, transparent 75%,
        hsla(0,0%,100%,.12) 75%, hsla(0,0%,100%,.12) 100%);
    background-image:
        -moz-linear-gradient(right bottom,
        transparent 0%, transparent 25%,
        hsla(0,0%,100%,.12) 25%, hsla(0,0%,100%,.12) 50%,
        transparent 50%, transparent 75%,
        hsla(0,0%,100%,.12) 75%, hsla(0,0%,100%,.12) 100%);
    background-image:
        -ms-linear-gradient(right bottom,
        transparent 0%, transparent 25%,
        hsla(0,0%,100%,.12) 25%, hsla(0,0%,100%,.12) 50%,
        transparent 50%, transparent 75%,
        hsla(0,0%,100%,.12) 75%, hsla(0,0%,100%,.12) 100%);
    background-image:
        -o-linear-gradient(right bottom,
        transparent 0%, transparent 25%,
        hsla(0,0%,100%,.12) 25%, hsla(0,0%,100%,.12) 50%,
        transparent 50%, transparent 75%,
        hsla(0,0%,100%,.12) 75%, hsla(0,0%,100%,.12) 100%);
    background-image:
        linear-gradient(right bottom,
        transparent 0%, transparent 25%,
        hsla(0,0%,100%,.12) 25%, hsla(0,0%,100%,.12) 50%,
        transparent 50%, transparent 75%,
        hsla(0,0%,100%,.12) 75%, hsla(0,0%,100%,.12) 100%);
    -webkit-background-size: 3px 3px;
       -moz-background-size: 3px 3px;
        -ms-background-size: 3px 3px;
         -o-background-size: 3px 3px;
            background-size: 3px 3px;
    background-color: #2e3a45;
 ...