JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.6.3/less.min.js"></script>
<input id="cs_1" type="radio" checked="checked" name="colorscheme"/>
<input id="cs_2" type="radio" name="colorscheme"/>
<input id="cs_3" type="radio" name="colorscheme"/>
<div class="board">
    <div class="header">
        <h1>Plusa.ch</h1>
        <ul class="boardlist">
            <li>b</li>
            <li>a</li>
            <li>mu</li>
            <li>p</li>
            <li>h</li>
            <li>g</li>
            <li class="space"></li>
            <li>dev</li>
            <li>mod</li>
            <li>etc</li>
            <li class="space"></li>
            <li>@</li>
        </ul>
        <label for="cs_1">Plusaba</label>
        <label for="cs_2">Wakaba</label>
        <label for="cs_3">Daikiri</label>
    </div>
    <div class="nav">
        <p class="boardname">b</p>
        <div class="pager">
            <span class="current">1</span>
            <span>2</span>
        </div>
    </div>
    <div class="thread" data-thread-id="1">
        <div class="post" data-post-id="1">
            
        </div>
        <div class="post" data-post-id="2">
        </div>
        <div class="post" data-post-id="3">
        </div>
    </div>
    <div class="thread" data-thread-id="2">
        <div class="post" data-post-id="4">
            
        </div>
        <div class="post" data-post-id="5">
        </div>
        <div class="post" data-post-id="6">
        </div>
    </div>
</div>

CSS

@primary-color: red;
input[name='colorscheme'] {
    display: none;
    &:checked {
        &#cs_1 {
            &~.board {
                label[for='cs_1'] {
                    border: 1px solid black;
                }
                background: #369;
            }
        }
        &#cs_2 {
            &~.board {
                label[for='cs_2'] {
                    border: 1px solid black;
                }
                background:#639;
            }
        }
        &#cs_3 {
            &~.board {
                label[for='cs_3'] {
                    border: 1px solid black;
                }
                background: #693;
            }
        }
    }
}
.board { 
    padding: 30px;
    .header {
        h1 {
            text-align: center;
            border-bottom: 1px solid black;
            padding-bottom: 10px;
            margin-bottom: 10px;
        }
        width: 100%;
        &:after {
            clear: both;
            content: '';
            width: 100%;
            display: inline-block;
            border-bottom: 1px solid black;
        }
        .boardlist {
            list-style-type: none;
            float: left;
            margin: 0;
            li {
                display: inline-block;
                margin: 0;
                padding: 0;
                &:before {
                    content:'/';
                    padding-right: 3px;
                }
                &:last-child:after {
                    content:'/';
                    padding-left: 2px;
                }
                &.space {
                    &:after {
                        content: '|';
                        padding: 0 20px;
                    }
                }
            }
        }
        label {
            float: right;
            margin-left: 10px;
            padding: 0 3px;
            border: 1px solid transparent;
        }
    }
}

.somediv {
    background: #fff;
    padding: 15px;
    
    border-radius:...

JavaScript

/*
    jsFiddle does not directly support Less so we need these bits of code to bring it here. 
    
    Twitter: @aaronlayton
    Modified by meri
    Updated by max
*/

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

// Step 2: Set development mode to see errors
less.env = 'development';

// Step 3: Tell Less to refresh the styles
less.refreshStyles();