JSFiddle - React, Tailwind, and code Playground

by mstefanko

HTML

<div id="assessment-wrapper">
	<div id="assessment-questions">
		<div class="question-wrapper">
			<div class="question-number-wrapper"><div class="question-number">1</div></div>
			<div class="question-content-wrapper">
				<span class="assessment-question">Did you get new insights from your campaign?</span>
				<label class="question-check-label"><input type="checkbox" id="1_yes" class="assessment-checkbox" />Yes</label>
				<label class="question-check-label"><input type="checkbox" id="1_no" class="assessment-checkbox" />No</label>
			</div>
		</div>

		<div class="question-wrapper">
			<div class="question-number-wrapper"><div class="question-number">2</div></div>
			<div class="question-content-wrapper">
				<span class="assessment-question">Would you use the Service again?</span>
				<label class="question-check-label"><input type="checkbox" id="2_yes" class="assessment-checkbox" />Yes</label>
				<label class="question-check-label"><input type="checkbox" id="2_no" class="assessment-checkbox" />No</label>
			</div>
		</div>

		<div class="question-wrapper">
			<div class="question-number-wrapper"><div class="question-number">3</div></div>
			<div class="question-content-wrapper">
				<span class="assessment-question">Would you recommend the Service to colleagues?</span>
				<label class="question-check-label"><input type="checkbox" id="3_yes" class="assessment-checkbox" />Yes</label>
				<label class="question-check-label"><input type="checkbox" id="3_no" class="assessment-checkbox" />No</label>
			</div>
		</div>

		<div class="question-wrapper">
			<div class="question-number-wrapper"><div class="question-number">4</div></div>
			<div class="question-content-wrapper">
				<span class="assessment-question">What level of impact do you expect from the dieas generated?</span>
				<select id="assessment-question-select">
				  <option value="moderately-high">Moderately High</option>
				</select>
			</div>
		</div>

		<div class="question-wrapper">
			<div...

CSS

#assessment-wrapper {background: #F4F4F4;padding:40px;}
.assessment-question { display:block; font-family:arial; font-weight:bold; font-size:14px; color: #555555;}
.question-wrapper{margin-bottom:20px;}
.question-content-wrapper {margin-left:15px; margin-top:4px;}
.question-check-label { display:block;}
.question-number-wrapper { display:inline-block; vertical-align:top;}
.question-number {
    background: none repeat scroll 0 0 #888888;
    border-radius: 50% 50% 50% 50%;
    color: #FFFFFF;
    font-family: arial;
    font-size: 13px;
    font-weight: bold;
    height: 19px;
    line-height: 13px;
    padding: 7px 1px 0;
    text-align: center;
    width: 25px;
}

.question-content-wrapper { display:inline-block;}

#assessment-slider-wrapper {
    margin-top:25px;
}
#assessment-slider-scale { list-style:none; margin-left:-40px;font-family:arial; font-size:13px;}
#assessment-slider-scale li {display:inline-block;margin-right:55px;}
#assessment-slider {display:block;width:600px;}

#assessment-question-textarea { color: #757676; padding:8px; margin-top:18px;background: #d9dbdd; border: 1px solid #c2c4c6; border-radius: 2px; width: 600px; height:140px;resize: none;}


#assessment-question-select {
    background: none repeat scroll 0 0 #D9DBDD;
    border: 1px solid #C2C4C6;
    padding: 5px;
    width: 600px;
    border-radius: 2px;
    margin-top: 18px;
    color: #555555;
}

.assessment-btn { font-family: arial; font-weight: bold; font-size: 13px; background: #27ae60; text-decoration: none; color:#FFFFFF; padding: 10px 20px; border-radius: 2px;margin:auto auto;margin-left:280px;}
#assessment-footer {margin-top: 40px;}

JavaScript

$( "#assessment-slider" ).slider({
      range: "min",
      value: 4,
      min: 1,
      max: 10,
      step: 1,
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.value );
      }
    });