JSFiddle - React, Tailwind, and code Playground
Random Form
by Hugo Carneiro
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="form-group">
<div class="col-sm-12 control-label">
<label>Overall, how would you rate this app?</label>
</div>
<div class="col-sm-12 radio">
<input id="rd1" type="radio" name="Overall, how would you rate this app?" class="rtgl rtgl-ios" value="Excellent" required />
<label for="rd1" class="rtgl-btn"></label>
<label for="rd1">Excellent</label>
</div>
<div class="col-sm-12 radio">
<input id="rd2" type="radio" name="Overall, how would you rate this app?" class="rtgl rtgl-ios" value="Very Good" required />
<label for="rd2" class="rtgl-btn"></label>
<label for="rd2">Very Good</label>
</div>
<div class="col-sm-12 radio">
<input id="rd3" type="radio" name="Overall, how would you rate this app?" class="rtgl rtgl-ios" value="Good" required />
<label for="rd3" class="rtgl-btn"></label>
<label for="rd3">Good</label>
</div>
<div class="col-sm-12 radio">
<input id="rd4" type="radio" name="Overall, how would you rate this app?" class="rtgl rtgl-ios" value="Average" required />
<label for="rd4" class="rtgl-btn"></label>
<label for="rd4">Average</label>
</div>
<div class="col-sm-12 radio">
<input id="rd5" type="radio" name="Overall, how would you rate this app?" class="rtgl rtgl-ios" value="Poor" required />
<label for="rd5" class="rtgl-btn"></label>
<label for="rd5">Poor</label>
</div><div class="col-sm-12 radio">
<input id="rd6" type="radio" name="Overall, how would you rate this app?" class="rtgl rtgl-ios" value="Very Poor" required />
<label for="rd6" class="rtgl-btn"></label>
<label for="rd6">Very Poor</label>
</div>
</div>
<div class="form-group clearfix">
<div class="col-sm-12">
<label>How likely would you be to recommend this app to a friend or...