JSFiddle - React, Tailwind, and code Playground

by jordan_josh3184

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Blog Post</title>
    <link rel="stylesheet" href="common.css">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport"/>

    <style>
  
    </style>
  </head>
  <body>

    <div id="header">
      <navbar>
          <ul class="nav-list">
              <li class="nav-item"><a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
              </li>
               <li class="nav-item">   <script src="https://platform.linkedin.com/in.js" type="text/javascript">lang: en_US</script>
                <script type="IN/Share" data-url="https://www.linkedin.com"></script></li>
              <li class="nav-item"><a href="#">Home</a></li>
              <li class="nav-item"><a href="#">Article</a></li>
              <li class="nav-item"><a href="#">Article</a></li>
              <li class="nav-item">Login</li>
              
              </ul>
      </navbar>
    </div>
    
    <div id="page">
      <div id="sidebar">
        <div>
          My profile
        </div>
        <div>
          My interest
        </div>
      </div>
      <div id="content">
        <div class="one">
          one
        </div>
        <div class="two">
          two
        </div>
        <div class="three">
          three
        </div>
        
       </div>
    </div>
  </body>
  </html>

CSS

html {
  height: 100%;
}
body{
  height: 100%;
  margin : 0;
  font-family: sans-serif;
  background-color: seashell;
}


#page{
  display: flex;
  height: calc( 100vh - 30px);
}


#sidebar {
  margin-left: 2.5rem;
  margin-right: 2.5rem;
  width: 100px;
}


.content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}
.one {
  background-color: yellow;
}

.two {
  background-color: blue;
}

.three {
  background-color: purple;
}
.box {
  background-color: #444;
  grid-template-rows: 5;
  grid-template-columns: 10;
  color: #fff;
  border-radius: 5px;
  padding: 30px;
  font-size: 150%;
}
.nav-list {
  background: #5bb1f9;
  box-shadow: 0px 0px 10px var(--clr-gray200);
  padding: 1rem 0;
  border-radius: var(--radius);
  display: flex;
  justify-content: center;
  -webkit-justify-content: center;
    align-items: center;
    align-items:baseline;

}

.nav-item {
  list-style: none;
  margin-right: 2rem;
  text-align: center;
  }

.nav-item a {
  text-decoration: none;
  color: black;
  transition: all 200ms ease-in;
  text-align: center;
}

.nav-item a:hover {
  color: var(--clr-primary-dark);
}