JSFiddle - React, Tailwind, and code Playground
by Yuriy Petrichenko
HTML
<div class="father">
<div class="box1">
<div class="little1">
1
</div>
</div>
<div class="box2">
<div class="little2">
2
</div>
</div>
<div class="box3">
<div class="little3">
3
</div>
<div class="little3">
3
</div>
</div>
<div class="box4">
<div class="little4">
4
</div>
<div class="little4">
4
</div>
<div class="little4">
4
</div>
</div>
<div class="box5">
<div class="little5">
5
</div>
<div class="little5">
5
</div>
<div class="little5">
5
</div>
<div class="little5">
5
</div>
</div>
</div>
CSS
.father{
display:flex;
}
.box1{
width:100px;
height:100px;
background-color:red;
display:flex;
align-items:flex-end;
}
.box2{
width:100px;
height:100px;
background-color:orange;
display:flex;
align-items:flex-end;
justify-content:flex-end;
}
.box3{
width:100px;
height:100px;
background-color:blue;
display:flex;
justify-content:space-between;
align-items:center;
}
.box4{
width:100px;
height:100px;
background-color:black;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center;
}
.box5{
width:100px;
height:100px;
background-color:yellow;
display:flex;
flex-direction:column;
align-items:center;
justify-content:flex-end;
}
.little1{
border:3px solid black;
height:30px;
width:30px;
background-color:#fff;
}
.little2{
border:3px solid black;
height:30px;
width:30px;
background-color:silver;
}
.little3{
border:3px solid black;
height:30px;
width:30px;
background-color:lightgreen;
}
.little4{
border:3px solid #fff;
height:20px;
width:20px;
background-color:orange;
}
.little5{
border:1px solid black;
height:20px;
width:20px;
background-color:blue;
}