JSFiddle - React, Tailwind, and code Playground

by julian_weinert

HTML

<div class="a">
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="b"></div>
    <div class="clearfix"></div>
</div>

CSS

* {
    margin: 0px;
    padding: 0px;
}
html, body {
    height: 100%;
    background-color: #EEEEEE;
}
.a {
    width: 400px;
    height: 300px;
    white-space: nowrap;
    display: inline-block;
    background-color: lightcoral;
    -webkit-box-sizing:border-box;
}
.b {
    float: left;
    width: 50px;
    height: 200px;
    margin-top: 50px;
    margin-left: 15px;
    display: inline-block;
    background-color: lightgreen;
    -webkit-box-sizing:border-box;
}
.clearfix {
    float: none;
    clear: both;
}