JSFiddle - React, Tailwind, and code Playground

by chrisallenaaker

HTML

<form id="privacy">

  <input type="radio" id="radio1" name="rdo">
  <label for="radio1"></label>  
  <p class="privacy_title">Normal</p>
  <p class="privacy_content">When you add a bookmarks it is posted to the feed.  You have a public page which can be viewed by non-members.</p>
    
    
  <input type="radio" id="radio2" name="rdo">
  <label for="radio2"></label>    
  <p class="privacy_title">Private</p>
  <p class="privacy_content">The bookmarks you add are not posted to the feed.  You do not have a public page.</p>

  <input type="radio" id="radio3" name="rdo">
  <label for="radio3"></label>
  <p class="privacy_title">Secret</p>
  <p class="privacy_content">Same as private and all of your data is encrypted using NSA approved algorithms.</p>    
</form>

<style type="text/css">
    
.privacy_title
{
font-size:14px;
color:#000000;
}
.privacy_content
{
font-size:12px;
color:#222222;
}
input[type="radio"]
{
  display: none;
}

input[type="radio"] + label
{
  background:url('http://refundfx.com.au/uploads/image/checkbox_empty.png');
  padding:0;
  display: inline-block;
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;
  width:20px;
  height:20px;
  vertical-align:middle;
}
input[type="radio"]:checked + label
{
  background:url('http://refundfx.com.au/uploads/image/checkbox_full.png');
}    
    
</style>