JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#"><img src="images/logo.png"></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse navigacija navbar-ex1-collapse">
          <ul class="nav navbar-nav">
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">About<span class="caret"></span></a>
              <ul class="dropdown-menu-left" role="menu">
              	<div class="container">
	                <li><a href="#">Company</a></li>
	                <li><a href="#">Team</a></li>
	                <li><a href="#">Media-Kit</a></li>
	                <li><a href="#">FAQ-Kit</a></li>
                </div>
              </ul>
            </li>
            <li><a href="#about">Portfolio</a></li>
            <li><a href="#contact">Jobs</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Community<span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
             
                <li><a href="#">Mentors</a></li>
                <li><a href="#">Partners</a></li>
                <li><a href="#">Investors</a></li>
                <li><a href="#">Events</a></li>
            
              </ul>
            </li>
           <li class="dropdown">
              <a href="#" class="dropdown-toggle"  data-hover="dropdown" role="button"...

CSS

/*
Theme Name: Golden Gate Ventures
Theme URI: http://www.robinadrianus.com
Author: Robin Adrianus
Author URI: http://www.robinadrianus.com
Version: 1.0
Text Domain: goldengate
*/

.navbar-default {
    padding:10px;
   
   
}

.navbar-default .navbar-nav>li>a {
 color: #B82025;
 font-weight:bold;
}


.navbar-brand {

padding: 0px 15px;

}

.nav>li>a {

padding: 10px 13px;
}
/* ========================================================================
 * DECOM d.o.o.
 * Distribucija sadrzaja zabranjena
 * ========================================================================
 * NAVIGACIja - NAVIGATION ======================================================================== */

.navigacija {text-transform:uppercase; position:relative !important;}
.navbar-collapse.collapse {overflow:hidden !important;}
.navigacija > ul  {margin-top:0px;}

.dropdown-menu {
	background:#B9150B;
	color:#fff;
}
	
.dropdown-menu li, .dropdown-menu-left li{
	display:inline-block;
	color:#fff;
}

.dropdown-menu li a, .dropdown-menu-left li a{
	color:#fff;
}

.dropdown-menu li.dropdown .dropdown-menu {top:108px;}

.dropdown-menu li.dropdown {background:url(http://decombh.org/img/nav_down.png) no-repeat bottom right !important;
background-position: 5px 9px !important;
}

.dropdown-menu-left .container {
	max-width:800px;
	
}
.dropdown-menu-left .container li {
	padding:0 10px;
}

.navbar-brand img {max-width:130px;}

/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

body {
  padding-bottom: 40px;
  color: #5a5a5a;
  font-family: 'Helvetica', 'Arial', sans-serif !important;
  background:#F1F1F2;
}


.navbar {
	margin-bottom:0px;
}

.container {
	padding:0 0;
	
}
#wpadminbar  {
	
	display:none;
}

.embed-container { 
position: relative; 
height: 0; 
overflow: hidden; 
width: 100%; 
height: auto; 
margin-top:20px;
}

.embed-container iframe, .embed-container object, .embed-container embed { 
    width: 100%;
}

section...