JSFiddle - React, Tailwind, and code Playground

by Ajith S Punalur

HTML

<div id="profileContainer">
    <header>
      <nav class="navbar navbar-inverse" style="">
  <div class="navContainer">
    <div id="navbar">
        <div id="leftNavSection">
        </div>
        <div id="rightNavSection">
		Logged in as Dave A 
		
		<a rel="nofollow" data-method="delete" href="/logout">Log Out</a>
	</div>
    </div>
  </div>
</nav>


    </header>
    <main role="main">

<!-- User's profile --> 
<div id="profile" class="row">
    <h2>Profile Information</h2>
    <form class="edit_user" id="edit_user_38" action="/users/38" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="_method" value="patch" /><input type="hidden" name="authenticity_token" value="wh3mbAtBBAMrOqPUdqGMY5aHns3EZ/tVQDRHhcA1A2ZqXKgDE+VKG7Gj/NyjySKngvorjjq8rVMc/n8LOE4Pgg==" />

      <div class="profileField">
      	<label for="user_first_name">First name</label><br/>
      	<div class="field"><input size="20" class="textField" type="text" value="Dave" name="user[first_name]" id="user_first_name" /></div>
      </div>

      <div class="profileField">
      	<label for="user_last_name">Last name</label><br/>
      	<div class="field"><input size="20" class="textField" type="text" value="A" name="user[last_name]" id="user_last_name" /></div>
      </div>

      <div class="profileField">
      	Birthday<br/> 
      	<select id="user_dob_2i" name="user[dob(2i)]">
<option value="">Select Month</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
<select id="user_dob_3i" name="user[dob(3i)]">
<option value="">Select Day</option>
<option...

CSS

@import url("http://fonts.googleapis.com/css?family=Lato");

body {
  background-color:grey;
}

/* line 11, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
#profileContainer {
  border-radius: 25px;
  background: #ffffff;
  padding: 10px;
  width: 100%;
  max-width: 760px;
  display: inline-block;
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  max-height: 85%;
  overflow: auto;
}

/* line 25, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.profileField {
  padding: 10px;
  font-family: 'Oxygen', sans-serif;
  font-weight: 300;
  font-size: 20px;
}

/* line 32, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.field {
  border: 1px solid rgba(74, 74, 76, 0.5) !important;
  display: inline-block;
  vertical-align: top;
}

/* line 38, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
input {
  font-size: 16px;
  line-height: 18px;
  box-sizing: border-box;
  font-family: inherit;
  padding: 0.4rem 0;
  text-indent: 0.8rem;
  border: none;
  outline: none;
  margin: 0;
  background-color: transparent;
}

/* line 51, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.address {
  display: inline-block;
}

/* line 55, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.selectMenu {
  font-family: 'Oxygen', sans-serif;
  font-size: 20px;
  height: 50px;
  -webkit-appearance: menulist-button;
}

/* line 62, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select-hidden {
  display: none;
  visibility: hidden;
  padding-right: 10px;
}

/* line 68, /Users/davea/Documents/workspace/runtrax/app/assets/stylesheets/profile.css.scss */
.select {
  cursor: pointer;
  display: inline-block;
  position: relative;
  font-size: 16px;
  color: #fff;
  width: 220px;
 ...