JSFiddle - React, Tailwind, and code Playground

by Nadim Alayaseh

HTML

<div id="N_Container">
            <!-- Setup Shop -->
            <div id="N_Form">
                <h1>Shop Setup :</h1>
                <hr>
                <div id="Fill_Form">
                    <!----- 1 ---->
                    <form method="POST" action="../BackEnd/ShopSetup.php" name="Setup" enctype="multipart/form-data">
                        <div id="Use_Fill_Form">
                            <div id="left">
                                Business Name
                            </div>

                            <div id="right">
                                <input type="varchar" name="name">
                            </div>
                        </div>


                        <div id="Use_Fill_Form">
                            <div id="left">
                                Business Photo
                            </div>

                            <div id="right">
                                <input type="file" name="photo">
                            </div>
                        </div>

                        <!----- 2 ---->
                        <div id="Use_Fill_Form">
                            <div id="left">
                                Phone
                            </div>

                            <div id="right">
                                <input type="int" name="phone">
                            </div>
                        </div>

                        <!----- 3 ---->
                        <div id="Use_Fill_Form">
                            <div id="left">
                                Address
                            </div>

                            <div id="right">
                                <input type="varchar" name="address">
                            </div>
                        </div>

                        <!----- 4 ---->
                        <div id="Use_Fill_Form">
                            <div id="left">
                                Email
         ...

CSS

#empty{
	margin-top:5px;
	margin-bottom:5px;
	}


#N_Container{
	width:85%;
	float:none;
	margin:0 auto;
	filter:none;
	height:100%;
}


#N_Form{
	width:60%;
	float:left;
}
#N_Form h1{
	font-size:18px;
	text-align:left;
}

#N_Form #Fill_Form{
	Width:100%;
	
}
#N_Form #Fill_Form #Use_Fill_Form{
		float:none;
	margin-top:5px;
	padding-top:.7em;
	padding-bottom:.7em;
	filter:none;
	width:100%;
}
#N_Form #Fill_Form #Use_Fill_Form #left{
	width:20%;
	float:left;
}
#N_Form #Fill_Form #Use_Fill_Form #right{
	width:80%;
	float:right;

}
#N_Form hr{
	height:.1em;
	width:95%;
	margin:0 auto;
	float:left;
}

#N_Form #Date_Time{
	Width:100%;
	
}




#N_Loaction{
	width:40%;
	float:right;
}
#N_Loaction h1{
	font-size:18px;
	text-align:left;
}

#Your_Date_Form{
	width:100%;
	float:none;
	filter:none;
	margin-top:1.5em;
	padding-top:.25em;
	padding-bottom:.25em;}
	#Your_Date_Form #Day{
		width:25%;
		float:left;
	}
		#Your_Date_Form #Time{
		width:50%;
		float:left;
	}
			#Your_Date_Form #Status{
		width:25%;
		float:left;
	}

JavaScript

//Drag the view page >> to see the result properly <<<<<<<