JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
 

<div class="boxA">

<div class="box1">
  <div class="site">
    <a href=""><img src="img/logo.png"></a>
  </div> 
</div>

<div class="box2">
<nav class="menu"> 
  <ul>
      <li><a href="#conD">menu1</a></li>
      <li><a href="#conG">menu2</a></li>
      <li><a href="#conH">menu3</a></li>
      <li><a href="#conI">menu4</a></li>
  </ul>
</nav>
</div>

</div>


<div class="body-part">

<section class="conA">
<div id="container">
  <div id="heroText">
     <p>Lorem ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercit</p>
    <div id="text"></div>
  </div>
  <div id="images"></div>
</div>
</section>


  <ul class="slider" style="padding:0px !important;">
    <li><img src="img/sample.png">
    <div class="caption1">caption 1</div>
    </li>

    <li> <img src="img/Group 3.png">
    <div class="caption2"></div>
    <div class="caption3">caption 2</div>
    <div class="caption5">caption 3</div>
    <div class="caption4">caption 4</div>
    </li>
 </ul>
 
 
 

<section id="conD">
<div class="container">
  



  <div class="grid menu-content" id="menu1-content">
  
   <article> 
    <a href="#">
      <div class="photo" style="background-image: url(https://www.gravatar.com/avatar/a235706e3d81b614acaec3368edfea4b?s=96&d=identicon&r=PG);"></div>
      <div class="text">
      <h3>Title </h3>
      <p>Lorem ipsum dolor </p>
      </div>
    </a>
  </article> 


   <article> 
    <a href="#">
      <div class="photo" style="background-image: url(img/sample.jpg);"></div>
      <div class="text">
      <h3>Headingg</h3>
      <p>Lorem ipsum dolor </p>
      </div>
    </a>
 ...

CSS

.boxA:after {
  content:"";
  display: block;
  clear: both;
}

.boxA {
  height: 90px;
  position: fixed; 
  border-bottom: 1px solid #E0DCDC;
  top: 0;
  width: 100%;
  background-color: white;
  max-width: 1440px;
z-index:2;


}
.body-part{
    position: relative;
    z-index: 1;
    }

.boxA img {
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translate(0, -50%);
}

.box2 ul {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  right: 10px;
}


.box1 {
  float: left;
   width: auto;
}

.box2 {
  float: right;
  width: auto; 
}



.box2 ul {
  margin: 0;
  padding: 0;
  list-style: none;  
}


.box2 li a {
  display: block;
  padding: 0px 50px;
  color: inherit;
  text-decoration: none; 
  font-size: 12px;
}

.box2 li a:hover {
  text-decoration: underline;
}

.box2 ul:after {
  content: "";
  display: block;
  clear: both;
}

.box2 li {
  float: left;
  width: auto;
  font-family: 'Gotham';
  letter-spacing: 2.5px;
}


.box1 img {
  position: absolute;
  width: 20%;
  height: auto;
}

#top-logo {
  margin-top: 40px;
}


#top-logo img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 20%;
  height: auto;
}



body {
  font-family: gotham;
  margin: 0px  !important;
  color: #827F88;
  letter-spacing: 0.4px; 
  line-height: 1.9;
}


.conA {
  height: 100vh;
  display: flex; 
  position: relative;
}


.conA #container {
  margin: 0;
  display: flex; 
  align-items: flex-start;
  position: absolute;
  top: 50%;
  left: 10%;
    transform: translate(0%, -50%);
}

#heroText {
  font-size: 37px;
  color: #56525E;
  line-height: 1 !important;
}


.conA #heroText {
  height: 400px;
  padding-top: 100px;
}






#conD ul {
  margin: 0 0 30px -30px;
  padding: 0;
  list-style: none;
}


#conD li  {
  padding: 35px;
  display: block;
  text-decoration: none;
  font-size: 15.5px;
  letter-spacing: 2px;
  color: inherit;
}


#conD li {
  float: left; 
  width: auto;
}

#conD ul:after {
  content:"";
  display: block;
 ...

JavaScript

$(document).ready(function(){
      $('.slider').bxSlider({
      auto: true,
      pause: 3000,
       mode: 'fade',
       speed: 1200, 
      pager: false  
});
    });


(function ($) {
  $(document).ready(function(){

    // hide .navbar first
    $(".boxA").hide();

    // fade in .navbar
    $(function () {
        $(window).scroll(function () {

                 // set distance user needs to scroll before we start fadeIn
            if ($(this).scrollTop() > 50) {
                $('.boxA').fadeIn();
                $('#top-logo').fadeOut();


            } else {
                $('.boxA').fadeOut();
                $('#top-logo').fadeIn();

            }
        });
    });

});
  }(jQuery));