JSFiddle - React, Tailwind, and code Playground

by Bianca Kuehweidner

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.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.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <a id="logo" class="nav-link col col-md-2 orange">Label</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    	<span class="navbar-toggler-icon"></span>
  	</button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="col col-md-8 navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#services">Services</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#photos">Photos</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#contact">Contact</a>
      </li>
    </ul>
  </div>
</nav>

<div class="container-fluid">

    <div id="services" class="custom-container justify-content-md-center">
      <div class="inner col-md-10">
       <div class="row"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam convallis, mi ut pretium vestibulum, mauris leo euismod mi, et laoreet erat neque quis eros. Aenean id pellentesque erat. Pellentesque tempus purus magna, id interdum tellus egestas
          a. Integer at scelerisque ipsum. Phasellus vel nibh non elit pharetra tincidunt. Nullam in pretium dui. Aliquam a consequat nulla, eu iaculis arcu. Cras posuere elit urna, sed dictum tortor laoreet ac. Donec quis massa ipsum. Fusce nec ultrices
          tortor, eu congue mauris. Suspendisse hendrerit tempor scelerisque. Aliquam at urna quis diam rhoncus feugiat a non mauris....

CSS

html,
body {
  width: 100%;
  height: 100%;
}

.orange {
  color: #FF9800;
}

@media (max-width: 979px) {
  .custom-container {
    padding-top: 61px;
  }
}


.custom-container {
  display: flex;
  min-height: 100vh;
  height: auto;
  border: 1px solid black;
  padding-top: 61px;
}

.inner {
  padding: 5%;
  border: 1px solid white;
}


.container-fluid {
   overflow-y: auto;
}