JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <nav class="navbar sticky-top bg-dark flex-md-nowrap p-0" style="margin-left: 3.75rem;">
    	<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>
    <nav class="bg-light sidebar">
    	<div class="sidebar-sticky">
    		<ul class="nav flex-column">
    			<li class="nav-item">
    				<a class="nav-link active" href="#">
    					<span data-feather="home"></span>
    					Dashboard <span class="sr-only">(current)</span>
    				</a>
    			</li>
    			<li class="nav-item">
    				<a class="nav-link" href="#">
    					<span data-feather="file"></span>
    					Orders
    				</a>
    			</li>
    			<li class="nav-item">
    				<a class="nav-link" href="#">
    					<span data-feather="shopping-cart"></span>
    					Products
    				</a>
    			</li>
    			<li class="nav-item">
    				<a class="nav-link" href="#">
    					<span data-feather="users"></span>
    					Customers
    				</a>
    			</li>
    			<li class="nav-item">
    				<a class="nav-link" href="#">
    					<span data-feather="bar-chart-2"></span>
    					Reports
    				</a>
    			</li>
    			<li class="nav-item">
    				<a class="nav-link" href="#">
    					<span data-feather="layers"></span>
    					Integrations
    				</a>
    			</li>
    		</ul>

    		<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
    			<span>Saved reports</span>
    			<a class="d-flex align-items-center text-muted" href="#">
    				<span data-feather="plus-circle"></span>
    			</a>
    		</h6>
    		<ul class="nav flex-column mb-2">
    			<li...

CSS

.sidebar {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	width: 3.75rem;
	padding: 0;
}
.fixed-wp {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	z-index: 100;
	padding: 0;
}

.workpackage_sidebar {
	margin-left: 3.75rem;
}

.sidebar-sticky-wp {
	position: -webkit-sticky;
	position: sticky;
	overflow-x: hidden;
	overflow-y: auto;
}

.sidebar-sticky {
	position: -webkit-sticky;
	position: sticky;
	height: 100vh;
	padding-top: 0.5rem;
	overflow-x: hidden;
	overflow-y: auto;
}

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

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

	&.active {
		color: #007bff;
	}

	&:hover .feather,
	&.active .feather {
		color: inherit;
	}
}

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

/*
 * Navbar
 */

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

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

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

	&:focus {
		border-color: transparent;
		box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25);
	}
}

/*
 * Utilities
 */

.border-top {
	border-top: 1px solid #e5e5e5;
}

.border-bottom {
	border-bottom: 1px solid #e5e5e5;
}