JSFiddle - React, Tailwind, and code Playground

by QMaster

HTML

<body>
    <div id="wrapper">
        <article class="clearfix">
            <section>This is section 1</section>
            <section>This is section 2</section>
            <section>This is section 3</section>
        </article>
    </div>
</body>

CSS

@media all and (orientation:portrait) {
    #wrapper
    {
        width: 98%;
        margin: 0 auto;
    }

    section
    {
        width: 98%;
        margin: 0px 0px 10px 0px;
        background-color: #ccc;
        color: black;
        float: none;
    }
}

@media all and (orientation:landscape) {
    #wrapper
    {
        width: 98%;
        margin: 0 auto;
    }

    section
    {
        width: 98%;
        margin: 0px 0px 10px 0px;
        background-color: red;
        color: black;
        float: none;
    }
}