JSFiddle - React, Tailwind, and code Playground

by harsh dand

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<body class="main">
    <div class="navigation">
        <div class="navbar">
      <div class="logos">
        <div class="logo-left"><a href=""><img src="http://localhost/func/bilder/logo1.png"></a></div>
        <div class="logo-right"><a href=""><img src="http://localhost/func/bilder/logo-text.png"></a></div>
      </div>
            <div class="nav-links">
      <nav class="navs1">
        <ul>
                <li class="navs">
                    <a class="remove-a b" href=""><?php echo $lang['Hjem']; ?></a>
                </li>
                <li class="navs">
                    <a class="remove-a b" href=""><?php echo $lang['Foto']; ?></a>
                        <ul class="ul1">
                              <li class="bc"><a href=""><?php echo $lang['Bolig']; ?></a></li>
                  <li class="bc"><a href=""><?php echo $lang['Sport']; ?></a></li>
                  <li class="bc"><a href=""><?php echo $lang['Næring']; ?></a></li>
                  <li class="bc"><a href=""><?php echo $lang['Natur']; ?></a></li>
                        </ul>
                </li>
                <li class="navs">
                    <a class="remove-a b" href=""><?php echo $lang['Video']; ?></a>
                </li>
                <li class="navs">
                    <a class="remove-a b" href=""><?php echo $lang['Kontakt_Oss']; ?></a>
                </li>
          </ul>
        </nav>
            </div>
        <div class="languages">
          <a href="index.php?lang=no"><img src="images/no1.png" class="shadow"></img></a>
          <a href="index.php?lang=en"><img src="images/en1.png" class="shadow"></img></a>
        </div>
      </div>
    </div>
  <div class="content">
    <div class="slider">
       <div id="sliderFrame">
        <div id="amazingslider-1"...

CSS

.remove-a {
    text-decoration: none !important;
}
.remove-a:hover {
    text-decoration: none !important;
    color: black;
}
.main {
    background-color: #f5f8fa;
}
.navigation {
    width: 100%;
    position: fixed;
    height: 90px;
    background-color: white;
    border-bottom: 2px solid #e1e8ed ;
}
.navbar {
    margin: 0 auto;
    width: 1000px;
    height: 86px;
}
.nav-right {
    float: right;
    width: 700px;
    height: 86px;
}
.nav-links {
    float: right;
}
.navs {
    display: inline-block;
    font-family: Arial,"helvetica neue",Helvetica,Verdana,sans-serif;
    text-transform: uppercase;
    font-weight: 900;
    margin-top: -20px;
    margin-left: 31px;
    font-size: 19px;
}
.navs1 {
    display: inline-block;
    font-family: Arial,"helvetica neue",Helvetica,Verdana,sans-serif;
    text-transform: uppercase;
    font-weight: 900;
    margin-top: 30px;
    margin-left: 31px;
    font-size: 19px;
}
.b {
    color: #5EA4C8 !important; 
}
.navs1 ul{
    padding:0;
    margin:0;
    list-style: none;
    position: relative;
    display:block;
    }

.navs1 ul li a {
    display:block;
    padding:15px 10px;    
    color: #5EA4C8;
    font-size:20px;
    text-decoration:none;
    font-family: Arial,"helvetica neue",Helvetica,Verdana,sans-serif;
    text-transform: uppercase;
}

/* The Dropdown Styles */
/* =================== */

/* Hide Dropdowns by Default */
.navs1 ul ul {
    display: none;
    position: absolute; 
    background-color: white;
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
    width: 160px;
    margin-left: -20px;
    padding-left: 20px;
    height: 250px;
}

/* Display Dropdowns on Hover */
.navs1 ul li:hover > ul {
    display:list-item;
}

/* Fisrt Tier Dropdown */
.navs1 ul ul li {
    width:170px;
    float:none;
    position: relative;
    border-bottom:none;
}
.ul1 {
    box-shadow: 0 4px 2px -2px gray;
}
.logos {
    width: 350px;
    height: 90px;
    display: block;
    float:...