JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
    <li><a href="http://127.0.0.1:8000/">Home</a></li>
    <li><a href="http://127.0.0.1:8000/about">About us</a></li>
    <li><a href="http://127.0.0.1:8000/faq">FAQ</a></li>
    <li><a href="http://127.0.0.1:8000/contact">Contact us</a></li>
    <li><a href="http://127.0.0.1:8000/InvitationRequest/">Invitation Request</a></li>
    <li><a href="http://127.0.0.1:8000/cws/login">CWS Login</a></li>
    </ul>
</nav>
<h1 class="headline">'CWS Main' Headline</h1>
<div class="login">
<div class="login detials">
    <p class="login userdetials">CSS 'MasterPage' header ('<b>test202</b>' is logged-in) &nbsp;&nbsp; <a href="http://127.0.0.1:8000/cws/logout">Logout &gt;&gt;</a></p>

</div>
<br>
</div>


        <form id="frm" method="get" style="position: relative;top: 25px;">
            <div style="display:none"><input type="hidden" name="csrfmiddlewaretoken" value="CcCIWfSIKU87RfATVwXKf8iPidmSxt8Q"></div>

          <div class="table">

                       <div class="users_detials"><p> Gender: Female</p></div>
                    <div class="likeAndselete">
                
                        <div class="user_like">
                           <span style="float:left;"><img src="./'CWS Main' Title_files/161900_144917055340_1101069666_q.jpg"><p>(1) LA Lakers</p></span>
                            <select style="float:right;" id="ddlLikes_1" name="ddlLikes_1" class="required" title="Please select the Like&#39;s category">
                                

                                    
                                        <option value="">Choose</option>
                                    

                                

                                    
                                        <option value="m">Music</option>
                                    

                                

                                    
                                        <option value="c">Clothes</option>
                            ...

CSS

@charset "utf-8";
/* CSS Document */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/


body {
    line-height: 1;
}
html, body {
    margin: 0;
    width: 100%;
    height: 100% !important;
    position: relative; 
}

ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

h1, h2, h3, h4, h5, h6, p.title {
font-family: Helvetica, Arial, sans-serif;
letter-spacing: -0.05em;
color: #292929;
}

.detials{
    position: relative;
    top: 26px;
    left:10px;
    height:36px;
    width:98%;
    border:1px solid black;
}

.someClass
{
    padding:30px 30px 30px 30px; margin:0px 0;
    text-align:left;
    background-color:#d5d5d5;
    font-size:22px;
    font-weight:bold;
}

.redStar
{
    font-family: Arial;
    font-size: 12px;
    color: red;
    font-weight: normal;
}

.brDiv5
{
    height: 5px;
    line-height: 5px;
}

.brDiv10
{
    height: 10px;
    line-height: 10px;
}

.h1
{
    font-size: 18px; text-align:left; line-height:15px; margin:0px; padding:0px;
    font-weight:bold;
    color:#000000;
    display: inline;
}

.headline
{
    width:180px;
    font-size:20px;
    position:relative;
    top:20px;
    left:20px;
    
}
.users_detials{
    width: 200px;
    border: 1px solid black;
    height: 100%;
    float: left;
    padding: 1em 1em;
}


.userdetials{
    position:relative;
    top:6px;
    float:right;
    padding:0.2% 1% 0.2% 0%;
}
.user_like{
    position: relative;
    left: 65px;
    top: 18px;
    width: 250px;
    float: left;
    margin: 0px 7px 20px 6px;
}

.table{
    width: 50%;
    left: 10px;
    position: relative;
    border: 1px solid black;
    padding: 1em 1em 1em 1em;
    margin-bottom:50px;
    display: table;
}
.likeAndselete{
    width: 25%;
    position: relative;
    left: 200px;
    top:-66px;
}
#spnBtnGo{
position: absolute;
left: 50%;
bottom: 0px;
}

footer
{
   ...