JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<div class="text large">
    <button class="light">Button</button>
    <button class="dark ">Button</button>
    <button class="blue ">Button</button>
    <button class="pink ">Button</button>
    <button class="large light">Button</button>
    <button class="large  dark">Button</button>
    <button class="large  blue">Button</button>
    <button class="large  pink">Button</button>
    <button disabled class="light">Button</button>
    <button disabled class="dark ">Button</button>
    <button disabled class="blue ">Button</button>
    <button disabled class="pink">Button</button>
</div>

SCSS

@mixin color($value) {
    color: ie-hex-str($value);
    color: $value;
}

$x: 7px;

$font-size: 2 * $x;
$line-height: 3 * $x;
$font-family: "Proxima-Nova-Regular", "ProximaNova-Regular", "Proxima Nova Regular", "ProximaNova Regular", "Proxima Nova", "Proxima Sans", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
$font-weight: 300;



@mixin font {
    font-family: $font-family;
    font-weight: $font-weight;
    font-size: 1em;
    line-height: $line-height/$font-size*1em;
}

@mixin font-render {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: subpixel-antialiased;
}


html {font-size: $font-size/16px*100%}

body {
    padding: 0;
    margin: 0;
    @include font;
    @include font-render;
    
    color: #010101;
    color: rgba(0,0,0,.99);
    text-shadow: 0 1px 1px 1px rgba(255,255,255,.1);
    
    background-color: #FEFEFE;
    background-color: rgba(254,254,254);
}

.text {
    position: relative;
    min-width: 20em;
    max-width: 40em;
    margin: 0 auto;
    
    &.left    { text-align: left    }
    &.center  { text-align: center  }
    &.right   { text-align: right   }
    &.justify { text-align: justify }

    &.small { padding: $font-size }
    &.large { padding: $font-size * 2 }
}

* > * {
    &:first-child { margin-top:    0 !important}
    &:last-child  { margin-bottom: 0 !important}
}

p {
    margin: $line-height 0;
}

a {
    color: #db048d;
    text-decoration: none;
    border-bottom: 1px solid #fad4ec;
    cursor: pointer;
}
a:hover  { border-bottom-color: #db048d }
a:active { color: #ba0477 }
a:focus,
a:focus:hover {
    background: #db048d;
    
    @include color(rgba(255,255,255,.99));
    
    outline: 2px solid #db048d;
    border-bottom-color: #fad4ec;
}



blockquote {
    margin: $line-height 0;
    padding: 0 0 0 $x + ($x - 2px);
    border-left: 2px solid rgba(0,0,0,.25);
    
    font-style: italic;
    font-weight: 600;
    
    @include...