JSFiddle - React, Tailwind, and code Playground

by suresh ponnukalai

HTML

<div id="container">
                    <div id="header">
                        <img id="Image5" src="Images/parker-logo-big.jpg" style="height:40px;" />
                    </div>
                    <div id="QDetails">
                        
&nbsp;
                        <span id="Label10" style="display:inline-block;height:20px;">User: Lee Barker |</span>
&nbsp;&nbsp;
                        
&nbsp;<span id="Label12" style="display:inline-block;height:20px;">Inspecting SN: 123465798132 |</span>
&nbsp;
&nbsp;<span id="Label11" style="display:inline-block;height:20px;">Stage: Build Stage 2</span>
&nbsp;
&nbsp;<span id="Label13" style="display:inline-block;height:20px;">|</span>
                    </div>
                    <div id="ContentMain">
                        <div id="contentInner">

                                <input type="hidden" name="HiddenField1" id="HiddenField1" />
                            <div>
                              <br />
                                <input type="submit" name="cmdStartInspection" value="Start Inspection" id="cmdStartInspection" />
      
                            </div>
                            <div id="Quesions">
                                
                                                                
                                
                                
                                
                                
                            </div>
                            <br />
                                <span id="Label4">Label</span>
                                <br />
                                My label result: 
        
                                <span id="Label1">Label</span>
                                       

                            <div id="Panel1" class="PopupModel">
	
                                <div class="PanelCancelDiv">
                                    <img id="Image1" src="Images/pat.png" />
                            ...

CSS

/*Model Popups styling*/
.modelBackground 
{
    background-color:darkgray;
    filter: alpha(opacity=90);
    opacity:0.9;
}

.PopupModel 
{
    background-color:#EEEEEE;
    border-width:3px;
    border-style:solid;
    border-color:gray;
    font-family:Verdana;
    font-size:medium;
    padding: 3px;
    width:700px;
    height:320px;
}

.PanelSaveDiv 
{
    text-align:center;
    font-family: Arial, Helvetica, sans-serif; 
    font-size: x-Small; 
    color: black; 
}

.PanelCancelDiv 
{
    text-align:right;
}

.LoadingPanel
{

    border-width:3px;
    border-style:solid;
    border-color:gray;
    width:200px;
    text-align:center;
}

.LoadingText
{
    font: bold 48pcontx arial;
    color:#FFD000;
}

/*PI Form styling*/

#header,#footer, #SideMenu, #QDetails, #ContentMain{ position:absolute; right:0px; left:0
}

#header{
   height:40px; top:0; background-color:black;
}

#QDetails{
   height:25px; 
   background-color:white; 
   text-align:center; 
   font-size:small; 
   border-color:black; 
   border-width:2px; 
   border-style:solid; 
   font-family: Arial, Helvetica, sans-serif; 
   line-height:25px;
}

#footer{
  height:20px; bottom:0; background-color:gold;
}
#contentInner{
  padding-left:4px;
  background-color:whitesmoke;
  width:950px;
  text-align:left;
  top: 90px;
  bottom:20px;
  height:100%;
  margin-left: auto;
   margin-right: auto;
}

#ContentMain{
  left:0px;
  top:69px;
  bottom:20px;
  background-color:lightgray;
  text-align:center;
  overflow:hidden;
  align-items:center;
  height:1900px;/*Add this line in when designing form otherwise all controls will not be visable. Must be removed for production*/ 
}

/*PI Question Styling*/

.QT1Pan
{
position:relative;
}

.QuestionLabel{
    background-color:orange;
    color:black;
}

.QT1Image{
    position:absolute;
    width:460px;
    height:100px;
    left:200px;
    top:45px;
}

.QT1Yes
{
    position:absolute;
    left:750px;
    top:55px;
    width:100px;
}

.QT1No
{
   ...