JSFiddle - React, Tailwind, and code Playground

by TheNix

HTML

<div class="outer">
    <div class="inner">RESIZE WINDOW PLZ ↔</div>
</div>

CSS

.outer {
    background: #ee3300;
    height: 200px;
    position: relative;
    width: 200px;
}

.inner {
    background: rgba(0,0,0,.5);
    color: #fff;
    height: 30px;
    position: absolute;
        bottom: 0;
    text-align: center;
    width: 100%;
}

@media (min-width:500px) {
    .outer {
        height: 400px;
        width: 300px;
    }
}

@media (min-width:600px) {
    .outer {
        height: 100px;
        width: 600px;
    }

}

@media (min-width:700px) {
    .outer {
        height: 200px;
        width: 80px;
    }

}