JSFiddle - React, Tailwind, and code Playground
HTML
<input type="checkbox" id="CCMethod">
<label class=" inline" for="CCMethod">Credit Card</label>
<div id="CCPay" class="CCPay">
<div class="field">
<label for="NameOnCard" title="Name on Card">Name on Card<span>*</span></label>
<input type="text" id="NameOnCard" name="NameOnCard" class="required"/>
</div>
<div class="field">
<label for="CreditCardType" title="Card Type">Card Type<span>*</span></label>
<select name="CreditCardType" class="required">
<option value=""> - Select - </option>
<option value="">123</option>
</select>
</div>
<div class="field">
<label for="CardNumber" title="Card Number">Card Number<span>*</span></label>
<input type="text" id="CardNumber" name="CardNumber" class="required numeric" autocomplete="off" maxlength="16"/>
</div>
<div class="field">
<label for="CardExpMonth" title="Expiration Month">Expiration Date <span>*</span></label>
<select name="CardExpMonth" class="required">
<option value="" selected> - Month - </option>
<option value="1">1 January</option>
<option value="2">2 February</option>
<option value="3">3 March</option>
<option value="4">4 April</option>
<option value="5">5 May</option>
<option value="6">6 June</option>
<option value="7">7 July</option>
<option value="8">8 August</option>
<option value="9">9 September</option>
<option value="10">10 October</option>
<option value="11">11 November</option>
<option value="12">12 December</option>
</select>
</div>
<div class="field">
<select id="CardExpYear" name="CardExpYear" class="required">
<option value="" selected> - Year - </option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="2016">2016</option>
<option value="2017">2017</option>
<option...
CSS
.CCPay {
display:none
}
#CCMethod:checked ~ .CCPay {
display:block
}