JSFiddle - React, Tailwind, and code Playground

by icodeforlove

HTML

<!-- flex col layout -->
<div class="container">
    <div class="col col_1">1</div>
    <div class="col col_2">2</div>
    <div class="col col_3">3</div>
    <div class="col col_4">4</div>
</div>
<!-- flex row layout -->
<div class="container">
    <div class="row row_1">1</div>
    <div class="row row_2">2</div>
    <div class="row row_3">3</div>
    <div class="row row_4">4</div>
</div>

CSS

.container {
    position: relative;
    width: 400px;
    height: 100px;
}
.col {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 25%;
}
.col_1 {
    left: 0;
    background: #000;
}
.col_2 {
    left: 25%;
    background: #333;
}
.col_3 {
    left: 50%;
    background: #666;    
}
.col_4 {
    left: 75%;
    background: #999;    
}

.row {
    position: absolute;
    left: 0;
    right: 0;
    height: 25%;
}
.row_1 {
    top: 0;
    background: #000;
}
.row_2 {
    top: 25%;
    background: #333;
}
.row_3 {
    top: 50%;
    background: #666;    
}
.row_4 {
    top: 75%;
    background: #999;    
}