JSFiddle - React, Tailwind, and code Playground

by Rafael Hovhannisyan

HTML

<div class="formOutline">
  <div class="heading">
    <img src="http://www.sololearn.com/uploads/logo-icon.png" alt="" />
    <h1>Registration</h1>
  </div>
  <form action="/" id="registrationForm">
    <div class="accountType">
        <input type="radio" value="None" id="firstButton" name="account" checked/>
        <label for="firstButton" class="radio">Personal</label>
        <input type="radio" value="None" id="secondButton" name="account" />
        <label for="secondButton" class="radio">Company</label>
    </div>
    <dl class="formInputs">
      <dt>
        <label class="formLabel" for="email">Email</label>
      </dt>
      <dd>
        <input type="text" name="email" id="email" placeholder="Email" required/>
      </dd>
      <dt>
        <label class="formLabel" for="name">Name</label>
      </dt>
      <dd>
        <input type="text" name="name" id="name" placeholder="Name" required/>
      </dd>
      <dt>
        <label class="formLabel" for="password">Password</label>
      </dt>
      <dd>
        <input type="password" name="password" id="password" placeholder="Password" required/>
      </dd>
    </dl>
    <div class="gender">
        <input type="radio" value="None" id="male" name="gender" checked/>
        <label for="male" class="radio">Male</label>
        <input type="radio" value="None" id="female" name="gender" />
        <label for="female" class="radio">Female</label>
     </div> 
     <a href="#" class="button">Register</a>
  </form>

CSS

* { 
  padding: 0;
  margin: 0;
}

img {
  border: 0;
}

ol, ul, li {
  list-style:none;
}

:focus {
  outline: none;
}

body,
input,
textarea,
select {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  color: #4c4c4c;
}

.formOutline {
  margin: 20px auto;
  width: 345px; 
  height: 465px; 
  border: solid 1px #cbc9c9;
  background-color: #fff;
  padding: 20px;
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px; 
  border-radius: 5px;
  -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); 
  -moz-box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24); 
  box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
  text-align: center;
}

.heading {
  display: inline-table;
}

h1 {
  font-size: 32px;
  font-weight: 300;
  color: #4c4c4c;
  text-align: center;
  padding: 0 0 0 15px;
  display: table-cell;
  vertical-align: middle;
}

.heading img {
  width: 60px;
  display: table-cell;
}

.accountType{
  margin-top: 15px;
}

input[type=radio] {
  visibility: hidden;
}

label.radio {
  cursor: pointer;
  text-indent: 35px;
  overflow: visible;
  display: inline-block;
  position: relative;
  margin-bottom: 15px;
  font-weight: bold;
}

label.radio:before {
  background: #1abc9c;
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border-radius: 100%;
}

label.radio:after {
  opacity: 0;
  content: '';
  position: absolute;
  width: 0.5em;
  height: 0.25em;
  background: transparent;
  top: 4.5px;
  left: 4.5px;
  border: 3px solid #fff;
  border-top: none;
  border-right: none;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

input[type=radio]:checked + label:after {
  opacity: 1;
}

.formInputs {
  margin-top: 10px;
}

.formInputs input {
  width: 250px; 
  height: 40px;
  -webkit-border-radius: 4px; 
  -moz-border-radius: 4px; 
  border-radius: 4px; 
 ...