JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<!DOCTYPE html>
<html lang="en-US">

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta charset="utf-8" />
  <title>Surrogacy Agency</title>
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
  <meta name="referrer" content="origin-when-cross-origin" />
  <link rel="stylesheet" type="text/css" href="styles/index.css">

</head>

<body>

    <nav class="nav-bar page-width">
      <div class="nav-item">
        <p class="nav-item--name">
          nav-item 1 v
        </p>
        <div class="nav-item--contents-container">
          <div class="nav-item--contents page-width">
            <div>
              SomeText
            </div>
            <div>
              SomeOtherText
            </div>
            <div>
              SomeThirdText
            </div>
          </div>
        </div>
      </div>
      <div class="nav-item">
        <p class="nav-item--name">
          nav-item 2 v
        </p>
        <div class="nav-item--contents-container">
          <div class="nav-item--contents page-width">
            <div>
              SomeText2
            </div>
            <div>
              SomeOtherText2
            </div>
            <div>
              SomeThirdText2
            </div>
          </div>
        </div>
      </div>
      <div class="nav-item">
        <p class="nav-item--name">
          nav-item 3 v
        </p>
        <div class="nav-item--contents-container">
          <div class="nav-item--contents page-width">
            <div>
              SomeText3
            </div>
            <div>
              SomeOtherText3
            </div>
            <div>
              SomeThirdText3
            </div>
          </div>
        </div>
      </div>

      <div class="nav-logo"> LOGO </div>

      <div class="nav-item">
        <p class="nav-item--name">
          nav-item 4 v
        </p>
        <div...

CSS

body {
  margin: 10px 0 0 0;
  display: block;
}

/* SHARED */

.page-width {
  width: 100vw;
  max-width: 1200px;
  margin: 0 auto;
}

/* END SHARED */

/* NAV BAR */

.nav-bar {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  height: 90px;

  outline: 1px black solid;

}

.nav-hamburger {
  display: none;
  margin: 0 10px 0 10px;
}

.nav-item {
  display: flex;
  align-items: center;

  outline: 1px green solid;
}
.nav-item--name {
  vertical-align: middle;
  text-align: center;
  /* padding: 3px; */
}

.nav-item--contents-container {
  background: white;
  max-height: 0px;
  width: 100vw;
  transition: max-height 0.5s ease-out;
  overflow: hidden;
  position: absolute;
  left: 0;
  right: 0;
  top: 90px;
}

.nav-item:hover {
  cursor: pointer;
}

.nav-item:hover .nav-item--name {
  color: orange;
}

.nav-item:hover .nav-item--contents-container {
  max-height: 500px;
  transition: max-height 0.5s ease-in;
}

.nav-logo {
  display: inline-block;
  margin: 0 10px 0 10px;
  width: 90px;
  height: 90px;

  transition: float 0.5s ease-out;

  background-image: url("../assets/circle.jpg");

  outline: 1px red solid;
}

/* END NAV */

/* CONTENT */

.content {
  box-sizing: border-box;
  padding: 3px;

  outline: 1px blue solid;
}

/* END CONTENT */


/* MEDIA QUERIES */

@media(max-width: 960px) {
  .nav-bar {
    height: 70px;
  }

  .nav-hamburger {
    display: inline-block;
    width: 70px;
    height: 70px;
    outline: 1px red solid;
    margin: 0;
  }

  .nav-logo {
    display: inline-block;
    width: 70px;
    height: 70px;
    margin: 0;
  }

  .nav-item {
    display: none;
  }

}

/* END MEDIA QUERIES */