JSFiddle - React, Tailwind, and code Playground

by justinwinter

HTML

<body translate="no">
<input type="checkbox" name="nav" id="nav_button">
<div class="body">
<h1 align="center">Welcome to You Employee Benefits Portal!</h1><br>
<label for="nav_button" class="on">Continue</label>
<table border="0" bordercolor="#888" cellspacing="0" style="margin: auto; border-collapse: collapse; border-color: rgb(136, 136, 136); border-width: 0px;">
<tr>
<td style="width: 1000px">
<p>Lyles Group Welfare Benefit Plan (Plan) maintains a “Self-Insured” Plan. That means that the Company is ultimately responsible for the health care costs, and pays for all of those costs plus administration fees. This differs from a fully-insured Plan where the insurance company is ultimately responsible for the health care costs and the employer pays the premiums. Being self-insured allows the Company to design our own health benefits.</p>
<p> We have chosen HealthComp to be the Administrator for the Plan. We rent a PPO network for medical and dental from Blue Cross. When obtaining medical or dental care services we recommend choosing an in-network provider, as opposed to an out-of-network provider. An in-network provider is one contracted by Blue Cross to provide services to Plan members for specific pre-negotiated rates. If Plan Participants utilize a medical provider (physician, dentist, lab or hospital) that is included in the Preferred Provider Network, the participant will benefit from paying negotiated discounted rates and will receive a larger reimbursement percentage from the Plan. When you chose an in-network provider it saves you and the Plan (Company) valuable money. The Plan receives PPO negotiated discounts on health charges and will pay claims at 90%. You pay 10% (assuming you have met your deductible). Lower cost to you, means lower cost for the company. Our goal is to partner with you to keep healthcare costs down so we can maintain the excellent benefits we offer.</p>
<p>An out-of-network provider is one not contracted with Blue Cross. Typically, if...

CSS

@import url('https://fonts.googleapis.com/css?family=Muli');
   body,
   html {
     margin: 0;
     width: 100%;
     height: 100%;
     background: #007ACC;
   }
   
   

   * {
     font-family: Muli, serif;
   }
   
   #nav_button {
     display: none;
   }
   
   .body {
     margin: 0;
     width: 100%;
     background: white;
     float: right;
     transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
     left: 0%;
     transition: 0.75s;
     position: relative;
     overflow: auto;
     font-size: 18px;
   }
   
   .on {
     display: block;
     width: 100px;
     padding: 15px;
     background: #007ACC;
     font-size: 18px;
     font-weight: 600;
     color: #FFF;
     text-align: center;
     border-radius: 50px;
     position: absolute;
     top: 1000px;
     left: 50%;
     margin: 50px 0px 10px 0px;
     transform: translate(-50%, -50%);
     user-select: none;
     box-shadow: 0px 0px 45px 0px rgba(0, 0, 0, .75);
     transition: .1s;
   }
   
   .on:active {
     box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, .75);
     transition: .1s;
   }
   
   .side_nav {
     position: fixed;
     width: 400px;
     height: 100%;
     background: #e6f5ff;
     border-right: solid 8px #004280;
     z-index: 999;
     left: -400px;
     float: left;
     transition: .75s;
     overflow-y: auto;
     overflow-x: hidden;
   }
   
   p {
     font-size: 16px;
   }
   
   .nav_link {
     display: block;
     list-style: none;
     text-align: left;
     text-decoration: none;
     font-size: 16px;
     transition: .2s;
   }
   
   .nav_link a li {
     padding: 9px;
   }
   
   .nav_link a {
     width: 100%;
     text-decoration: none;
     color: #000;
     font-weight: 600;
     transition: .3s;
   }
   
   .nav_link a li:hover {
     background: #007acc;
   }
   
   .nav_link a:hover {
     color: #FFF;
   }
   
   #nav_button:checked ~ .side_nav {
     left: 0;
   }
   
   #nav_button:checked ~ .body {
     transform: matrix3d(0.62, 0, 0.00,...