JSFiddle - React, Tailwind, and code Playground

by zachreynolds

HTML

<div id="barlinecon">
 <div class="navbarline"></div>
 <div class="navbarline"></div>
 <div class="navbarline"></div>
</div>

<div id="behindbar" class="behindbar1">
<div id="logotop">WiredIntel</div>

<p class="pnav1">
Politics | Tech | Science | Environment | World | Health | Video | Entertainment | Blog | Shop
</p>

<p class="pnav2">
News | Tech | Science | Environment | Shop
</p>

</div>
<div id="ddd" class="bbb ccc">

<div class="nav-flyout__menu-item">
<ul class="nav-flyout__submenu">
<p class="submenutitle">Social</p>
<li class="submenu-item"><a class="submenu-link" href="http://money.cnn.com/technology/business/">Twitter</a></li>
<li class="submenu-item"><a class="submenu-link" href="http://money.cnn.com/technology/culture/">Facebook</a></li>
<li class="submenu-item"><a class="submenu-link" href="http://money.cnn.com/technology/gadgets/">Youtube</a></li>
<li class="submenu-item"><a class="submenu-link" href="http://money.cnn.com/technology/future/">Instagram</a></li>
<li class="submenu-item"><a class="submenu-link" href="http://money.cnn.com/technology/startups/">Reddit</a></li></ul></div>

<div class="nav-flyout__menu-item">
<ul class="nav-flyout__submenu">
<p class="submenutitle">Tech</p>
<li class="submenu-item"><a class="submenu-link" href="http://money.cnn.com/technology/business/">Latest</a></li>
<li class="submenu-item"><a class="submenu-link" href="http://money.cnn.com/technology/culture/">Future</a></li>
<li class="submenu-item"><a class="submenu-link" href="http://money.cnn.com/technology/gadgets/">Privacy</a></li>
<li class="submenu-item"><a class="submenu-link" href="http://money.cnn.com/technology/future/">Security</a></li>
<li class="submenu-item"><a class="submenu-link" href="http://money.cnn.com/technology/startups/">Hardware</a></li></ul></div>

<div class="nav-flyout__menu-item">
<ul class="nav-flyout__submenu">
<p class="submenutitle">Science</p>
<li class="submenu-item"><a class="submenu-link"...

CSS

#behindbar {background-color: rgba(0, 0, 0, 1);position:absolute;width:100%;height:42px;margin: -0px 0px 0px 0px;}


#ddd {z-index:1 !important}
.bbb {text-align:center !important;}
.ccc {position:relative;display:none;} 

.nav-flyout__menu-item {
display: inline-block;
padding: 0px 0% 0px 0px;min-width:1%;max-width:100%;
margin: 0 1% 0em;}

.submenu-item {
line-height: 1.5;
font-weight: 300;width:100%;}

.submenu-link {
color: #bfbfbf;text-decoration: none;
font-family: CNN,Helvetica Neue,Helvetica,Arial,Utkal,sans-serif;
font-size:14px;padding: 0px 0px 0px 0px;line-height: 1.5;}
    
.submenutitle{font-size:23px;
font-family: CNN,Helvetica Neue,Helvetica,Arial,Utkal,sans-serif;
line-height: 0;color: #bfbfbf;}
    
.nav-flyout__submenu {
list-style: none;position:relative;
padding: 0px 0px 0px 10px;}

.behindbar1 {width:100%;color:#ccc !important;margin: 0px 0px 0px 0px;border-bottom:1px solid #fff;
font-family: CNN,Helvetica Neue,Helvetica,Arial,Utkal,sans-serif;text-align:center;}

.behindbar1 p{
  font-size: 18px;
  margin: 7px 0px 0px -17px;width:100%}


@media (max-width: 505px) 
{.behindbar1 p{font-size:17px}}


@media (min-width: 505px) 
{#logotop{font-size:20px;text-align:left;float:left;margin: 0px -17px 0px 0px;padding: 4px 10px 4px 10px;background:rgba(210, 0, 0, 1);color:#fff}}

@media (max-width: 535px) 
{#logotop{font-size:20px;text-align:left;float:left;margin: -36px 0px 0px 0px;padding: 1px 7px 1px 7px;background:rgba(210, 0, 0, 1);color:#fff}}


@media (max-width: 915px) 
{.pnav1{display:none}}

@media (min-width: 915px) 
{.pnav1{display:block}}

@media (min-width: 915px) 
{.pnav2{display:none}}

@media (max-width: 915px) 
{.pnav2{display:block}}



#ddd {min-height:98%;width:100% !important;
background-color: rgba(0, 0, 0, 0.9);position:absolute;
}

.navbar{display:none}

.navbarline {
width: 25px;
height: 2px;
background-color: red;
margin: 6px 0px 0px 0px;
}

#mobnav-btn{padding: 3px 10px 1px 10px}
      
#barlinecon...