JSFiddle - React, Tailwind, and code Playground

by zachreynolds

HTML

<div class="subtopcon">
<div id="xxx" class="yyy zzz">

<div class="subtopmenucon">
<ul class="subtopmenuconsub">
<p class="top__submenuitem">Social</p>
</ul></div>
  
  <div class="subtopmenucon">
<ul class="subtopmenuconsub">
<p class="top__submenuitem">Social</p>
</ul></div>
  
  <div class="subtopmenucon">
<ul class="subtopmenuconsub">
<p class="top__submenuitem">Social</p>
</ul></div>

  
  
  
  
</div></div>

<style>
#xxx {z-index:1 !important}
.yyy {text-align:center !important;}
.zzz {position:relative;display:block;} 

.subtopmenucon {
display: inline-block;
padding: 0px 3% 0px 3%;
margin: 5px 0px 0 1px;background:#f00 !important}




    
.top__submenuitem{font-size:23px;
font-family: CNN,Helvetica Neue,Helvetica,Arial,Utkal,sans-serif;
line-height: 0;color: #fff;font-weight: 300;}
    
.subtopmenuconsub {
list-style: none;position:relative;
padding: 0px 0px 0px 0px;}

.subtopcon {background-color: rgba(0, 0, 0, 1);position:absolute;height:42px;width:100%; !important;margin: 0px 0px 0px 0px !important;border-bottom:1px solid #fff;
font-family: CNN,Helvetica Neue,Helvetica,Arial,Utkal,sans-serif;text-align:center;}

.subtopcon p{
  font-size: 20px;
  margin: 7px 0px 0px 0px;}

#xxx {width:100% !important;
background-color: rgba(0, 0, 0, 0);position:absolute;
}

#xxx li{list-style: none;} 

h3 a {
  color:black !important;
transition:.7s;
-o-transition:.7s;
-ms-transition:.7s;
-moz-transition:.7s;
-webkit-transition:.7s;
}
h3 a:hover { color:red!important; }
</style>