JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div class="main-content">

        <form class="form-register" method="post" action="#">

            <div class="form-register-with-email">

                <div class="form-white-background">

                    <div class="form-title-row">
                        <h1>Create an account</h1>
                    </div>

                    <div class="form-row">
						<label>
							<span>Register As</span>
							<select name="dropdown" id="dropdown">
								<option >Select One</option>
								<option >User</option>
								<option value= "designer">Designer</option>
							</select>
						</label>
					</div>
					
					<div class="form-row">
						<label><span>Gender</span></label>
						<div class="form-radio-buttons">

							<div>
								<label>
									<input type="radio" name="radio">
									<span>Male</span>
								</label>
							</div>

							<div>
								<label>
									<input type="radio" name="radio">
									<span>Female</span>
								</label>
							</div>

						</div>
					</div>
					
                    <div class="form-row">
                        <label>
                            <span>First Name</span>
                            <input type="text" name="firstname">
                        </label>
                    </div>
					
                    <div class="form-row">
                        <label>
                            <span>Last Name</span>
                            <input type="text" name="lastname">
                        </label>
                    </div>

					<div class="form-row" id="design1">
                        <label>
                            <span>Designer 1</span>
                            <input type="text" name="name">
                        </label>
                    </div>
					
					<div class="form-row" id="design2">
                        <label>
                           ...

CSS

html{
    background-color: #f3f3f3;
}

.form-register{
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;

    font: bold 14px sans-serif;
	text-align: center;
}

.form-register-with-email{
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: 130px;
    text-align: center;
}

.form-register-with-email.designer:after {
  display: none;
}

.form-register-with-email.designer:after {
  display: none;
}

.form-register-with-email .form-white-background{
    width: 570px;
    box-sizing: border-box;
    background-color: #ffffff;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    padding: 60px 80px;
    margin-bottom: 35px;
}

.form-register-with-email .form-row{
    text-align: left;
    margin-bottom: 23px;
}

.form-register-with-email .form-title-row{
    text-align: center;
    margin-bottom: 50px;
}

.form-register-with-email h1{
    display: inline-block;
    box-sizing: border-box;
    color:  #4c565e;
    font-size: 24px;
    padding: 0 20px 15px;
    border-bottom: 2px solid #6caee0;
    margin: 0;
}

.form-register-with-email .form-row > label span{
    display: inline-block;
    box-sizing: border-box;
    color:  #5f5f5f;
    width: 125px;
    text-align: right;
    padding-right: 25px;
}

.form-register-with-email input{
    color:  #5f5f5f;
    box-sizing: border-box;
    width: 230px;
    box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.08);
    padding: 12px 18px;
    border: 1px solid #dbdbdb;
}

.form-register-with-email .form-checkbox input{
    margin-left: 128px;
    margin-right: 10px;
    width: auto;
    vertical-align: top;
}

.form-register-with-email .form-row .form-checkbox span{
    font-size: 12px;
    font-weight: normal;
    display: inline-block;
    text-align: left;
    width: 220px;
    margin: 0;
}

.form-register-with-email .form-checkbox span a{
    text-decoration: none;
    color:  #6caee0;
}

/* Radio */

.form-register-with-email input[type=radio]{
    box-shadow: none;
    width:...

JavaScript

$(document).ready(function() {

	$("#design1").hide();

	$("#design2").hide();

	$(".form-sign-in-with-social").show();

	$("#dropdown").change(function() {

		if ( $("#dropdown").val() == "designer"){

			$("#design1").show();

			$("#design2").show();

			$(".form-sign-in-with-social").hide();
      $(".form-register-with-email").addClass('designer');
		}

		else{

			$("#design1").hide();

			$("#design2").hide();

			$(".form-sign-in-with-social").show();
      $(".form-register-with-email").addClass('designer');

		}

	});

	if ( $("#dropdown").val() == "designer"){

		$("#design1").show();

		$("#design2").show();

		$(".form-sign-in-with-social").hide();

	}

	$("#design1").change(function() {

	var val = $("#design1").val();

	$("#design2").append(val + "\n");

	});

});