JSFiddle - React, Tailwind, and code Playground

by Larck6

HTML

<!DOCTYPE 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">
    <link rel="stylesheet" href="css/cel414.css" media="screen and (max-width: 414px)" />
    <link rel="stylesheet" href="css/cel600.css" media="screen and (min-width: 415px) and (max-width: 600px)" />
  </head>
  <body>
    
    <div class="container">

      <div class="fundo">
        
        <div class="cabecalho">
          
          <div class="logo"><img src="img/Logo%20Preta%20RCM.png"/></div>
          <div class="titulo">ESTOQUE BOBINAS</div>
          <div class="logo2"> <img src="img/png%20logo%20vermelha.png"></div>
          
        </div>
        <!-- >>>>>>>>> botao <<<<<<<<< -->
        <div class="botao">
        <button id="bt1"> A </button>
        <button id="bt2"> B </button>
        <button id="bt3"> C </button>
        <button id="bt4"> E </button>
        <button id="bt5"> F </button>
        <button id="bt6"> G </button>
        <button id="bt7"> H </button>
        <button id="bt8"> I </button>
        <button id="bt9"> J </button>
        <button id="bt10"> Z </button> 
        </div>
        <!-- >>>>>>> FIM botao <<<<< -->
        
        
        
        <div id="div1">
        
        <!-- >>>>Tabela completa A<<<<  -->
        
        <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...

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;
}

.escondido{
  display:none;
  
}



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


}




.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*/

/*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{
 ...

JavaScript

var div1;
var div2;

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

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

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

}