JSFiddle - React, Tailwind, and code Playground

HTML

<html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Estoque</title>
        <script src="scripts/cssdiv.js"></script>
        <link rel="stylesheet" href="css/index.css">
      </head>
<body>

        <div class="container">

          <div class="fundo">

            <div class="cabecalho">

              <div class="logo"><img src=""/></div>
              <div class="titulo">ESTOQUE BOBINAS</div>
              <div class="logo2"> <img src=""></div>

            </div>
            <!-- >>>>>>>>> botao <<<<<<<<< -->
            <div class="botao">
              <button id="bt1"> A </button>
              <button id="bt2"> B </button>
            
            </div>
            <!-- >>>>>>> FIM botao <<<<< -->


            

            <div id="div1" class="escondido"> <!-- >>>> INIcio da DIVA do botao 1 <<<<  -->
                          
             <!-- <div class="pratileira" onload="setTimeout('Atualizar()',1000)"><h3>Prateileira A</h3></div> -->
             <div class="pratileira"><h3>Prateileira A</h3></div>

              <div class="parte1">

                <div class="partileiraandar"> 

                  <div class="andar">Andares</div>
                  <div class="andar_p">Andar 0</div>
                  <div class="andar_p">Andar 1</div>
                  <div class="andar_p">Andar 2</div>
                  <div class="andar_p">Andar 3</div>

                </div>
                <!-- FIM  1 a 8 da -->
                <div class="abc_dados_prateleiras">
                  <div class="p_l">1</div>
                  <div class="p_l">2</div>
                  <div class="p_l">3</div>
                  <div class="p_l">4</div>
                  <div class="p_l">5</div>
                  <div class="p_l">6</div>
                  <div class="p_l">7</div>
                  <div class="p_l">8</div>
                </div> 
                <!-- FIM  1 a 8 da...

CSS

/* Fonts from Google Fonts - more at https://fonts.google.com */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

body {
  background-color: white;
  font-family: "Open Sans", sans-serif;
  padding: 5px 25px;
  font-size: 18px;
  margin: 0;
  color: #444;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
  color-adjust: [exact];

}

h1 {
  font-family: "Merriweather", serif;
  font-size: 32px;
}

body {
  margin: 0;
  padding: 0;
  background-color: #FAFAFA;
  font: 10pt "Tahoma";
}

@media print {
  body, page[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
}

page[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}




.container{

  margin-left: auto; /* magin externa Esquerda */ 
  margin-right: auto; /* magin externa direita */
  clear: none;
  float: none;
  padding-left: 15pt;
  padding-right: 15pt;
}


.fundo{
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  background-image: url("../img/Fundo_simples_A4.jpg");
  color-adjust: exact;
  z-index:-1;

}


/*img e cabecalho*/
.cabecalho{
  width:100%;
  z-index:1;
  position: absolute;
  padding-top: 5pt;
  /* position: absolute;teste*/
}

/* FIM cabecalho*/

/* logo RCm*/
.logo{
  height:auto;
  width:20%;
  float: left;
}

.logo img{
  height:auto;
  width:100%;

}
/*FIM logo RCM*/

.escondido{
  display:none;

}


.botao{
  height:auto;
  width:100%;
  float: left;
  text-align:center;
  color: #c40027;
  font-weight: bold;
  z-index:100;
  position: absolute;
  margin-top: 10%;
  margin-bottom: 80%;
}

#bt1{
  height:30px;
  width:60px;
  text-align:center;	
  color:#000000;
  background-color: rgba(75, 75, 75, 0.12);
}


button{
  height:30px;
  width:60px;
  text-align:center;	
 ...

JavaScript

var div1;
var div2;

if (document.readyState === "complete") onload();
else window.onload = onload;

function onload(){
  
  div1 = document.getElementById("div1");
  div2 = document.getElementById("div2");
  
  var bt1 = document.getElementById("bt1");
  bt1.onclick = mostrarDiv1;
  var bt2 = document.getElementById("bt2");
  bt2.onclick = mostrarDiv2;
  
}

function mostrarDiv1(){
  
  div1.classList.remove("escondido");
  div2.classList.add("escondido");
     
}

function mostrarDiv2(){
  div1.classList.add("escondido");
  div2.classList.remove("escondido");

}