JSFiddle - React, Tailwind, and code Playground

HTML

<html>
  <head>
    <meta name="keywords" content="duckplay, srbija, arilje, duck, play, itsnikola, designed by itsnikola, filmovi sa prevodom, filmovi, sa prevodom, serije">
    <meta name="description" content="Najbolji site za gledanje filmova DuckPlay   by itsnikola">

    <title>ItsNikola - Pocetna</title>

    <link rel="stylesheet" type="text/css" href="\Nav/nav.css" />
    <link rel="stylesheet" type="text/css" href="\Footer/footer.css" />
    <link rel="icon" href="\Pictures/favicon.png" sizes="256x256" type="image/png">
    <link rel="stylesheet" type="text/css" href="product.css">

    <script src="\JavaScript/nav.js"></script>

	</head>
	<body>
    <header>
      <nav>
        <ul>
           <div class="dropdown">
              <li><button onclick="myFunction()" class="button">&emsp; Kategorije&emsp;&nbsp; &nbsp; </button></li>
                <div id="myDropdown" class="buttons">
                  <li><a href="/Majice">Majice</a></li>
                  <li><a href="">Patike</a></li>
                  <li><a href="">Sorcevi</a></li>
                </div>
              </div>

           <li><href="#">&emsp;&emsp;</li>
           <li><a href="/">Pocetna</a></li>
           <li><href="#">&emsp;&emsp;</li>
           <li><href="#">&emsp;&emsp;</li>
           <li><href="#">&emsp;&emsp;&emsp;&emsp;</li>
           <li><href="#">&emsp;</li>
           <li><a href="contact.php" >Kontakt</a></li>
           <li><href="#">&emsp;&emsp;&emsp;&emsp;</li>
           <li><href="#">&emsp;&emsp;</li>
        </ul>
    </nav>
    </header> 

    <div class="product">
        <p><a href="/">Pocetna</a>&nbsp; &nbsp;>&nbsp; &nbsp;<a href="/Majice">Majice</a>&nbsp; &nbsp;>&nbsp; &nbsp;<a href="">Bela Majica - Pamuk</a></p>
        <hr>
        <h2>Bela Majica - Pamuk</h2>
       <img id="myImg" src="\Pictures/unnamed.jpg" style="width:100%;max-width:500px"> 
          <div id="myModal" class="modal">
          <span class="close">&times;</span>
        <img...

CSS

.product{
    width: 1200px;
    height: auto;
    margin:auto;
}
.product h2{
    padding: 15px;
    color: black;
    padding-left: 30px;
}
.product p{
    padding: 10px;
    font-weight: 10px;
}
.product p a {
    color: black;
}
img{
    padding-left: 0px;
    padding: 20px;
}

.desnastrana{
    float:right;
    border-radius: 3px;
    border: 2px solid;
    border-color: #2E9A9F;
    width: 250px;
    height: 270px;
    margin-right: 100px;
}

input[type=submit]{
    border-radius: 3px;
    background: white;
    text-decoration: none;
    color: #2E9A9F;
    border: solid 2px #2E9A9F;
    padding: 10px;
    width: 50%;
    margin-left: 85px;
    margin: 10px;
    margin-top: 18px;
    float: left;
    cursor: pointer;
}

select{
    float:right;
    margin-right: 30px;
    bottom: 0px;
    padding: 5px;
    border-radius: 3px;
    color: #2E9A9F;
    border: 2px solid;
    border-color: #2E9A9F;
    background: white
}
input[type=number] {
    float:left;
    margin-left: 30px;
    height: 31px;
    bottom: 0px;
    padding: 5px;
    border-radius: 3px;
    color: #2E9A9F;
    border: 2px solid;
    border-color: #2E9A9F;
    background: white
    margin: auto;
    width: 50%;
    margin-left: 10px;
}

input[type=submit]:hover{
    background-color: #2E9A9F;
    color: white;
}

.div12 p{
    font-size: 15px;
    font-weight: bold;
}

.div12 p a{
    font-size: 18.7px;
    font-family: 'Roboto-Bold'
}

.div151  p{
    font-family: 'Roboto-Bold';
    font-size: 23px;
    text-align: center;
    padding-top: 8px;
}

.div151 li{
    padding-bottom: 18px;
    padding-top: 1px;
    list-style: none;
    font-size: 17.5px;
    text-align: center;
}

table {
    border-collapse: collapse;
    width: 100%;
    height: auto;
    border: 2px solid #2E9A9F;
    border-radius: 3px;
}
.space158{
    height: 200px;
}
.space142{
    height: 50px;
}
table th,td{
    text-align: left;
    border: 1px solid #ddd;
    padding: 8px;
    font-weight: bold;
}

tr:nth-child(even)...