JSFiddle - React, Tailwind, and code Playground

by BoxMan0617

HTML

<script src="http://lesscss.googlecode.com/files/less-1.3.0.min.js"></script>
<div id="experian">
    <div class="small dot red outter_top_1"></div>
    <div class="small dot blue outter_top_2"></div>
    <div class="small dot red outter_top_3"></div>
    <div class="small dot blue outter_top_4"></div>
    
    <div class="small dot blue outter_left_1"></div>
    <div class="small dot red outter_left_2"></div>
    
    <div class="small dot red outter_right_1"></div>
    <div class="small dot blue outter_right_2"></div>
    
    <div class="small dot red outter_bottom_1"></div>
    <div class="small dot blue outter_bottom_2"></div>
    <div class="small dot red outter_bottom_3"></div>

    <div class="big dot blue inner_top_1"></div>
    <div class="big dot blue inner_top_2"></div>
    <div class="big dot blue inner_top_3"></div>
    <div class="big dot blue inner_top_4"></div>
    
    <div class="big dot blue inner_left_2"></div>
    <div class="big dot blue inner_left_3"></div>
    
    <div class="big dot blue inner_bottom_1"></div>
    <div class="big dot blue inner_bottom_2"></div>
    <div class="big dot blue inner_bottom_3"></div>
    <div class="big dot blue inner_bottom_4"></div>
    
    <div class="big dot blue inner_right_2"></div>
    <div class="big dot blue inner_right_3"></div>
</div>

CSS

@big_size: 21px;
@big_radius: 8px;
@small_radius: 6px;
@diff: 4px;

@inner_space: 5px;
@outter_space: 6px;
@inner_top: 45px;
@inner_left: 50px;
#experian {
    position: relative;
    height: 200px;
    width: 200px;
    .dot {
         position: absolute;
        margin: 0;
        padding: 0;
    }
    .big {
        width: @big_size;
        height: @big_size;
        border-radius: @big_radius;
    }
    .small {
        width: (@big_size - @diff);
        height: (@big_size - @diff);
        border-radius: @small_radius;
    }
    .blue { background-color: #025dac; }
    .red { background-color: #ed1850; }
    
    .outter_top_1 {
        top: (@inner_top - @big_size - @outter_space);
        left: (@inner_left - @big_size - @outter_space);
    }
    .outter_top_2 {
        top: (@inner_top - @big_size - @outter_space);
        left: (@inner_left + @big_size + @outter_space);
    }
    .outter_top_3 {
        top: (@inner_top - @big_size - @outter_space);
        left: (@inner_left + (@big_size * 2) + (@outter_space * 2));
    }
    .outter_top_4 {
        top: (@inner_top - @big_size - @outter_space);
        left: (@inner_left + (@big_size * 4) + (@outter_space * 4));
    }
    
    .outter_bottom_1 {
        top: (@inner_top + (@big_size * 4) + (@outter_space * 4));
        left: (@inner_left + 2);
    }
    .outter_bottom_2 {
        top: (@inner_top + (@big_size * 4) + (@outter_space * 4));
        left: (@inner_left + (@big_size * 2) + (@outter_space * 2));
    }
    .outter_bottom_3 {
        top: (@inner_top + (@big_size * 4) + (@outter_space * 4));
        left: (@inner_left + (@big_size * 4) + (@outter_space * 4));
    }
    
    .outter_left_1 {
        top: (@inner_top + @big_size + @outter_space);
        left: (@inner_left - @big_size - @outter_space);
    }
    .outter_left_2 {
        top: (@inner_top + (@big_size * 3) + (@outter_space * 3));
        left: (@inner_left - @big_size - @outter_space);
    }
    
    .outter_right_1 {
       ...

JavaScript

/*

    While we are waiting for JSFiddle to support LESS integration I figured
    I would get a work around sorted so I can still write it in here
    
    Twitter: @aaronlayton
*/

// Step 1: Select the style element and change it to text/less
$('head style[type="text/css"]').attr('type', 'text/less');

// Step 2: Tell LESS to refresh the styles
less.refreshStyles();

/* 
    You could put this as a oneliner and use it as a shim for JSFiddle

    (function(){ $('head style[type="text/css"]').attr('type', 'text/less');less.refreshStyles(); })()
    
*/