JSFiddle - React, Tailwind, and code Playground

by Elender Gallas

HTML

<!--Arquivo HTML contendo código fonte do PAINEL AIS-->
<title>PAINEL AIS WEB</title>

<body>
  <div class="container">
    <header>
      <img border="0" alt="AISWEB" style="width:288px;height:52px;float:left" src="http://www.infraero.gov.br/images/stories/Infraero/Marca/LogoHorizontal2D.png">
      <h1>PUBLICAÇÕES AERONÁUTICAS</h1>
      <p> Conforme Memo-Circ nº 16403/DONA/2015</p>


      <div class="div1 style=" text-align: left; font-family: verdana; font-size: 30px;>
        <p>
          <a href="C:/CBA" target="_blank">
            <input type="button" name="btn" class="btn-style" value="CBA" />
          </a>
        </p>
        <p>
          <a href="C:/CBA" target="_blank">
            <input type="button" name="btn" class="btn-style" value="AIC" />
          </a>
        </p>
        <p>
          <a href="C:/CBA" target="_blank">
            <input type="button" name="btn" class="btn-style" value="CIRCULARES" />
          </a>
        </p>
        <p>
          <a href="C:/CBA" target="_blank">
            <input type="button" name="btn" class="btn-style" value="FORMULÁRIOS" />
          </a>
        </p>
        <p>
          <a href="C:/CBA" target="_blank">
            <input type="button" name="btn" class="btn-style" value="FOLHETOS" />
          </a>
        </p>
        <p>
          <a href="C:/CBA" target="_blank">
            <input type="button" name="btn" class="btn-style" value="ANEXOS ICA 53-2" />
          </a>
        </p>
        <p>
          <a href="C:/CBA" target="_blank">
            <input type="button" name="btn" class="btn-style" value="ANEXO ICA 63-10" />
          </a>
        </p>
      </div>
      <div class="div2" style="text-align: right;  font-family: verdana; font-size: 30px;">
        <p>
          <a href="C:/CBA" target="_blank">
            <input type="button" name="btn2" class="btn2" value="TCA" />
          </a>
        </p>
        <p>
          <a href="C:/CBA" target="_blank">
            <input...

CSS

body {
  font-family: verdana;
  background-color: black;
  color: white;
}

.nav {
  border: 1px solid;
}

div.container {
  width: 100%;
  text-align: right;
  background-color: white;
  color: black;
  margin: 0px;
  padding: 0px;
}

.div1 {
  font-size: 30px;
  float: left;
  width: 360px;
  height: auto;
  margin: 10px;
  padding: 10px;
}

.div2 {
  float: right;
}

header {
  padding: 1em;
  color: black;
  background-color: white;
  clear: left;
}

.main-container {
  float: left;
  position: relative;
  left: 45%;
}

.fixer-container {
  float: left;
  position: relative;
  left: -110%;
}

nav {
  float: right;
  max-width: 160px;
  margin: 0;
  padding: 1em;
}

img {
  width: 200px;
}

a:link,
a:visited {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a:link:active,
a:visited:active {
  color: white;
}

.btn-style {
  border: solid 2px #0354f7;
  border-radius: 0px 10px 50px 4px;
  moz-border-radius: 0px 10px 50px 4px;
  -webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
  font-size: 30px;
  color: #ffffff;
  padding: 5px 17px;
  background-color: #006fff;
  cursor: pointer;
  padding: 5px 40px 5px 20px;
}

.btn:hover {
  background: #3cb0fd;
  background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
  background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
  background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
  text-decoration: none;
  cursor: pointer;
}

.btn2 {
  border: solid 2px #0354f7;
  border-radius: 4px 0px 0px 50px;
  moz-border-radius: 4px 0px 0px 50px;
  -webkit-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
  -moz-box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.7);
  font-size: 30px;
  color: #ffffff;
  padding: 5px 17px;
 ...