JSFiddle - React, Tailwind, and code Playground

by Ali Khaled

HTML

<div class="maincontainer"> 
            <div id="header">
                        <div class="header">
                        
                        <div class="lognhead1 lognhead12 login_dv login_img"><a href="index.php" class="home_button"></a>&nbsp;&nbsp;</div>
                        
                        
                        <div class="lang_dv"> <a href="#">English</a> / <a href="#">العربية</a></div>
                               <div class="lognhead1 login_dv lognhead13" id="lo" ><a href="javascript:void(0)"  class="lognhead"  onclick="opnlogin();"><?=$lang_resource['LOGIN']?></a>  </div>
                               <div id="registration_dv" class="login_dv"><a href="#" onclick="Main.EditAccount(true)"><?=$lang_resource['REGISTER']?></a></div><!--login_dv-->
                   
                   
                    
                    
                    <div class="main">
                    
                   
                               
                       
                        <!--hd_cenrt-->
                        

                    </div><!--main--> 
                </div>
                <div align="center" class="hd_cenrt">
                   
           

                    <div class="popdiv" style="display:none; left:250px !important;">
	<div class="pops_divs">
		<div class="pop_top"></div>
		<div class="pop_mid">
			<p>Track Order</p>
			<div class="sprt_line"></div>
				<span style="margin-left:5px;">Enter your Order ID</span><br clear="all" />
				<input type="text" class="pop_text" name="trckid" id="consultorder" onKeyUp="Main.CheckOrderEnter(event);" style="margin-left:5px;"/>
				<div class="sprt_line"></div>
				<br clear="all" />
				<input type="button" class="trcknw" value="Track Now" onClick="Main.CheckOrder(event);"/>
			<span style="padding-left:11px;">Your Order Status: <div class="odrstus"></div></span>
			<div class="showOrd" onClick="Main.ShowOrderPop();" style="display:none;">Show...

CSS

.icom_1 {
  width: 109px;
  height: 97px;
  float: left;
  margin: 0px 14px 0px 20px;
  background: url(http://lugmety.com/freefree/images/big-icon-1.png);
}
.icom_2 {
  width: 109px;
  height: 97px;
  float: left;
  margin: 0px 14px 0px 20px;
  background: url(http://lugmety.com/freefree/images/big-icon-2.png);
}
.icom_3 {
  width: 109px;
  height: 97px;
  float: left;
  margin: 0px 14px 0px 20px;
  background: url(http://lugmety.com/freefree/images/big-icon-3.png);
}

JavaScript

$('.icom_1').click(function(){
		$("#home_page").hide();
		$("#next_page").show();
		$("#address").hide();	
    
    
    function calling(id){
	if(id == 1){
		$("#home_page").hide();
		$("#next_page").show();
		$("#address").hide();