JSFiddle - React, Tailwind, and code Playground

by Larck6

HTML

<?php

require_once ('conexao.class.php');

$minhaConexao = new Conexao();
$minhaConexao->open();

function busca_endereco($end)
{
  $minhaConexao = new Conexao();
  $minhaConexao->open();
  $result = $minhaConexao->query("SELECT * FROM bobinas_md where endereco_estoque = '".$end."';");
  If (!$result)
  {
    $bobina = '';
  }
  else
  {
    $row = pg_fetch_array($result);
    $bobina = $row['bobina'];
  }
  return $bobina;
}
?>



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

      <!-- teste Java -->




      <!-- teste Java -->




      <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"> D </button>
              <button id="bt5"> E </button>
              <button id="bt6"> F </button>
              <button id="bt7"> G </button>
              <button id="bt8"> H </button>
              <button id="bt9"> I </button>
              <button id="bt10"> J </button>
              <button id="bt11"> Z </button> 
            </div>
            <!-- >>>>>>> FIM botao <<<<< -->


            

           ...

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 diva;
var divb;
var divc;
var divd;
var dive;
var divf;
var divg;
var divh;
var divi;
var divj;
var divz;

window.onload = function(){

  diva = document.getElementById("diva");
  divb = document.getElementById("divb");
  divc = document.getElementById("divc");
  divd = document.getElementById("divd");
  dive = document.getElementById("dive");
  divf = document.getElementById("divf");
  divg = document.getElementById("divg");
  divh = document.getElementById("divh");
  divi = document.getElementById("divi");
  divj = document.getElementById("divj");
  divz = document.getElementById("divz");

  var bt1 = document.getElementById("bt1");
  bt1.onclick = mostrarDiv1;
  
  var bt2 = document.getElementById("bt2");
  bt2.onclick = mostrarDiv2;
  
  var bt3 = document.getElementById("bt3");
  bt3.onclick = mostrarDiv3;
  
  var bt4 = document.getElementById("bt4");
  bt4.onclick = mostrarDiv4;
  
  var bt5 = document.getElementById("bt5");
  bt5.onclick = mostrarDiv5;
  
  var bt6 = document.getElementById("bt6");
  bt6.onclick = mostrarDiv6;
  
  var bt7 = document.getElementById("bt7");
  bt7.onclick = mostrarDiv7;
  
  var bt8 = document.getElementById("bt8");
  bt8.onclick = mostrarDiv8;
  
  var bt9 = document.getElementById("bt9");
  bt9.onclick = mostrarDiv9;
  
  var bt10 = document.getElementById("bt10");
  bt10.onclick = mostrarDiv10;
  
  var bt11 = document.getElementById("bt11");
  bt11.onclick = mostrarDiv11;
 
  diva.classList.add ("escondido");
  divb.classList.add ("escondido");
  divc.classList.add ("escondido");
  divd.classList.add ("escondido");
  dive.classList.add ("escondido");
  divf.classList.add ("escondido");
  divg.classList.add ("escondido");
  divh.classList.add ("escondido");
  divi.classList.add ("escondido");
  divj.classList.add ("escondido");
  divz.classList.add ("escondido");


}



function Atualizar(){

  window.location.refresh();

}

function mostrarDiv1(){
  

  setTimeout('Atualizar()',1000)
 ...