JSFiddle - React, Tailwind, and code Playground

by thirtydot

HTML

<div class="outer">

            <div class="inner">

                <div class="floatdiv">
                    Some text.
                </div>

                <div class="floatdiv">
                    Some text.
                </div>

                <div class="floatdiv">
                    Some text.
                </div>

                <div class="floatdiv">
                    Some text.
                </div>

                <div class="clearboth">
                </div>

            </div>

        </div>

CSS

div.outer {
    text-align: center;
}

div.inner {
    display: inline-block;
    width: auto;
    border: 2px solid red;
}

div.floatdiv {
    display: block;
    float: left;
    width: 270px;
    height: 400px;
    margin: 5px;
    background-color: Gray;
    text-align: center;
}

div.clearboth {
    clear: both;
}




@media (max-width: 1123px) {
    div.inner {
        max-width: 843px;
        border-color: red;
    }
}
@media (max-width: 843px) {
    div.inner {
        max-width: 563px;
        border-color: magenta;
    }
}
@media (max-width: 563px) {
    div.inner {
        max-width: 280px;
        border-color: blue;
    }
}