JSFiddle - React, Tailwind, and code Playground

by qunzorez

HTML

<div class="page-wrap">
      <h>heading<h>
      <div class="topnav">
        <a data-title="Home" href="\index.html">Home</a>
        <a data-title="Page 2" href="\Page2\index.html">Coming Soon</a>
        <a data-title="Page 3" href="\Page3\index.html">Video Library</a>
        <a data-title="Page 4" href="\Page4\index.html">Cast and Crew</a>
      </div>
      <div class="row">
        <div class="column side">
          <p>side column contents</p>
        </div>
        <div class="column middle">
          <p>middle column contents</p>
        </div>
        <div class="column side">
          <p>side column contents</div>
        </div>
      </div>
    </div>
      <div class="footer">
        <p>This line is not centered</p>
        <p>This line is centered</p>
      </div>

CSS

.topnav {
          overflow: hidden;
          background-color: black;
          display:flex;
        }

        .topnav a {
          color: white;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
        }
        .topnav a:first-child {
          font-weight: 700;
        }
        .topnav a:hover {
          background-color: #151515;
          font-weight: 700;
        }
        .topnav a:before {
          display: block;
          content: attr(data-title);
          font-weight: 700;
          overflow: hidden;
          visibility: hidden;
          height: 0;
        }
        .footer {
          background-color: black;
          text-align: center;
          padding: 10px;
          color: #fff;
          margin-bottom: 0;
        }
        
         .footer p {
           display: flex;
           justify-content: center;
           
         }
        
        
        .center {
          text-align: center;
        }
        .column {
          float: left;
          padding: 10px;
        }
        .column.side {
          width: 25%;
        }
        .column.middle {
          width: 50%;
        }
        .row:after {
          content: "";
          display: table;
          clear: both;
        }
        @media screen and (max-width: 600px) {
          .column.side, .column.middle {
            width: 100%;
          }
        }
        body {
          height: 100%;
        }
        .page-wrap {
          min-height: 100%;
          margin-bottom: -142px;
        }
        .page-wrap:after {
          content: "";
          display: block;
        }
        .footer, .page-wrape:after {
          height: 142px;
        }