JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title>Coder</title>
<meta charset="utf-8">
<!-- Standard Coder Includes -->
<script>
var appname = "{{app_name}}"; //app name (id) of this app
var appurl = "{{&app_url}}";
var staticurl = "{{&static_url}}"; //base path to your static files /static/apps/yourapp
</script>
<link href="/static/apps/coderlib/css/index.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/static/common/js/jquery.min.js"></script>
<script src="/static/common/ace-min/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="/static/apps/coderlib/js/index.js"></script>
<script>
Coder.addBasicNav();
</script>
<!-- End Coder Includes -->
<!-- This app's includes -->
<link href="{{&static_url}}/css/index.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="{{&static_url}}/js/index.js"></script>
<!-- End apps includes -->
</head>
<body class="">
<!-- <div class="pagecontent">-->
<h1>Roller Shade Deflection</h1>
<hr/>
<!--</div>-->
<div class="fabtubspecs">
<form id="fabtubinput">
<p><strong>Fabric and Tube Specifications</strong></p>
<p><label>Fabric Weight (oz/sq.yrd) </label><input type="text" name="fabricweight"></p>
<p><label>Fabric Thickness (inches) </label><input type="text" name="fabricthickness"></p>
<p><label>Hembar Weight (oz/ft) </label><input type="text" name="hembarweight"></p>
<p><label>Tube Diameter (inches) </label><input type="text" name="tubdiameter"></p>
<p><label>Tube Wall Thickness (inches) </label><input type="text" name="tubewall"></p>
<p><label>Tube Material </label><input type="text" name="tubematerial"></p>
</form>
</div>
<hr/>
</body>
</html>
CSS
.fabtubspecs {
padding: 25px;
}
h1 {
font-weight:bold;
padding: 25px;
}
#fabtubinput p { padding:5px 0; }
#fabtubinput p label { float:left; width:250px; }
#fabtubinput p input { floaT:left; padding:2px; }