JSFiddle - React, Tailwind, and code Playground

by Alexandru Gatea

HTML

<div class="page grid">
  <div class="grid-item menu">
    <ul>
      <li><a href="#!">Home</a></li>
      <li class="active"><a href="#!">About</a></li>
      <li><a href="#!">Design</a></li>
      <li><a href="#!">Film</a></li>
      <li><a href="#!">Contact</a></li>
    </ul>
  </div>
  <div class="grid-item profile">
    <img src="https://scontent-otp1-1.xx.fbcdn.net/v/t1.0-9/11709601_1168129369870092_4624525713062520782_n.jpg?_nc_cat=109&_nc_ht=scontent-otp1-1.xx&oh=79ebe6f2d50dad33d98159f1654c2033&oe=5D7363A3" alt="">
  </div>
  <div class="grid-item black-box">
    <div></div>
  </div>
  <div class="grid-item yellow-box">
    <div></div>
  </div>
  <div class="grid-item info">
    <h1>Sandra Rad <span>UI/UX Designer</span></h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias amet veritatis at ipsum facilis sunt odit iusto reiciendis possimus consectetur dignissimos, ad quos quae enim, eligendi laboriosam, asperiores esse aut. Lorem ipsum dolor sit amet, consectetur
      adipisicing elit. Odio consectetur optio fuga totam non impedit odit, quos excepturi consequuntur esse tempora debitis dolor quasi, labore nulla quia est. Quaerat, ad!
    </p>
    <a href="#!"><strong>Download my resume</strong></a>
  </div>
</div>

SCSS

// reset
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Roboto Condensed";
  font-weight: 300;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.black-box div,
.yellow-box div {
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 0%;
}

.black-box div {
  background: #212121;
  animation: bb 0.5s ease-in-out forwards;
}

.yellow-box div {
  background: #ffcb11;
  top: auto;
  bottom: 0;
  animation: yb 0.5s ease-in forwards;
}

ul {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 40px 20px;
  
  li {
    padding: 0 10px;
    position: relative;
    z-index: 1;
    a {
      line-height: 1;
      display: block;
      position: relative;
      z-index: 2;
    }
    &.active {
      &:before {
        content: '';
        z-index: 0;
        display: block;
        background: #ffcb11;
        width: 100%;
        height: 6px;
        position: absolute;
        left:0;
        bottom: 0px;
      }
    }
  }
}

h1 {
  font-size: 32px;
  display: flex;
  align-items: flex-end;
  margin-bottom: 30px;
  line-height: 1;
  
  span {
    font-size: 20px;
    display: block;
    font-style: italic;
    margin-left: 20px;
    opacity: 0.6;
  }
}

p {
  margin-bottom: 30px;
  line-height: 1.4;
  font-size: 14px;
}

// THE GRID 
.grid {
  display: grid;
  grid-template-columns: 100px 200px 200px auto;
  grid-template-rows: 250px 300px 100px calc(100vh - 650px);
  width: 100%;
  height: 100vh;
}

.grid-item {
  position: relative;
}

// positioning grid items
.black-box {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 3;
}

.yellow-box {
  grid-column-start: 1;
  grid-column-end: 5;
  grid-row-start: 3;
  grid-row-end: 5;
}

.profile {
    grid-column-start: 2;
    grid-column-end: 4;
    grid-row-start: 2;
    grid-row-end: 4;
    z-index: 1;
    
    img {
      animation: profile 0.5s ease-in-out forwards;
      opacity: 0;
 ...