JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<BR>
<div class="container rounded shadow-lg p-0 " style="max-width: 360px;height:600px">
<BR>

  <nav class="navbar navbar-expand-lg navbar-dark ">
    <div class="container-fluid">
        <button class="btn navbar-btn">
        <i class="fas fa-chevron-left text-white"></i>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <span class="navbar-brand mb-0 h1 mx-auto">Section Title</span>
      </div>
      <div class="d-flex justify-content-end">
        <button class="btn navbar-btn">
          <i class="fas fa-user-astronaut text-white"></i>
        </button>
      </div>
    </div>
  </nav>
</div>

CSS

.container {
    background: linear-gradient(45deg,  #FFFF00, #FFA500, #FFA500);
  }