JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

    <title>Downloader</title>
  </head>

  <body>

    <div class="conainer-fluid">
      <div class="row">
        <div class="col">
          <div class="row">
            <div class="col bg-primary">
              <p>Sites-Banner</p>
            </div>
          </div>
          <div class="row">
            <div class="col bg-secondary">
              <p>Sites-Search</p>
            </div>
          </div>
        </div>
        <div class="col bg-danger">
          <p>User-Login</p>
        </div>
        <div class="col">
          <div class="row">
            <div class="col bg-info">
              <p>Download-Banner</p>
            </div>
          </div>
          <div class="row">
            <div class="col bg-light">
              <p>Download-Summary</p>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col bg-success">
          <p>Sites-List</p>
          <p>Sites-List</p>
          <p>Sites-List</p>
          <p>Sites-List</p>
          <p>Sites-List</p>
          <p>Sites-List</p>
          <p>Sites-List</p>
          <p>Sites-List</p>
          <p>Sites-List</p>
          <p>Sites-List</p>
          <p>Sites-List</p>
          <p>Sites-List</p>
          <p>Sites-List</p>
          <p>Sites-List</p>
          <p>Sites-List</p>
        </div>
        <div class="col bg-warning">
          <p>User-Operations</p>
          <p>User-Operations</p>
          <p>User-Operations</p>
          <p>User-Operations</p>
          <p>User-Operations</p>
         ...