JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

        <title>Hello, world!</title>
    </head>
    <body class="bg-secondary">
        <div class="p-1 p-sm-3">
            <div class="d-flex justify-content-center text-center" style="overflow-x: auto;">
                <div class="px-4 py-5 mx-1 bg-white rounded">
                    <h3>04</h3>
                    <p>04/01/2020</p>
                </div>
                
                <div class="px-4 py-5 mx-1 bg-white rounded">
                    <h3>04</h3>
                    <p>04/01/2020</p>
                </div>
                
                <div class="px-4 py-5 mx-1 bg-white rounded">
                    <h3>04</h3>
                    <p>04/01/2020</p>
                </div>
                
                <div class="px-4 py-5 mx-1 bg-white rounded">
                    <h3>04</h3>
                    <p>04/01/2020</p>
                </div>
                
                <div class="px-4 py-5 mx-1 bg-white rounded">
                    <h3>04</h3>
                    <p>04/01/2020</p>
                </div>
                
                <div class="px-4 py-5 mx-1 bg-white rounded">
                    <h3>04</h3>
                    <p>04/01/2020</p>
                </div>
                
                <div class="px-4 py-5 mx-1 bg-white rounded">
                    <h3>04</h3>
                    <p>04/01/2020</p>
                </div>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj"...