JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="navbar navbar-custom radius-fixer nomargin" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse nopaddingright">
<ul class="nav navbar-nav">
<li class="active"><a href="<?php echo home_url(); ?>">HOME</a>
</li>
<li><a href="about-us">ABOUT US</a>
</li>
<li><a href="faq">FAQ</a>
</li>
<li><a href="contact-us">CONTACT US</a>
</li>
<li><a href="online-forms">ONLINE FORMS</a>
</li>
<li><a href="virtual-clinic-tour">VIRTUAL CLINIC TOUR</a>
</li>
<li><a href="blog" class="noborder">BLOG</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</div>
<div class="clearfix" id="main">
<div class="container">
<div class="flexslider nomargin">
<ul class="slides">
<li>
<img src="SLIDER1" />
</li>
<li>
<img src="SLIDER2" />
</li>
<li>
<img src="SLIDER3" />
</li>
</ul>
</div>
</div>
</div>
CSS
/* CSS used here will be applied after bootstrap.css */
.container-fixer {
padding-left:0px !important;
padding-right:0px !important;
}
.withpaddingleft15 {
padding-left:15px !important;
}
.withpaddingright15 {
padding-right:15px !important;
}
.whitebg {
background:#fff;
}
.withpaddingbottom15 {
padding-bottom:15px !important;
}
.withpaddingtop15 {
padding-top:15px !important;
}
.radius-fixer {
border-radius:0 !important;
}
.nopaddingall {
padding:0px !important;
}
.nopaddingleft {
padding-left:0px !important;
}
.nopaddingright {
padding-right:0px !important;
}
.nopaddingtop {
padding-top:0px !important;
}
.nopaddingbottom {
padding-bottom: 0px !important
}
.nomargin {
margin:0px !important;
}
.noborder {
border:none !important;
}
.withborder {
border-left:1px solid #000;
border-right:1px solid #000;
}
.text-justify {
text-align: justify !important;
}
/** #homemarket **/
#homemarket {
border-top:3px solid #932890;
}
/** #statictop **/
#statictop .navbar {
background: #8ec63f;
border:0px;
}
#statictop .btn-success {
color:#fff;
background:#92278f;
border:0px;
}
#statictop .btn-success:hover {
color:#fff;
background:#6e136b;
}
#statictop .left {
margin-top:15px;
margin-bottom:15px;
}
#statictop .right {
margin-top:0px;
margin-bottom:0px;
}
#statictop .pull-right {
padding-top:15px;
}
/**#logo **/
#logo {
margin-top:62px;
padding-top:15px;
}
#logo .addr {
color:#8d277b;
}
/** start of navbar **/
.navbar-custom {
background: #92278f;
}
.navbar-custom .navbar-brand {
color: #005e20;
}
.navbar-custom .navbar-brand:hover, .navbar-custom .navbar-brand:focus {
color: #fff;
background-color: #656d58;
}
.navbar-custom .navbar-text {
color: #005e20;
}
.navbar-custom .navbar-nav {
display: inline-block;
float: none;
}
.navbar-custom ul.nav > li > a:after {
content:"";
height:5px;
padding-right:...