JSFiddle - React, Tailwind, and code Playground

by Taufik Nurrohman

HTML

<div id="wrap">
    <div class="box" id="home">
        <h3>Home</h3>
    </div>
    <div class="box" id="contact">
        <h3>Contact</h3>
    </div>
    <div class="box" id="fun">
        <h3>For Fun</h3>
    </div>
    <div class="box" id="about">
        <h3>About</h3>
    </div>
    <div class="box" id="website">
        <h3>Website</h3>
    </div>
    <div class="box" id="skill">
        <h3>Skills</h3>
    </div>
</div>

<ul id="nav">
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#website">Website</a></li>
    <li><a href="#fun">For Fun</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#skill">Skills</a></li>
    <li><a href="#contact">Contact</a></li>
</ul>

CSS

#wrap {
  position:absolute;
  top:0px;
  left:0px;
  width:30000px;
  height:1000px;
}

h3 {
  margin:70px 30px;
  font:normal 22px Arial,Sans-Serif;
  color:#fff;
  color:rgba(255,255,255,0.7);
}

.box {
  width:33.33%;
  height:50%;
  float:left;
  background-color:#ccc;
}

#home      {background-color:#2f2f2f;}
#website   {background-color:#00A7E2;}
#fun       {background-color:#EE9A10;}
#about     {background-color:#DD1F8E;}
#skill     {background-color:#620294;}
#contact   {background-color:#84C922;}

ul#nav {
 width:100%;
 height:30px;
 background:#000; 
 position:fixed;
 top:0px;
 left:0px;  
}

ul#nav li {
 display:inline;
 float:left;   
}

ul#nav li a {
 font:bold 10px Arial,Sans-Serif;
 text-decoration:none;
 color:#999;
 display:block;   
 padding:8px 15px;
}

ul#nav li a:hover, ul#nav li a.active {
 color:#fff;
}

JavaScript

//Update Size by Window Size

$(function() {
    
   function updateSize() {
      var winWidth  = $(window).width(),
          winHeight = $(window).height(),
          wrapSum   = $('.box').siblings().length;
       $('#wrap').css({
           width:winWidth*(wrapSum/2),
           height:winHeight*(wrapSum/3)
       });
       $('.box').css({
           width:winWidth,
           height:winHeight
       });  
   } updateSize(); 
   
    $(window).resize(function() {
        updateSize();
    });
    
    
    $('ul#nav a').click(function() {
       $('ul#nav a.active').removeClass('active');
       $(this).addClass('active');
    });
    
});