JSFiddle - React, Tailwind, and code Playground
by Ben Clayton
HTML
<div class="infx-table-row marketing-block full">
<div class="infx-table-data form_label fnormal"> <b>Have you a website?</b> </div>
<div class="infx-table-data form_input fnormal" id="F_client.newsletter_div">
<div class="infx-inline-data form_checkbox idx0"><input title="Have you a website? 1" class="radio tooltip" type="radio" name="F_client.newsletter" value="1">
<div class="radio-text">Yes</div>
</div>
<div class="infx-inline-data form_checkbox idx1">
<input title="Have you a website? 0" class="radio tooltip" type="radio" name="F_client.newsletter" value="0">
<div class="radio-text">No</div>
</div>
</div>
</div>
<div class="infx-table-row input-block full">
<div class="infx-table-data form_label ">Website</div>
<div class="infx-table-data form_input"><input title="Website" class="textbox tooltip " placeholder="Website" type="text" name="F_client.website" id="F_client.website" data-script="" data-handlebars-template=""></div>
</div>
CSS
input[type=checkbox] {
display: none;
}
/* ~ selector is element following element */
input[type=checkbox]:checked~.remove-check {
display: none;
}
input[type=checkbox]:checked~#email {
display: block;
}
#email {
display: none;
}
/* ------ Just styles ------ */
input[type=text] {
width: 225px;
padding: 12px 14px;
}
body {
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-weight: normal;
font-style: normal;
font-size: 14px;
line-height: 1;
color: #222222;
}
.btn {
width: auto;
background: #2ba6cb;
border: 1px solid #1e728c;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
color: white;
cursor: pointer;
display: inline-block;
font-family: inherit;
font-size: 14px;
font-weight: bold;
line-height: 1;
margin: 0;
padding: 10px 20px 11px;
position: relative;
text-align: center;
text-decoration: none;
-webkit-transition: background-color 0.15s ease-in-out;
-moz-transition: background-color 0.15s ease-in-out;
-o-transition: background-color 0.15s ease-in-out;
transition: background-color 0.15s ease-in-out;
}