JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<div class="centered">
<button class="small button">ZORNET.RU</button>
<button class="small red button">ZORNET.RU</button>
<button class="small green button">ZORNET.RU</button>
<button class="small blue button">ZORNET.RU</button>

<br><br>

<button class="small button" disabled>ZORNET.RU</button>
<button class="small red button" disabled>ZORNET.RU</button>
<button class="small green button" disabled>ZORNET.RU</button>
<button class="small blue button" disabled>ZORNET.RU</button>

<br><br>

<ul class="button-group">
<li><button class="small button">ZORNET.RU</button></li>
<li><button class="small button">ZORNET.RU</button></li>
<li><button class="small button">ZORNET.RU</button></li>
<li><button class="small button">ZORNET.RU</button></li>
</ul>

<br><br><br><br>

<button class="button">ZORNET.RU</button>
<button class="red button">ZORNET.RU</button>
<button class="green button">ZORNET.RU</button>
<button class="blue button">ZORNET.RU</button>

<br><br>

<button class="button" disabled>ZORNET.RU</button>
<button class="red button" disabled>ZORNET.RU</button>
<button class="green button" disabled>ZORNET.RU</button>
<button class="blue button" disabled>ZORNET.RU</button>

<br><br>

<ul class="button-group">
<li><button class="button">Button</button></li>
<li><button class="button">Button</button></li>
<li><button class="button">Button</button></li>
<li><button class="button">Button</button></li>
</ul>

<br><br><br><br>

<button class="large button">Button</button>
<button class="large red button">Button</button>
<button class="large green button">Button</button>
<button class="large blue button">Button</button>

<br><br>

<button class="large button" disabled>Button</button>
<button class="large red button" disabled>Button</button>
<button class="large green button" disabled>Button</button>
<button class="large blue button" disabled>Button</button>

<br><br>

<ul class="button-group">
<li><button class="large button">ZORNET.RU</button></li>
<li><button class="large...

CSS

body{ 
    background:url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/wild_oliva.png);
}
.centered {
  margin:50px auto;
  text-align:center;
}

.button::-moz-focus-inner{
  border: 0;
  padding: 0;
}

.button{
  display: inline-block;
  *display: inline;
  zoom: 1;
  padding: 6px 20px;
  margin: 0;
  cursor: pointer;
  border: 1px solid #bbb;
  overflow: visible;
  font: bold 13px arial, helvetica, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  color: #555;
  
  background-color: #ddd;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
  background-image: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
  background-image: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
  background-image: -ms-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
  background-image: -o-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
  background-image: linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
  
  -webkit-transition: background-color .2s ease-out;
  -moz-transition: background-color .2s ease-out;
  -ms-transition: background-color .2s ease-out;
  -o-transition: background-color .2s ease-out;
  transition: background-color .2s ease-out;
  background-clip: padding-box; /* Fix bleeding */
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
  -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 2px 2px -1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .3) inset;
  text-shadow: 0 1px 0 rgba(255,255,255, .9);
  
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
 ...