JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
	<li class="box" style="background-color: red;">
		<div class="box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis autem quos saepe tempore animi voluptatum molestiae ratione nostrum consectetur aut sunt quibusdam quaerat assumenda commodi corrupti ad eveniet illo eius.</div>
	</li>
	<li class="box" style="background-color: green;">
		<div class="box-inner">green</div>
	</li>
	<li class="box" style="background-color: blue;">
        <div class="box-inner">
            blue Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita deserunt non repellat itaque cupiditate sapiente alias dolores quam pariatur accusantium eum iure ipsa atque illum voluptate placeat quasi officia ad.
        </div>
		<div style="background-color: #ff0;" class="badge">badge</div>
	</li>
</div>

CSS

.box {
	float: left;
	width:100px;
	height: 100px;
	border: 1px solid black;
	margin: 10px; 5px;
	text-align: center;
	vertical-align: middle;
	position: relative;
}
.box-inner {
    width:100%;
    height:100%;
    overflow:hidden;
}
.badge {
	position: absolute;
	width:100px;
	height: 100px;
	border: 1px solid black;
	text-align: center;
	vertical-align: middle;
	bottom: -55px;
}
.container {
	border:1px solid black;
	width: 500px;
	height: 120px;
	margin: 20px auto 0px;
	background-color: grey;
}