JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
<div id="header">
<div id="loginpart">
<form action="pages/userspage/checkuser.php" method="post" name="form_login" id="form_login">
<input name="txf_id" type="text" id="textfield_id"/>
<input name="txf_pw" type="password" id="textfield_pw"/>
<input name="button_login" type="submit" value="login" id="button_login" />
</form>
<a href="pages/signuppage/signup.php">sign up</a>
</div>

</div>
<hr />
<div id="content">
<div id="logopart">
     <img src="../../includes/images/logo.jpg" alt="AnaDilim" name="logoimg" id="logoimg" />
</div>
<div id="mainpart">
    <div id="searchbox">
        <form id="form_search "action="../../mainpage/index.php" method="get">
      <input id="textfield_search" name="textfield_search" type="text" maxlength="100" />
      <input id="button_search" name="button_search" type="submit" value="search" />
          </form>
     </div>
    <div id="resultpart">this is result part</div>
    <div id="numberpart">words:256000</div>
 </div>
 </div>
<hr />
<div id="footer">All rights reserved !!</div>

CSS

/* CSS Document */
#container{
width: 100%;
background-color: #666;
/**********************
***********************
header part css
***********************
**********************/
}
#header {
width: 100%;
min-height: 50px;
background-color: #0FF;
}
#form_login {
float: left;
margin-left: 50px;
vertical-align: middle;
background-color: #F30;
margin-top: 15px;
min-width: 30%;
}
#txf_username {

margin-left: 10px;
}
#txf_password {

margin-left: 10px;
}
#button_login {

margin-left: 20px;
min-width: 100px;
}
/*********************
**********************
end of header part
**********************
**********************/
#content{
width: 100%;
background-color: #FF0;
    }
#logopart {
width: 100%;
background-color: #0F0;
display: inline-block;
}

#logoimg{
margin-top: 20px;
margin-bottom: 20px;
margin-right: auto;
margin-left: auto;
display: block;
}
#mainpart {
width: 100%;
background-color: #39F;
display: inline-block;
}


#searchbox {
margin-top: 10px;
display: block;
background-color: #F00;
margin-right: auto;
margin-left: auto;
width: 50%;
}
#textfield_search {
vertical-align: middle;
width: 60%;
font-size: 24px;
}

#button_search {
vertical-align: middle;
width: 30%;
margin-left: 4%;
}
#resultpart {
background-color: #0FF;
width: 70%;
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
}
#numberpart {
background-color: #C6F;
display: block;
margin-top: 80px;
margin-right: auto;
margin-left: auto;
width: 25%;
margin-bottom: 60px;
text-align: center;
clear: both;
}
#footer {
width: 100%;
background-color: #0CC;
text-align: center;
clear: both;
}