JSFiddle - React, Tailwind, and code Playground

by Larck6

HTML

<html>
     
      <body>

        <div class="container">

          <div class="fundo">

            <div class="cabecalho">

              <div class="logo">Logo</div>
              <div class="titulo">ESTOQUE</div>
              <div class="logo2"> Logo</div>

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


            

            <div id="diva"> <!-- >>>> INIcio da DIVA do botao 1 <<<<  -->
                          
              <div class="pratileira_a"><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 -->


                <!-- >>>>>>>>>>> inicio dos dados <<<<<<<<<< -->
                <div class="dados_pratileira_1">
                  <?php
                  $bobina = busca_endereco("A01");
                  ?>
                  <div id="A01"><?=$bobina?></div>


                  <?php  
                  $bobina = busca_endereco("A02");
                  ?>
                  <div...

CSS

.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;	
  color:#000000;
  background-color: rgba(75, 75, 75, 0.12);
  
}

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

}




/*Titulo central*/
.titulo{
  height:auto;
  width:50%;
  float: left;
  color: #c40027;
  text-align: center;
  font-size: 15pt;
  font-weight: bold;
  padding-top: 10pt;
}
/* FIM Titulo  central*/

/*Simbolo vermelhor*/
.logo2{
  height:auto;
  width:20%;
  float: right;
  z-index:2;

}

.logo2 img{
  height:auto;
  width:40%;
  margin-left:40%;
  float: right;
}


/* fim simbolo vermelhor*/





.pratileira_a{
  height:auto;
  width:100%;
  float: left;
  text-align:center;
  margin-top:15%;
  color: #c40027;
  font-weight: bold;


}



.parte1{
  height:auto;
  width:100%;

}


.andar{
  color: #c40027;
  font-weight: bold;
  margin-left: 0;
  padding-top: 0;

}
.andar_p{
  height:70px;
  color: #c40027;
  font-weight:...

JavaScript

var diva;
var divb;


window.onload = function(){

  diva = document.getElementById("diva");
  divb = document.getElementById("divb");
 

  var bt1 = document.getElementById("bt1");
  bt1.onclick = mostrarDiv1;
  
  var bt2 = document.getElementById("bt2");
  bt2.onclick = mostrarDiv2;

 
  diva.classList.add ("escondido");
  divb.classList.add ("escondido");


}


function mostrarDiv1(){
  

  diva.classList.remove("escondido");
  divb.classList.add("escondido");

}


function mostrarDiv2(){

  diva.classList.add("escondido");
  divb.classList.remove("escondido");
 


}