JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="cs-cz">

        <head>
                <meta charset="utf-8" />
                <link rel="stylesheet" href="styl.css" type="text/css" />
                <title>Počítačová zostava</title>
        </head>

        <body>
           <header>
            <a href="rozlozenie.html"> <div id="logo" ><h1>PC ZOSTAVA</h1></div>  </a>
            
     <div id="menu">
       
        
           <div>
           <h2> Procesor </h2>
          <a href="procesor.html" >Procesor (CPU)  </a>
          <a href="rychlost cpu.html">  Rýchlosť </a>
           <a href="cache.html"> Cache </a>
          <a href="fsb.html"> FSB </a>
        </div>
        
            <div>
          <h2> RAM pamäť </h2>
          <a href="ddr.html" > DDR SDRAM </a>
          <a href="ddr2.html"> DDR2 SDRAM </a>
          <a href="ddr3.html"> DDR3 SDRAM </a>
              <a href="porovnanie.html"> Porovnanie RAM </a>
        </div>
        
           <div>
          <h2> Grafická karta </h2>
          <a href="" > AMD </a>
          <a href="">  INTEL </a>
        </div>
        
                   <div>
          <h2> Grafická karta </h2>
          <a href="" > AMD </a>
          <a href="">  INTEL </a>
        </div>
        
                   <div>
          <h2> Grafická karta </h2>
          <a href="" > AMD </a>
          <a href="">  INTEL </a>
        </div>
        
        
           <div>
          <h2> Harddisk </h2>
          <a href="" > HDD </a>
          <a href="">  SSD </a>
          <a href=""> SSHD </a>
        </div>
        
           <div>
          <h2> Základná doska </h2>
          <a href="" > AMD </a>
          <a href="">  INTEL </a>
          <a href=""> CPU </a>
        </div>
        
           <div>
          <h2> Monitor </h2>
          <a href="" > CRT </a>
          <a href="">  Plazmový </a>
          <a href=""> Led </a>
        </div>
      </div>  
                </header>
        <article>
        <div id="centrovac">
       ...

CSS

h1,  {
        text-align: center;
        color: #0a294b;
        text-shadow: 3px 3px 7px #666666;
}

.obrazok  {
 text-align: center;
 
 

 }
 
 .obrazok2  {
  float:right;
 padding: 50px;
}              

.obrazok3 {
float:left;
}


h1, h3, h4, h5, h6 {
        text-align: center;
        color: #0a294b;
        font-family: Arial;
}


article {
background: url('obrazky/texture.png');
padding: 90px 0px 50px 0px;
}

h1 {
        font-size: 2em;
        font-weight: normal;
        color: white;
        text-align: center;
        text-shadow: 2px 2px 1px #0a294b;
        
}

article header {
        width: 250px;
        float: left;
        position: static;
        background: none;
       }

article section {
	width: 760px;
	float: left; 
	background: white;
  border: 2px solid #006797;
  border-radius: 10px;
  box-shadow: 2px 2px 7px #1c2228;
  padding:  20px 60px 50px;

  }

.cistic {
        clear: both;
}

.vlevo {
        float: left;
}

.pc{
text-decoration:underline;
font-size: 40px}

body {
        background: url('obrazky/texture2.png') #1c2228;
        margin: 73px 0px 0px 0px;
        font: 14px Verdana;
        min-width: 960px;
        
}
header {
   height:120px;
   position: fixed;
   top: 0px;
   background: url('obrazky/texture2.png') #1c2228;
   width: 100%;
   }
   
#logo {
        background: url('obrazky/logo.png') no-repeat;
        width: 250px;
        height: 60px;
        float: left;
        margin: 7px 0px 0px 20px;
}

#logo h1 {
        margin: 14px 0px 0px 50px;
}

}


footer {
        
        height: 40px;
        color: white;
    margin: 20px 0 0 30px;
}  

footer>div {
color:white  ;
text-align:right;}

#cenrovac {
        margin: 0px auto;
        width: 960px;
} 

p {
font-size: 17px}

div#menu>div{
float:left;
overflow:hidden;
height:40px;
padding: 15px 5px 1px 8px;

}

  div#menu>div>a {
display:block;
text-decoration: none;
color: black;
font-size: 17px
}

div#menu>div:hover{
overflow:visible;
height:auto;...