JSFiddle - React, Tailwind, and code Playground

by andypotanin

HTML

<script src="http://cdn.udx.io/udx.requires.js"></script>
<div class="section container-fluid">
    <div class="row">
        <div class="col-md-12 module hero">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">full-width</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="section container">
    <div class="row">
        <div class="col-md-12 module-container">
            <div class="col-md-6">left</div>
            <div class="col-md-6">right</div>
        </div>
    </div>
</div>
<div class="section container">
    <div class="row">
        <div class="col-md-12 module-wrapper hero">
            <div class="col-xs-12">full-width</div>
        </div>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-4">left</div>
        <div class="col-md-4">middle</div>
        <div class="col-md-4">right</div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 module gallery">
            <div class="container">
                <div class="row">
                    <div class="col-xs-6 module">left hero</div>
                    <div class="col-xs-6 module">right hero</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-12 module gallery">
            <div class="container">
                <div class="row">
                    <div class="col-md-12 module">
                         <h2>Kitten Gallery</h2>

                        <aside data-requires="udx.ui.gallery" data-options="isotope:{}">
                            <img src="http://placekitten.com/200/300" />
                            <img src="http://placekitten.com/200/200" />
                            <img src="http://placekitten.com/200/150" />
                            <img src="http://placekitten.com/200/100"...

CSS

@import'//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css';
 .container {
}
div[class*='col-'] {
    box-shadow: inset 0 0 1px #dadada;
}
body {
}
.content {
}
.module {
}
.module.col-xs-6 {
    background-color: tomato;
}
.module.hero {
    background: url('http://placehold.it/1200x100.png') center center;
}
.module.gallery {
    background-color: yellow;
}
.module.hero > .container > .row > div {
    min-height: 100px;
}