JSFiddle - React, Tailwind, and code Playground

by vals

HTML

<div id="top-to-bottom">
					<div id="a">A</div>
					<div id="b">B</div>
					<div id="c">C</div>
					<div id="d">D</div>
</div>

CSS

div#top-to-bottom {
	position: absolute;
    width:50px;
	text-align: left;
	float: left;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}
div#top-to-bottom > div {
	width: 50px;
	height: 50px;
	position: relative;
	float: right;
	display: block;
    -webkit-transform: scaleY(-1);
    transform: scaleY(-1);
}
div#a {
    background:blue;
}
div#b {
    background:red;
}
div#c {
    background:purple;
}
div#d {
    background:green;
}