JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<div class="demo">
        <div class="section">
            <a href="#" class="button" title=".button : Standard Button, Standard Size">.button</a> 
            <a href="#" class="button big" title=".big : Extra Large (Because Size Does Matter)">.big</a> 
            <a href="#" class="button small" title=".small : Tiny Button, Great with Inline Text">.small</a> 
            <a href="#" class="button square" title=".square : Square Corners, for a Retro Angular Look">.square</a> 
            <a href="#" class="button highlight" title=".highlight : Catch the User's Attention with a Glow">.highlight</a>
        </div>
        <div class="section">
            <a href="#" class="button left" title=".left : Left-hand Side of a Panel">.left</a><a href="#" class="button middle" title=".middle : No Rounded Corners &amp; No Border on Right-hand Side">.middle</a><a href="#" class="button middle" title=".middle : No Rounded Corners &amp; No Border on Right-hand Side">.middle</a><a href="#" class="button right" title=".right : Right-hand Side of a Panel">.right</a> 
        </div>
        <div class="section">
            <a href="#" class="button disabled" title=".disabled : Unusable, Dulled Button">.disabled</a>
            <a href="#" class="button blue colours" title=".blue : Customized Button Colour">.blue</a> 
            <a href="#" class="button red colours" title=".red : Customized Button Colour">.red</a> 
            <a href="#" class="button green colours" title=".green : Customized Button Colour">.green</a> 
            <a href="#" class="button orange colours" title=".orange : Customized Button Colour">.orange</a> 
            <a href="#" class="button purple colours" title=".purple : Customized Button Colour">.purple</a>
            <a href="#" class="button black colours" title=".dark : Designed for Black/Grey Websites">.gray</a> 
            <a href="#" class="button color1 colours" title=".color1 : Designed for Black/Grey Websites">.#80a9da</a> 
           ...

CSS

*{padding: 0;margin: 0;}
        body {
            padding: 30px 100px;
            font-size: 13px;
        }
        .demo {
            width: 300px;
            padding: 10px;
            border: 1px solid #ccc;
        }
        a:link, 
        a:visited    {
            color:#FFF;
            text-decoration: none;
        }
        a:hover, 
        a:focus, 
        a:active{
            color:#FFF;
            text-decoration: none;
        }
        
        /*==Buttons==*/
        .button    {
            /* Set Defaults */
            border: 1px solid rgba(0, 0, 0, 0.3);
            cursor: pointer;
            display: inline-block;
            font: bold 1em/2em Arial, Helvetica;
            height: 27px;
            line-height: 27px;
            margin: 4px 6px;
            outline: 0;            
            padding: 0 16px;
            text-shadow: 1px 1px 1px #FFF;
            text-align: center;
            /* Border Radius */
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            /* Box Shadow */
            -moz-box-shadow: inset 1px 1px 5px rgba(255,255,255,0.2), 0 0 4px rgba(255,255,255,0.5);
            -webkit-box-shadow: inset 1px 1px 5px rgba(255,255,255,0.2), 0 0 4px rgba(255,255,255,0.5);
            box-shadow: inset 1px 1px 5px rgba(255,255,255,0.2), 0 0 4px rgba(255,255,255,0.5);            
            -webkit-transition:all 0.3s ease-in-out;
          -moz-transition:all 0.3s ease-in-out;
          -o-transition:all 0.3s ease-in-out;
          transition:all 0.3s ease-in-out;
            /* Gradient Background */
            background-color: #e0e0e0;
            background-image: -webkit-gradient(linear, left top, left bottom, from(#f7edff),to(#b1b1b1));
            background-image: -moz-linear-gradient(top, #f7edff, #b1b1b1);
            background-image: -webkit-linear-gradient(top, #f7edff, #b1b1b1);
            background-image: -ms-linear-gradient(top,...