JSFiddle - React, Tailwind, and code Playground

by dipish

HTML

<div id="container">
    <div class="item active" id="item-1">
        <p>Brain games will make you smarter! The internet is making you dumber! Alcohol is killing your brain cells!</p>
        <div style="width: 100px; height: 100px; border: solid 1px red; margin: 0 auto;"></div>
    </div>
    <div class="item" id="item-2">
        <p>We're a stubborn people who become set in our ways, so it's no wonder we want to believe that our inclination</p>
        <div style="width: 100px; height: 100px; border: solid 1px blue; margin: 0 auto;"></div>
    </div>
</div>

CSS

#container {
    width: 600px;
    height: 200px;
    overflow: hidden;
    border: solid 2px gray;
    vertical-align: top;
}

    #container .item {
        width: 250px;
        height: 200px;
        margin-right: 20px;
        text-align: center;
        display: inline-block;
        vertical-align: top;
    }
        #container .item p {
            margin-bottom: 15px;
        }