JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="container social-bar-top">
<img src="assets/images/phone-icon.png" alt="Phone Icon">
<a class="social-bar-padding text-white">phone here</a>
<img src="assets/images/mail-icon.png" alt="Email icon">
<a class="social-bar-padding text-white">email here</a>
<img src="assets/images/facebook-icon.png" alt="Facebook Icon">
<img src="assets/images/twitter-icon.png" alt="Facebook Icon">
</div>
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand nav-logo-margin" href="#">
<img src="assets/images/dbs-logo.png" width="180" height="auto" alt="">
</a>
<button class="navbar-toggler" type="button" data-target="#navbarSupportedContent" data-toggle="collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
button
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link uppercase" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link uppercase" href="#">About Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link ...
CSS
.navbar {
background: red;
}