JSFiddle - React, Tailwind, and code Playground

by Kai_Draord

HTML

<html>
    <head>
        <meta charset="utf-8">
        <title>Paul Taylor Creates</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
      <nav><a href="" id="head_link"><span id="bold_avenir">Paul Taylor</span> Creative Design</a>
        </nav>
        </header>

      <div class="project_container"> 
        <div class="pjct-skinny" id="project_1">
          <div>First Project</div>
        </div>
        <div class="pjct-fat" id="project_2"> 
        </div>
        <div class="pjct-fat" id="project_3"> 
        </div>
        <div class="pjct-skinny" id="project_4"> 
        </div>
      </div>

        <footer class="footer">
          <a href=""><span id="bold_avenir" >Resume:</span> LinkedIn </a> 
          <a href=""><span id="bold_avenir">Contact:</span> [email protected]</a>
        </footer>
    </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Hind:300,400,500,600,700');
.google{ font-family:'Hind', sans-serif}
//custom code by naren
body{
  overflow:hidden;
}
footer{
    height: 50px;
    bottom: 0px;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
}
.project_container {
    border: purple 4px solid;
    height: auto;
    width: auto;
    overflow: auto;
    white-space: nowrap;
    position: absolute;
    overflow-x: hidden;
    top: 50px;
    bottom: 50px;
    left: 0px;
    right: 0px;
}
header{
    position: absolute !important;
    top: 0px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
//custom code by naren
a {
    color:white;
  text-decoration:none;
  font-family:'Hind';
}

#bold_avenir {
  font-family:'Hind';
  font-weight:bold;
}

#head_link{
   text-transform:uppercase;
}

body{
  background-image: url('https://lh3.google.com/u/0/d/0B_aDRtC2UuuPd0s3Vm5hV1NNSTA=w3818-h2104-iv1');
  background-size:cover;
}

.project_container{
  border:purple 4px solid;
  white-space: nowrap;
}

.pjct-fat{
  display:inline-block;
  width:800px;
  height:96%;
}

.pjct-skinny{
  display:inline-block;
  width:450px;
  height:96%;
}

#project_1{
  border:red 4px solid;
}

#project_1 p{
  display:block;
  border:red 4px solid;
}

#project_2{
  border:yellow 4px solid;
}
#project_3{
  border:green 4px solid;
}
#project_4{
  border:blue 4px solid;
}