JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<div

CSS

.hbox {
    display: -webkit-box;
    -webkit-box-orient: horizontal;
    -webkit-box-align: stretch;
 
    display: -moz-box;
    -moz-box-orient: horizontal;
    -moz-box-align: stretch;
 
    display: box;
    box-orient: horizontal;
    box-align: stretch;
}
 
.hbox > * {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    display: block;
}
 
.vbox {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-align: stretch;
 
    display: -moz-box;
    -moz-box-orient: vertical;
    -moz-box-align: stretch;
 
    display: box;
    box-orient: vertical;
    box-align: stretch;
}
 
.vbox > * {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
    display: block;
}
 
.spacer {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}
 
.reverse {
    -webkit-box-direction: reverse;
    -moz-box-direction: reverse;
    box-direction: reverse;
}
 
.boxFlex0 {
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    box-flex: 0;
}
 
.boxFlex1, .boxFlex {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
}
 
.boxFlex2 {
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    box-flex: 2;
}
 
.boxGroup1 {
    -webkit-box-flex-group: 1;
    -moz-box-flex-group: 1;
    box-flex-group: 1;
}
 
.boxGroup2 {
    -webkit-box-flex-group: 2;
    -moz-box-flex-group: 2;
    box-flex-group: 2;
}
 
.start {
    -webkit-box-pack: start;
    -moz-box-pack: start;
    box-pack: start;
}
 
.end {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    box-pack: end;
}
 
.center {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
}