JSFiddle - React, Tailwind, and code Playground

by Joe Cisneros

HTML

<link rel="shortcut icon" href="/Forms/img/favicon.ico">
		
		<link href="/Forms/styles/stylecss?v=ep7m_rjlr8r4z9mqOY6SvdEePHXpNPrJheP3ydgySg81" rel="stylesheet"/>

		<link href="/Forms/Content/themes/base/datepickercss?v=rIfshJh2kgeg-z_zfb7zVQ6MReCcZduzoUJiazUite41" rel="stylesheet"/>

		
		
<link href="/Forms/styles/bootstrapSCR119358?v=VzLLjjNZbKYRIGaMsMaTM-0yWVBhElgY36luxmYivRU1" rel="stylesheet"/>
		<link href="/Forms/styles/commonappcssSCR119358?v=6W-x6OtgamWrCSh7ZtvS5sEgx5BgOqQulE6DfTN60L81" rel="stylesheet"/>


		

		<link href="/Forms/styles/formcss?v=wBYXz_WUqCmnTCVic926xz1BVZxKIZ3C_-hQF8tRqug1" rel="stylesheet"/>

		<link href="/Forms/styles/printformcss?v=" rel="stylesheet"/>

		
		<link href="/Forms/styles/tooltip?v=" rel="stylesheet"/>

		<link rel="stylesheet" href= "/Forms/lib/font-awesome/4.0.3/css/font-awesome.min.css" type="text/css"/>


		
<style type="text/css">
	.cf-formwrap { margin: 50px auto 30px; max-width: 800px; }
</style>

	
		
		<style type="text/css">
			#banner { float: right; width: 120px; }
			label.error { color: red; font-style: italic; font-size:10px; font-weight:bold; padding-left: 30px;}
			input.error { border-color: red; }
      

			
		</style>

<li attr="" attrtype="radio" name="q28" id="q28" class="form-q label-left">
  <label class="cf-label">Radio Button</label>
  <div class="cf-field cf-col1">
    <div><span class="choice"><input name="Field28" id="Field28-0" type="radio" readonly="True" value="choice 1" disabled="True" vo="e"><label class="form-option-label" for="Field28-0">choice 1</label></span><span class="choice"><input name="Field28" id="Field28-1" type="radio" readonly="True" value="choice 2" disabled="True" vo="e"><label class="form-option-label" for="Field28-1">choice 2</label></span>
      <span class="choice">
        <input name="Field28" id="Field28-2" type="radio" readonly="True" value="choice 3" disabled="True" vo="e">
        <label class="form-option-label" for="Field28-2">choice 3</label>
       ...

CSS

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{margin:.67em 0;font-size:2em}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}hr{height:0;-moz-box-sizing:content-box;box-sizing:content-box}mark{color:#000;background:#ff0}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre-wrap}q{quotes:"“" "”" "‘" "’"}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{padding:.35em .625em .75em;margin:0 2px;border:1px solid silver}legend{padding:0;border:0}button,input,select,textarea{margin:0;font-family:inherit;font-size:100%}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{padding:0;box-sizing:border-box}input[type="search"]{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;-webkit-appearance:textfield}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}@media print{*{color:#000!important;text-shadow:none!important;background:transparent!important;box-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" ("...