JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<!DOCTYPE html>

<html lang="en">

  <head>


    <script src="script.js"></script>

    <link href="style.css" rel="stylesheet">
    <meta charset="utf-8">

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">


    <meta name="viewport" content="initial-scale=1, width=device-width shrink-to-fit=no">



    <title>Hello! </title>

  </head>

  <body>

    <div class="empty"></div>
    <div class="all">
      <div class="menu-wrapper">
        <header class="header">
          <a href="#home">Logo</a>
          <input class="menu-btn" type="checkbox" id="menu-btn" />
          <label class="menu-icon" for="menu-btn"><span class="navicon"></span></label>
          <ul class="menu">
            <li><a href="#">Home</a></li>
            <li><a href="about.html">About Us</a></li>
            <li><a href="#">More</a></li>
            <li><a href="#">More2</a></li>
          </ul>
        </header>
      </div>
    </div>

    <div class="row">
      <div class="container-fluid" id="about">
        <h5>Text</h5>
        <div class="col-lg-12">
          <article>
            <p class="about-par">
              Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Proin eget tortor risus. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vivamus suscipit tortor eget felis porttitor volutpat. Proin eget tortor risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
              <br>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Pellentesque in ipsum id orci porta dapibus. Vivamus...

CSS

html,
body {
  position: absolute;
  width: 100%;
  top: 0;
  
  min-height: 100vh;
  font-family: sans-serif;
  margin: 0 !important;
  padding: 0 !important;
}



ul {
  box-sizing: border-box;


}

#logo {
  max-width: 15%;
}




.menu-wrapper {
  background-color: white;
}

.header {
  width: 100%;
  margin: 1.2em;
  position: fixed;
  background-color: black;


}






#about {
  position: absolute;
  max-width: 100%;
  top: 49%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 5px solid purple;
  padding: 20px;
  text-align: center;
  justify-content: center;
}

.about-par {
  font-size: 1em;
}



.header ul {
  padding: 0;
  list-style: none;
  overflow: hidden;
  margin-right: 2em;

}

.header li a {
  display: block;
  color: blue;
  text-decoration: none;
  font-size: 1em;
}

.header li a:hover,
.header .menu-btn:hover {
  color: black;
}

.header li a:active,
.header .menu-btn: active,
  {
  color: blue;
}

.header li a:active {
  color: blue;
}

.header .logo {
  color: black;
  display: block;
  float: left;
  font-size: 1.1em;
  padding: 12px;
  margin-left: 1em;
  text-decoration: none;
}

.header .menu {
  clear: both;
  max-height: 0;
  transition: max-height 0.2s ease-out;
}

/* menu icon */
.header .menu-icon {
  cursor: pointer;
  display: inline-block;
  float: right;
  padding: 28px 40px;
  position: relative;
  user-select: none;
}

.header .menu-icon .navicon {
  display: block;
  height: 2px;
  position: relative;
  transition: background 0.2s ease-out;
  width: 18px;
}

.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
  background: black;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  transition: all 0.2s ease-out;
  width: 100%;
}

.header .menu-icon .navicon:before {
  top: 5px;

}

.header .menu-icon: before {
  background: transparent;
}

.header .menu-icon .navicon:after {
  top: -5px;

}

/* menu btn */
.header .menu-btn {
  display: none;
}

.header .menu-btn:checked~.menu...