JSFiddle - React, Tailwind, and code Playground

by Gereltod Gotsbayar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-12 getcolor">1</div>
    </div>
    <div class="row">
        <div class="col-md-4 getcolor">2</div>
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-6 getcolor">3</div>
                <div class="col-md-3 getcolor">4</div>
                <div class="col-md-3 getcolor">5</div>
            </div>
            <div class="row">
                <div class="col-md-3 getcolor">6</div>
                <div class="col-md-9 getcolor">7</div>
            </div>
            <div class="row">
                <div class="col-md-12 getcolor">8</div>
            </div>
        </div>
    </div>
</div>

CSS

div {
    height: 50px;
    background-color: #ddd;
}

JavaScript

$(function(){

    $(".getcolor").each(function(){
        console.log('hi');
    
        $(this).css('background-color', '#'+(Math.random()*0xFFFFFF<<0).toString(16));
    });

})