JSFiddle - React, Tailwind, and code Playground

by mukkaram waheed

HTML

<div>

        <button onclick="return false" class="super button">Awesome Button &raquo;
            <img src="http://www.particletree.com/examples/buttons/tick.png" alt=""/> 
        </button><br /><br />
        <button onclick="return false" class="blue super button" disabled="disabled">Blue Button &raquo;</button><br /><br />
        <button onclick="return false" class="magenta super button">Magenta Button &raquo;</button><br /><br />
        <button onclick="return false" class="red super button">Red Button &raquo;</button><br /><br />
        <button onclick="return false" class="orange super button">Orange Button &raquo;</button><br /><br />
        <button onclick="return false" class="orangellow super button">Yellow Button &raquo;</button><br /><br />
        <button onclick="return false" class="secondary super button">Secondary 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;
        }

         /* Make the buttons super awesomer */
        div .super.button {
            background-image: url(/Buttons2/36px-blended.png);
            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:...