JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

    <nav class="navbar navbar-expand-md navbar-dark bg-dark sticky-top pt-1 pb-1">
      <div class="navbar-brand">
        Some brand
      </div>
    </nav>

                    
<main role="main">

  <div class="container-fluid">

    <div class="row mt-2">

        <!-- LEFT COLUMN -->
        <div class="col-12 col-lg-9 col-xl-10">

            <div class="row">

                <div class="col-12 col-xl-6">

                    <div class="card bg-danger mb-3">
                       <p>
                          Block 1
                       </p>
                    </div>

                </div>

                <div class="col-12 col-xl-6">
                    <div class="card bg-warning mb-3">
                    <p>
                       Block 2
                    </p>
                    </div>
                </div>

            </div>

        </div>

        <!-- RIGHT COLUMN -->
        <div class="col-12 col-lg-3 col-xl-2">


            <div class="card bg-info mb-3">
                <div class="card-header">Section 1</div>
                <div class="card-body text-center">
                   Section 1
                </div>
            </div>

            <div class="card text-white bg-primary mb-3">
                <div class="card-header">Section 2</div>
                <div class="card-body pt-2 pb-0 pl-3 pr-3">
                    Section 2
                </div>
            </div>
        </div>

    </div>

    <!-- Toasts -->
    <div aria-live="polite" aria-atomic="true" style="position: relative;">
    
      <!-- Position it -->
        <div style="position:...