JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>DCS text analytics tool</title>
      <link rel="stylesheet" href="normalize.css">
      <link rel="stylesheet" href="sprint12.css">
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
   </head>
   <body>
      <main class="main-wrapper">
         <header class="site-header clearfix">
            <div class="main-logo">
               <table>
                  <tr>
                     <td><img src="SR-logo.png" alt="logo">
                     </td>
                     <td>DCS text analytics tool</td>
                  </tr>
               </table>
            </div>
         </header>
         <section>
            <h1 class="billboard clearfix">
            </h1>
         </section>
         <!-- This is a commen-->
         <form class="box" method="post" action="" enctype="multipart/form-data">
            <div class="box__input">
               <input class="box__file" type="file" name="files[]" id="file" data-multiple-caption="{count} files selected" multiple />
               <label for="file"><strong></strong> <span class="box__dragndrop"> </span></label>
               <button class="box__button" type="submit">Upload</button>
            </div>
         </form>
         <div class="search-box">
            <input class="search-txt" type="text">
            <a class="search-btn" href="#">
            <i class="fas fa-search"></i>
            </a>
         </div>
      </main>
   </body>
</html>

CSS

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}
 .clearfix {
     display: inline-block;
}
/* start commented backslash hack \*/
 * html .clearfix {
     height: 1%;
}
 .clearfix {
     display: block;
}
/* close commented backslash hack */
 .main-wrapper {
     align-items:center;
     display: flex;
     justify-content: space-between;
     background:white;
     padding: 5px;
}
 body{
     margin: 0;
     padding: 0;
     background: whitesmoke;
}
 .site-header{
     padding:0px 0;
}
 .main-logo{
     img{
         size: 5px;
         display: inline-block;
    }
}
 .site-name{
     font-size: 17px;
     display: inline-block;
     padding: 0;
     color:#627d77;
}
 .billboard{
     text-align:right;
     padding: 10px 5%;
     margin: 0;
     font-size: 20px;
}
 .box__input{
     text-align:right;
}
 .search-box{
     position: absolute;
     top: 10%;
     left: 50%;
     transform: translate(-50%,50%);
     background: #2F3640;
     height: 40px;
     border-radius: 40px;
     padding:10px;
}
 .search-box:hover > .search-txt{
     width: 320px;
     padding: 0 6px;
}
 .search-box:hover > .search-btn{
     background: white;
}
 .search-btn{
     color: #627d77;
     float: right;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: #2F3640;
     display: flex;
     justify-content: center;
     align-items: center;
     transition: 0.4s;
}
 .search-txt{
     border: none;
     background: none;
     outline: none;
     float: left;
     padding: 0;
     color: white;
     font-size: 20px;
     transition: 0.4s;
     line-height: 40px;
     width: 0px;
}