JSFiddle - React, Tailwind, and code Playground

by yassinezerguine

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/united/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/css/bootstrap-formhelpers.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-formhelpers/2.3.0/js/bootstrap-formhelpers.js"></script>
<body>
  <section>
    <label id="labelplus7_1" data-i18n="labelplus7_1" class="label label-default ">Sign up for Sendit Plus</label>

    <form id="sec7form" action="/app/plus/request" method="post" class="form-group">


      <label for="primary" id="choiceof1yearplus" class="btn btn-primary">
        <input type="checkbox" checked name="check" id="primary" class="badgebox"><span class="badge pull-left"><span class="glyphicon glyphicon-ok"></span></span>
        <br>$119.99
        <br>Year
        <br>Best value: save 17%!.</label>

      <label for="default" id="choiceof1monthplus" class="btn btn-primary">
        <input type="checkbox" id="default" name="check" class="badgebox"><span class="badge pull-left"><span class="glyphicon glyphicon-ok"></span></span>
        <br>$11.99
        <br>monthly
        <br>reccuring billing </label>


      <input type="email" id="inputplus7_1" name="email" class="form-control" placeholder="  Email" data-i18n="[placeholder]senditplusinput1" required="required">
      <span id='message1'></span>
      <input type="password" id="inputplus7_2" class="form-control" name="password" pattern="^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$" title="Password is required and contains at least 1 (uppercase,lowercase,specialcharacters,digit) with 8 characters length"
      placeholder="  Password" data-i18n="[placeholder]senditplusinput2" required="required">
      <input type="password" id="inputplus7_3" class="form-control"...

CSS

.form-group {
  position: relative;
  top: 100px;
  left: 100px;
}

#labelplus7_1 {
  width: auto;
  height: auto;
  position: absolute;
  left: 150px;
  font-size: 35px;
}

.badgebox {
  opacity: 0;
}

.badgebox + .badge {
  /* Move the check mark away when unchecked */
  text-indent: -999999px;
  /* Makes the badge's width stay the same checked and unchecked */
  width: 25px;
}

.badgebox:focus + .badge {
  /* Set something to make the badge looks focused */
  /* This really depends on the application, in my case it was: */
  /* Adding a light border */
  box-shadow: inset 0px 0px 5px;
  /* Taking the difference out of the padding */
}

.badgebox:checked + .badge {
  /* Move the check mark back when checked */
  text-indent: 0;
}

JavaScript

$("input:checkbox").not( "#inputplus7_9" ).on('click', function() {
		  var $box = $(this);
		  if ($box.is(":checked")) {
		    var group = "input:checkbox[name='" + $box.attr("name") + "']";
		    $(group).prop("checked", false);
		    $box.prop("checked", true);
		  } else {
		    $box.prop("checked", true);
		  }
		});