JSFiddle - React, Tailwind, and code Playground

by Matthew NA

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<script type="text/javascript"> 
    function displayForm(c) {
        if (c.value == "1") {

            document.getElementById("ccformContainer").style.visibility = 'visible';
            document.getElementById("paypalformContainer").style.visibility = 'hidden';
        } else if (c.value == "2") {
            document.getElementById("ccformContainer").style.visibility = 'hidden';

            document.getElementById("paypalformContainer").style.visibility = 'visible';
        } else {}
    }
</script>


    <form>
        <input value="1" type="radio" name="formselector" onClick="displayForm(this)"></input>show form 1
        <br>
        <input value="2" type="radio" name="formselector" onClick="displayForm(this)"></input>show form 2</form>
    <div style="visibility:hidden; position:relative" id="ccformContainer">
        <form id="ccform" class="needs-validation container" >
        
        <hr>
              <p>THIS IS FORM 1</p>
              <hr>
              <div class="form-row">
                <div class="col-md-4 mb-3">
                  <label for="validationCustom01">form1 box 1</label>
                  <input type="text" class="form-control" id="validationCustom01" placeholder="form1 box 1" required>
                  <div class="valid-feedback">
                    Looks good!
                  </div>
                </div>
                <div class="col-md-4 mb-3">
                  <label for="validationCustom02">form1 box...

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}