JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div class="container">
<div class="col-md-6 col-md-offset-3" id="sign-up">
<!-- Logo and Sign Up Text -->
<div class="text-center">
<img src="../../Logo/Logo.png" class="mx-auto" height="50" width="50" id="logo" />
<h1>Signing up as</h1>
</div>
<!-- Radio check 1 -->
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="radios" id="radio1" onclick="radioCheck()" checked> Individual
</label>
</div>
<!-- Radio check 2 -->
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="radios" id="radio2" onclick="radioCheck()"> Parent of a child
</label>
</div>
<!-- Individual Form -->
<form id="individual">
<!-- Individual First Name -->
<div class="form-group">
<input class="form-control" type="text" placeholder="First name" />
</div>
<!-- Individual Last Name -->
<div class="form-group">
<input class="form-control" type="text" placeholder="Last name" />
</div>
<!-- Individual Email -->
<div...
CSS
body {
background-image: url(../../Icons/violin.jpeg);
background-size: cover;
background-repeat: no-repeat;
}
#sign-up {
margin-top: 60px;
border-radius:5px;
padding-bottom: 20px;
background: white;
}
.blue-button {
background-color: #00b4ff;
color: #fff;
margin-top: 7%;
margin-bottom: 3%;
width: 100%;
}
#logo {
margin-top: 20px;
}
h1 {
font-size: 1em;
font-weight: normal;
margin-top: 13px;
}
#individual {
display: block;
}
#parent {
display: none;
}
#small {
font-size: 0.8em;
}