JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<meta name="description" content="">
	<meta name="author" content="">
	<meta name="csrf-token" content="pbDrPlEI2EGRlzSkgIk1u9f1UGYgyC9dleSLTFbR">

	<link rel="icon" href="../../../../favicon.ico">

	<title>Dashboard Template for Bootstrap</title>
</head>

<body>
<div id="app">
<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow ">
	<a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a>
	<input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
	<ul class="navbar-nav px-3">
		<li class="nav-item text-nowrap">
			<a class="nav-link" href="#">Sign out</a>
		</li>
	</ul>
</nav>

<div class="container-fluid mt-4">

	<div class="row">
		<nav class="col-md-2 d-none d-md-block bg-light sidebar">
    <div class="sidebar-sticky">
        <ul class="nav flex-column">
            <li class="nav-item">
                <a class="nav-link active" href="#">
                    <span><i class="fa fa-dashboard"></i></span> Search <span class="sr-only">(current)</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">
                    <i class="fa fa-address-book"></i>
                    Orders
                </a>
            </li>
            <li class="nav-item">
                <a...

CSS

body {
			font-size: .875rem;
		}

		.feather {
			width: 16px;
			height: 16px;
			vertical-align: text-bottom;
		}

		/*
         * Sidebar
         */

		.sidebar {
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			z-index: 100; /* Behind the navbar */
			padding: 48px 0 0; /* Height of navbar */
			box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
		}

		.sidebar-sticky {
			position: relative;
			top: 0;
			height: calc(100vh - 48px);
			padding-top: .5rem;
			overflow-x: hidden;
			overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
		}

		@supports ((position: -webkit-sticky) or (position: sticky)) {
			.sidebar-sticky {
				position: -webkit-sticky;
				position: sticky;
			}
		}

		.sidebar .nav-link {
			font-weight: 500;
			color: #333;
		}

		.sidebar .nav-link .feather {
			margin-right: 4px;
			color: #999;
		}

		.sidebar .nav-link.active {
			color: #007bff;
		}

		.sidebar .nav-link:hover .feather,
		.sidebar .nav-link.active .feather {
			color: inherit;
		}

		.sidebar-heading {
			font-size: .75rem;
			text-transform: uppercase;
		}

		/*
         * Content
         */

		[role="main"] {
			padding-top: 48px; /* Space for fixed navbar */
		}

		/*
         * Navbar
         */

		.navbar-brand {
			padding-top: .75rem;
			padding-bottom: .75rem;
			font-size: 1rem;
			background-color: rgba(0, 0, 0, .25);
			box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
		}

		.navbar .form-control {
			padding: .75rem 1rem;
			border-width: 0;
			border-radius: 0;
		}

		.form-control-dark {
			color: #fff;
			background-color: rgba(255, 255, 255, .1);
			border-color: rgba(255, 255, 255, .1);
		}

		.form-control-dark:focus {
			border-color: transparent;
			box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
		}