JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div id="wrapper">
    <div class="row">
        <div class="col-12">
            <p id="breadcrumbs">
                Breadcrumbs
            </p>

            <h1>...</h1>
            <p class="info">
                Info<br>info<br>
            </p>

            <div class="row">
                <section id="side" class="col-md-4 col-lg-3">
                    ...
                </section>

                <section class="col-md-8 col-lg-9">
                    <div class="row">
                        <div class="col-4">
                            col 4
                        </div>
                        <div class="col-8">
                            col 8
                        </div>
                        <ul id="data" class="row gx-5">
                            <li class="col-4">...</li>
                            <li class="col-4">...</li>
                            <li class="col-4">...</li>
                            <li class="col-4">...</li>
                        </ul>
                    </div>
                </section>
            </div>
        </div>
      </div>
  </div>

CSS

#wrapper {background: yellow; max-width: 500px; margin: 0 auto; }
.info {background: blue;}
#side {background: red}
#data {background: orange;}