JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
        <div class="post">
            <h1>Seja bem-vindo!</h1>
            
            <p>
                Este é o conteúdo
            </p>
        </div>
        <div class="post">
            <h1>Seja bem-vindo!</h1>
            
            <p>
                Este é o conteúdo
            </p>
        </div>
        <div class="post">
            <h1>Seja bem-vindo!</h1>
            
            <p>
                Este é o conteúdo
            </p>
        </div>
        <div class="post">
            <h1>Seja bem-vindo!</h1>
            
            <p>
                Este é o conteúdo
            </p>
        </div>
        <div class="post">
            <h1>Seja bem-vindo!</h1>
            
            <p>
                Este é o conteúdo
            </p>
        </div>
        <div class="post">
            <h1>Seja bem-vindo!</h1>
            
            <p>
                Este é o conteúdo
            </p>
        </div>
        <div class="post">
            <h1>Seja bem-vindo!</h1>
            
            <p>
                Este é o conteúdo
            </p>
        </div>
    </div>

CSS

html, body {margin: 0; padding: 0;}
    
    #content {
        width: auto;
        height: 210px;
        border: 5px solid red;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
    }
    
    #content .post {
        background-color: gray;
        width: 300px;
        display: inline-block;
        vertical-align: middle;
    }
    
    .post h1 {
        font-size: 24px;
    }
        
    .post p {
        font-size: 14px;
        margin-top: 15px;
    }