JSFiddle - React, Tailwind, and code Playground

by Silvestrs Kante

CSS

#bundle {
    

    // Box shadows

    .box-shadow(...) {
        -webkit-box-shadow: @arguments;
        -moz-box-shadow: @arguments;
        box-shadow: @arguments;
    }

    .drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
        .box-shadow(@x-axis @y-axis @blur rgba(0, 0, 0, @alpha));
    }

    .inner-shadow(@horizontal: 0, @vertical: 0, @blur: 5px, @alpha: 0.15) {
        .box-shadow(inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha));
    }


    // Borders and Dimensions

    .bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) {
        border-top: solid 1px @top-color;
        border-left: solid 1px @left-color;
        border-right: solid 1px @right-color;
        border-bottom: solid 1px @bottom-color;
    }

    .rounded(@radius: 2px) {
        -webkit-border-radius: @radius;
        -moz-border-radius: @radius;
        border-radius: @radius;
    }

    .border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
        -webkit-border-top-right-radius: @topright;
        -webkit-border-bottom-right-radius: @bottomright;
        -webkit-border-bottom-left-radius: @bottomleft;
        -webkit-border-top-left-radius: @topleft;
        -moz-border-radius-topright: @topright;
        -moz-border-radius-bottomright: @bottomright;
        -moz-border-radius-bottomleft: @bottomleft;
        -moz-border-radius-topleft: @topleft;
        border-top-right-radius: @topright;
        border-bottom-right-radius: @bottomright;
        border-bottom-left-radius: @bottomleft;
        border-top-left-radius: @topleft;
        .background-clip(padding-box);
    }

    .box-sizing(@sizing: border-box) {
        -ms-box-sizing: @sizing;
        -moz-box-sizing: @sizing;
        -webkit-box-sizing: @sizing;
        box-sizing: @sizing;
    }

    .background-clip(@argument: padding-box) {
        -moz-background-clip: @argument;
        -webkit-background-clip: @argument;
       ...