JSFiddle - React, Tailwind, and code Playground

by Tali Zorah

HTML

<div class="header_top"><!--header_top-->
			<div class="container">
				<div class="row">
					
					</div>
                            <div id="topjob">
                                
                                <div id="left"><ul>
								<li><a href="#"><i class=""></i>LOGIN</a></li>
								<li><a href="#"><i class=""></i>REGISTER</a></li>
	
                                                        </ul></div>
                                    
                                <div id="right"><ul>
                                                            <li><a href="index.html"><img src="images/mastercard.png" alt="" /></a>
								<li><a href="index.html"><img src="images/visa.png" alt="" /></a>
                                                                </ul>
                                                </div></div>
                                        </div>
				
				</div>
               
		</div>

CSS

#topjob {
    width:100%;
    text-align:center;
}

#left {
    float:left;
    width:500px;
    height: 50px;
    background: #ff0000;
   
}

#right {
    width:100%;
    display: inline-block;
    margin-right:auto;
    margin-left:100px;
    width:100px;
    height: 50px;
    background: #00ff00;
}

#center ul li{
    float:right;
    width:200px;
    height: 50px;
    background: #0000ff;
   
   
}