JSFiddle - React, Tailwind, and code Playground

by Entoarox

HTML

<command icon="http://www.colorzilla.com/favicon.ico" label="Save" type="command"></command>

<div class="test"><div> Test graphic! <br />MAAAJOR POWEEEEER! <br />MAAAJOR POWEEEEER! <br />MAAAJOR POWEEEEER! <br />MAAAJOR POWEEEEER! <br />MAAAJOR POWEEEEER! <br />MAAAJOR POWEEEEER! <br />MAAAJOR POWEEEEER! <br />MAAAJOR POWEEEEER! <br />MAAAJOR POWEEEEER! <br />MAAAJOR POWEEEEER! <br />MAAAJOR POWEEEEER! <br />MAAAJOR POWEEEEER! <br />MAAAJOR POWEEEEER! <br />MAAAJOR POWEEEEER! <br />MAAAJOR POWEEEEER! <br />MAAAJOR POWEEEEER! <br />MAAAJOR POWEEEEER! <br />MAAAJOR POWEEEEER! <br />MAAAJOR POWEEEEER! </div><br />MAAAJOR POWEEEEER!</div>

CSS

command[type="command"]
{
    display:inline-block;
    min-width:21px;
    border-radius:5px;
    min-height:21px;
    padding:2px;
    border:1px solid #888;
background: rgb(254,255,232);
background: -moz-linear-gradient(top,  rgba(254,255,232,1) 0%, rgba(214,219,191,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,255,232,1)), color-stop(100%,rgba(214,219,191,1)));
background: -webkit-linear-gradient(top,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%);
background: -o-linear-gradient(top,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%);
background: -ms-linear-gradient(top,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%);
background: linear-gradient(to bottom,  rgba(254,255,232,1) 0%,rgba(214,219,191,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffe8', endColorstr='#d6dbbf',GradientType=0 );
}
command:after
{
    content:attr(label);
    line-height:21px;
}
command[type="command"]:hover,command[type="command"]:hover
{
background: rgb(252,255,244);
background: -moz-linear-gradient(top,  rgba(252,255,244,1) 0%, rgba(223,229,215,1) 40%, rgba(179,190,173,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,255,244,1)), color-stop(40%,rgba(223,229,215,1)), color-stop(100%,rgba(179,190,173,1)));
background: -webkit-linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%);
background: -o-linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%);
background: -ms-linear-gradient(top,  rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%);
background: linear-gradient(to bottom,  rgba(252,255,244,1) 0%,rgba(223,229,215,1) 40%,rgba(179,190,173,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
}
command[type="command"]:active
{
background: rgb(214,219,191);
background:...

JavaScript

function clone(a)
{
    var b=function(){};
    b.prototype=a;
    return new b;
}