JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='box'>
  <div class='h-100-pc flex horizontal eee'>
    <div class='item tomato'>
    
    </div>
    <div class='item teal'>
    
    </div>
  </div>
</div>


<div class='box'>
  <div class='h-100-pc flex horizontal center-vertical center-horizontal eee'>
    <div class='item tomato'>
    
    </div>
    <div class='item teal'>
    
    </div>
  </div>
</div>


<div class='box'>
  <div class='h-100-pc flex horizontal space-around eee'>
    <div class='item tomato'>
    
    </div>
    <div class='item teal'>
    
    </div>
  </div>
</div>


<div class='box'>
  <div class='h-100-pc flex horizontal center-vertical space-around eee'>
    <div class='item tomato'>
    
    </div>
    <div class='item teal'>
    
    </div>
  </div>
</div>


<div class='box'>
  <div class='h-100-pc flex horizontal full-span center-horizontal eee'>
    <div class='item auto tomato pad-horz-5'>
      stretch
    </div>
    <div class='item auto teal'>
      stretch
    </div>
  </div>
</div>


<div class='box'>
  <div class='h-100-pc flex horizontal full-span center-horizontal eee'>
    <div class='item auto tomato pad-horz-5'>
      stretch
    </div>
    <div class='item auto teal grow one'>
      stretch
    </div>
  </div>
</div>

<div class='box'>
  <div class='h-100-pc flex horizontal full-span center-horizontal eee'>
    <div class='item auto tomato'>
      <div class='h-100-pc flex vertical'>
        <div class='item tomato'>
          x
        </div>
        <div class='item gold grow one'>
          x
        </div>
      </div>
    </div>
    <div class='item auto teal'>
      stretch
    </div>
  </div>
</div>


<div class='box'>
  <div class='h-100-pc flex horizontal full-span center-horizontal eee'>
    <div class='item auto tomato grow one'>
      <div class='h-100-pc flex vertical'>
        <div class='item auto tomato'>
          x
        </div>
        <div class='item auto gold grow one'>
          x
        </div>
      </div>
    </div>
    <div...

CSS

body {
  text-align: center;
}
.box {
  display: inline-block;
  vertical-align: top;
  width: 200px;
  height: 200px;
  background-color: white;
  padding: 5px;
  margin: 10px 8px;
  box-shadow: 0 0 10px -3px;
}

.item {
  width: 50px;
  height: 50px;
}
.width-50 {
  width: 50px;
  height: auto;
}
.eee {
  background-color: #eee;
}
.teal {
  background-color: teal;
  color: white;
}
.tomato {
  background-color: tomato;
  color: white;
}
.gold {
  background-color: gold;
}
.h-100-pc {
  height: 100%;
}
.pad-horz-5 {
  padding: 0 5px;
}

/* flex-container props */
.flex {
  display: flex;
}
.horizontal {
  flex-direction: row;
}
.vertical {
  flex-direction: column;
}
.left {
  justify-content: flex-start;
}
.right {
  justify-content: flex-end;
}
.center-horizontal {
  justify-content: center;
}
.space-around {
  justify-content: space-around;
}
.space-betwee {
  justify-content: space-between;
}
.full-span {
  align-items: stretch;
  /*
  - if inner items have set width/height, will not stretch
  - needs content to stretch
  */
}
.full-span .item.auto {
  width: auto;
  height: auto;
}
.beginning {
  align-items: flex-start;
}
.end {
  align-items: flex-end;
}
.center-vertical {
  align-items: center;
}


/* individual item props */
.grow.one {
  flex-grow: 1;
}
.grow.two {
  flex-grow: 2;
}
.grow.three {
  flex-grow: 3;
}