JSFiddle - React, Tailwind, and code Playground

by Rajaprabhu Aravindasamy

HTML

<html>
<head>
  <title>Rajaprabhu</title>
</head>
<body>

<div id="DivMenu"><div id="DivLogo">R</div></div>
<div id="DivMain">
  <div id="DivHeader">
  </div>
  <div id="DivContent">
    <div id="DivSlider">
      <div id="DivHome">        
      </div>
      <div id="DivSkills">
      </div>
    </div>
  </div>
  <div id="DivFooter">
  </div>
</div>

</body>
</html>

CSS

#DivMain
{
position: relative;
width:100%;
height:100%;
z-index:1;
}

#DivFooter
{
position:absolute;
width:100%;
height:5%;
bottom:0%;
left:0%;
background-color: red;
z-index:5;
border-top: 2px solid #2F2E2E;   
}

#DivHeader
{
position:absolute;
width:100%;
height:10%;
top:0%;
left:0%;
background-color: blue;
z-index:6;
border-bottom: 2px solid #2F2E2E;
}

#DivMenu
{
position:absolute;
border-radius: 999px;
background: #ccc;
border: 2px solid #2F2E2E;
cursor: pointer;
z-index:7;
text-align:center;
width: 4%;
height: 8%;
left: 48%;
top: 6%;
}

#DivLogo
{
font-family: 'Wendy One', sans-serif;
font-size:35px;
position:relative;
top:50%;
margin-top: -18px;
}

#DivContent
{
position:relative;
width:100%;
height:85.02%;
top:10%;
left:0%;
z-index:2;
overflow: hidden;
}

#DivSlider
{
position:absolute;
width:100%;
height:100%;
z-index:3;
}

#DivHome
{
width:100%;
height:50%;
z-index:4;
background-color: yellow;
}

#DivSkills
{
width:100%;
height:50%;
z-index:4;
background-color: yellow;
}

html,body
{
height:100%;
width:100%;
margin:0;
padding:0;
border: 0;
overflow:hidden;
}