JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="menu">
     <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="/search/books/index.html">Books</a></li>
      <li><a href="/search/list.php">Add Url</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact Us</a></li>
    </ul>
</div>

    <p><center>
      <p class="menuhead"><br>
      </p>
      <br>
    </center>

</div>
<center>
<p class="footer1">&nbsp;</p>
<p class="footer1">&nbsp;</p>
<p class="footer1">&nbsp;</p>
<p class="footer1">&nbsp;</p>
<p class="footer1">&nbsp;</p>
<img src="images/img2.png" width="817" height="110">
</center>
<form action="/search/search.php" method='GET'>

  <center> 
    <p><br>
    </p>
    <p>&nbsp;</p>
    <p>
      <input name='search' type='text' class="footer1" size='50'></font></p>
    <p>&nbsp;</p>
  </center>


<p class="footer1"><center>
  <input name='submit' type='submit' class="footer1" value='Search Now'>
  </center>
</p>
</form>
<p class="footer1">&nbsp;</p>
<p class="footer1">&nbsp;</p>
<p class="footer1">&nbsp;</p>
<p class="footer1">&nbsp;</p>
<p class="footer1">&nbsp;</p>
<p class="footer1">
<p class="footer1">
<p class="footer1">
<center>





</center

CSS

*{margin:0px;
    padding:0px;
    }

    #menu {
    height:38px;
    padding-top:0px;
    background-color:white;
    text-align: center;
    }

    .photo {
        position:relative;
        font-family:arial;  
        overflow:hidden;
        border:0px;
        width:811px;
        height:98px;
        margin-left:250px;
    }   

        .photo .heading, .photo .caption {
    position:absolute;
    background:#000;
    height:50px;
    width:816px;
    opacity:0.6;
        }

        .photo .heading { 
            top:-50px;
        }

        .photo .caption {
    bottom:-42px;
    left:3px;
        }

        .photo .heading span {
            color:#26c3e5;  
            top:-50px;
            font-weight:bold;
            display:block;
            padding:5px 0 0 10px;
        }

        .photo .caption span{
            color:#FF0;
            font-size:16px;
            display:block;
            padding:5px 10px 0 10px;
        }

    .footer {
    font-family: Calibri;
    font-size: 18px;
    color: #000;
}
    head {
    text-align: center;
}
    menu1 {
    text-align: center;
}
    .footer a {
    text-align: center;
}
    .menuhead {
    font-family: Calibri;
}
    .menuhead {
    font-size: 24px;
}
    .menuhead {
    font-size: 18px;
}
    .footer1 {
    text-align: left;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 18px;
    color: #000;
}