JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<div class="data-module">
    <ul id="raceTabs" class="tabs">
        <li class="title">
            <h2 class="module-title hideBtn showBtn" href="#" collapse_type="collapse_next_races">Racing Next To Jump</h2>
        </li>
        <li class="tab"> all</li>
    </ul>
</div>





<script src="https://rawgithub.com/less/less.js/master/dist/less-1.6.1.min.js"></script>

CSS

.inside {
    width: 200px;
    height: 100px;
}
@border-radius: 5px;
@module-open-close-button: url('/luxbet/images/head/head/module-open-close.png');

.data-module {
    border-radius: @border-radius;
    background: #EDEDED;
    padding: 8px;
    margin: 5px 0;
}
.data-module ul {
    list-style:none;
}
.data-module .module-title {
    color: #131313;
    font-family: HelveticaNeueBdCn;
    font-size: 16px;
    padding: 0 20px;
    margin-bottom: 6px;
    text-transform: none;
}
.data-module .tabs .title {
    background: url('/luxbet/images/head/head/module-open-close.png') no-repeat 0 8px transparent;
    cursor: pointer;
    padding-right: 20px;
}
.data-module .tabs .tab, .data-module .tabs li{
    float: left;
    padding-top: 7px;
    position: relative;
    text-transform: uppercase;
    text-align: center;
}

JavaScript

// 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();