JSFiddle - React, Tailwind, and code Playground

by Darius Shojaei

HTML

<div id="header_products"></div>	



<input id="product_ti" class="default" type="text" value="Find A Product">
<input id="product_btn" type="button" value="Search">
<input id="product_default" type="hidden" value="Find A Product">
</div>	
</div>
</div>



		<div id="nav">
			<ul id="nav_links" class="content_width_adjust">
				<li id="4_color_offset_printing" style="width:183px" class=""><a class="nav_parent narrow" href=""><span>4-Color Offset Printing</span></a></li>
				<li id="large_format" style="width:139px" class=""><a class="nav_parent wide" href=""><span>Large Format</span></a></li>
				<li id="1-2_color_printing" style="width:164px" class=""><a class="nav_parent" href=""><span>1&amp;2 Color Printing</span></a></li>
				<li id="4_color_digital_printing" style="width:189px" class=""><a class="nav_parent narrow" href=""><span>4-Color Digital Printing</span></a></li>
				<li id="roll_labels" style="width:130px" class=""><a class="nav_parent wide" href=""><span>Roll Labels</span></a></li>
				<li id="services" class="last " style="width:133px"><a class="nav_parent services" href=""><span>Services</span></a></li>
			</ul>
		</div>
		
		<div id="content" class="page_class_home">
			<div class="center content_width_wrapper">

CSS

.fb-comments {
	
}


* {position: zoom: 1;}
* {outline:none;}
#artwork_upload {
	margin-top:30px;	
}
#artwork_upload a {
  background: #e02a39;
  background-image: -webkit-linear-gradient(top, #e02a39, #d62735);
  background-image: -moz-linear-gradient(top, #e02a39, #d62735);
  background-image: -ms-linear-gradient(top, #e02a39, #d62735);
  background-image: -o-linear-gradient(top, #e02a39, #d62735);
  background-image: linear-gradient(to bottom, #e02a39, #d62735);
  font-family: Arial;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  margin-top:30px;
 }

#artwork_upload a:hover {
  background: #bf2c38;
  background-image: -webkit-linear-gradient(top, #bf2c38, #bf2c38);
  background-image: -moz-linear-gradient(top, #bf2c38, #bf2c38);
  background-image: -ms-linear-gradient(top, #bf2c38, #bf2c38);
  background-image: -o-linear-gradient(top, #bf2c38, #bf2c38);
  background-image: linear-gradient(to bottom, #bf2c38, #bf2c38);
  text-decoration: none;
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////// CSS Menu Added to Website to replace old Content Set-Up ////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////*/
#cssmenu {
    float:left;
	position:relative;
}

#cssmenu ul {
	font-size:14px;	
	 
}

#cssmenu ul {
	font-size:16px;
	
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 10px 0px 0px 0px;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
   
}

#cssmenu {
 
}

#cssmenu > ul {
  width: 200px;
  background: #ffffff;
   
}

#cssmenu > ul > li > a {
	font-family: 'PT Sans Narrow', sans-serif;
  padding: 8px 15px;
  font-size: 16px;
  color: #666666;
  font-weight: 700;
  text-decoration: none;
 ...