JSFiddle - React, Tailwind, and code Playground

by amindunited

HTML

<link rel="stylesheet" href="https://rawgithub.com/OwlFonk/OwlCarousel/master/owl-carousel/owl.carousel.css"/>

<div class="wrapper">
    <div class="data-module">
        <div class="title">
            <h2 class="module-title hideBtn showBtn" href="#" collapse_type="collapse_next_races">
                Racing Next To Jump
            </h2>
        </div>
        <ul id="raceTabs" class="tabs">
            <li class="tab"> all</li>
            <li class="tab"> list</li>
            <li class="tab active"> act</li>
            <li class="tab"> foo</li>
            <li class="tab"> bar</li>
        </ul>
        <div class="tab-content">
            <a href="" class="scroll-left cnr cnrEDx5px disabled">
                <span class="arrowImage"></span>
            </a>
            <div class="owl-carousel">
                <table>
                    <thead>
                        <tr>
                            <td colspan='3'>
                                <h3 class="next_race_tip" title="title stuff">
                                    <img />
                                    <span class="next_race_link">
                                        Race Name
                                    </span>
                                    <span class="event_time_countdown_next_three_races time next3race_closed">
                                        CLOSED
                                    </span>
                                </h3>
                            </td>
                        </tr>
                        <tr>
                            <td>No.</td>
                            <td>Runner</td>
                            <td>Win</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Selection_name</td>
                            <td class="odds">3.00</td>
                        </tr>
                   ...

CSS

.wrapper {
    width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.inside {
    width: 200px;
    height: 100px;
}
// The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
.clearfix() {
	*zoom:1;

	&:before,
	&:after {
	    content:"";
	    display:table;
	}
	&:after {
	    clear:both;
	}
}
@border-radius: 5px;
@module-open-close-button: url('/luxbet/images/head/head/module-open-close.png');
.table-row-background {
        background-color: #e9e9e9;
    background: rgb(238,238,238); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,238,238,1)), color-stop(100%,rgba(204,204,204,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}
.data-module {
    border-radius: @border-radius;
    background: #EDEDED;
    padding: 8px;
    margin: 5px 0;
}
.data-module ul {
    list-style:none;
    margin-bottom: 0;
    .clearfix;
}
.data-module .module-title {
    color: #131313;
    font-family: HelveticaNeueBdCn;
    font-size: 16px;
    padding: 0 20px;
    margin-bottom: 6px;
    text-transform: none;
}
.data-module .title {
    background: url('/luxbet/images/head/head/module-open-close.png') no-repeat 0 8px transparent;
    cursor: pointer;
    padding-right: 20px;
    float: left;
    height: 33px;
    line-height: 24px;
}
.data-module .title h2...

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

$(function(){
    $('.owl-carousel').owlCarousel({items: 3});
});