JSFiddle - React, Tailwind, and code Playground

by turiyag

HTML

<div>
    <button onclick="return false" class="super button">Awesome Button &raquo;
        <img src="/Buttons5/add-to-cart-light.png" alt=""
        width="28" height="20" />
    </button>
    <br />
    <br />
    <button onclick="return false" class="blue super button">
        <img class="cartadd" src="/Buttons5/add-to-cart-dark.png" alt="" height="20"
        width="28" />
    </button>
    <br />
    <br />
    <button onclick="return false" class="magenta super button">Magenta Button &raquo;</button>
    <br />
    <br />
</div>

CSS

body {
     background: #fff;
     font-family: Arial, Helvetica, Helvetica Neue, Verdana, sans-serif;
     font-size: 13px;
     line-height: 18px;
     color: #555;
     text-rendering: optimizeLegibility;
     -webkit-font-smoothing: antialiased;
 }
 body.chrome, body.safari {
     text-shadow: rgba(0, 0, 0, 0.1) 0px 0px 1px;
 }
 button {
     border: 0;
     font-family: inherit;
     text-align: left;
 }
 .button {
     background: #222 url(/Buttons2/overlay-button.png) repeat-x 0 0;
     display: inline-block;
     padding: 5px 15px 6px;
     color: #fff !important;
     font-size: 13px;
     font-weight: bold;
     line-height: 1;
     text-decoration: none;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
     -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
     text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
     border-bottom: 1px solid rgba(0, 0, 0, 0.25);
     position: relative;
     cursor: pointer;
     overflow: visible;
     width: auto;
     -webkit-user-select: none;
     -khtml-user-select: none;
     -moz-user-select: none;
     -o-user-select: none;
     user-select: none;
 }
 /* Make the buttons super awesomer */
 div .super.button {
     background-image: url(/Buttons2/36px-blended.png);
     /*padding: 6px 17px 8px;*/
     padding:6px 17px 8px;
     border: 1px solid rgba(0, 0, 0, .25);
     border-bottom-color: rgba(0, 0, 0, .35);
     -webkit-border-radius: 18px;
     -moz-border-radius: 18px;
 }
 button::-moz-focus-inner {
     border: 0;
     padding: 0;
 }
 .button:hover {
     background-color: #111;
     color: #fff;
 }
 .button:active {
     top: 1px;
     position: relative;
     -webkit-transform: translateY(1px);
     -moz-transform: translateY(1px);
 }
 /*Moving Down when clicked*/
 /*Button Colors*/
 .green.button {
     background-color: #91bd09;
 }
 .green.button:hover {
     background-color: #749a02;
 }
 .blue.button {
     background-color: #2daebf;
 }
...