JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="row">
<div class="nav-btn">
   <button class="btn dropdown-toggle " type="button" data-toggle="dropdown"><b>Language</b>
   <span class="caret"></span>
   </button>
   <ul class="dropdown-menu">
      <li><a href="#">HTML</a>
      </li>
      <li><a href="#">CSS</a>
      </li>
      <li><a href="#">JavaScript</a>
      </li>
   </ul>
</div>
</div>
<div class="#reqdiv">
   //text
</div>
<div class="main-content">
</div>

CSS

.main-content{
    height:200px;
    width:100%;
    background:green;
}
.dropdown-menu{top:35px;}
.nav-btn.show ~ .main-content{background:blue;} 
.nav-btn.show > .main-content{background:blue;} 
.nav-btn.show + .main-content{background:blue;}