JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	
		<div id="header">
    	
    	</div>
    			
    	<div id="main"> 
   		<div id="container">

      <form action="index.html" method="post">
      
        <p id="form_title" style='color:#808080'>Create an Account</p>
       
        <fieldset>
          <legend style="color:#585858">Get started with Your Profile</legend>
          <label for="name" style='color:#808080;font-size:14px'>CUSTOM NAME</label>
          <input type="text" id="name" name="user_name" style="color:#404040">
          
          
          <label for="type" style='color:#808080;font-size:14px'>TYPE</label>
          <select id="sel-type" name="type">
          
            <option value="frontend_developer">Front-End Developer</option>
            <option value="php_developor">PHP Developer</option>
            <option value="python_developer">Python Developer</option>
            <option value="rails_developer"> Rails Developer</option>
            <option value="web_designer">Web Designer</option>
            <option value="WordPress_developer">WordPress Developer</option>
       
          
        </select>
        <label for="type" style='color:#808080;font-size:14px'>REGION</label>
        <select id="sel-region" name="region">
          
            <option value="frontend_developer">Front-End Developer</option>
            <option value="php_developor">PHP Developer</option>
            <option value="python_developer">Python Developer</option>
            <option value="rails_developer"> Rails Developer</option>
            <option value="web_designer">Web Designer</option>
            <option value="WordPress_developer">WordPress Developer</option>
       
          
        </select>
        
          
        </fieldset>
        <button type="submit">Create Profile</button>
      </form>
      

    		
		</div>
		
	</div>

	<div id="footer">
		<a href="About">About</a>
		<a href="info.com">Instructions</a>
   
    
    
    <a href="tt.com">Encountered an...

CSS

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'Lato';
  background-color: #E8E8E8;
  
}

#header {
    width:100%;
    background-color: #27272D;
    height: 50px ;
    
    border:1px solid;
    position:relative;
 

#main{
    border:1px solid;
    
    width:100%;
    height:100%;


    
}

    

}
#container{
    
    margin-top: 100px;
    
   
    
   
    border:1px;
    


}

form {
  max-width: 300px;
  margin: 10px auto;
  padding: 10px 20px;
  
  border-radius: 3px;
  background-color: white;

  border:1px;
}

#form_title {
  margin: 10px 0 30px 15px;
  font-size:20px;
  
  
}

input[type="text"],

select {
  background: rgba(255,255,255,0.1);

  border
  border: none;
  font-size: 16px;
  height: auto;
  margin: 0;
  outline: 0;
  padding: 15px;
  width: 100%;
  background-color: #e8eeef;
  color: #8a97a0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
  margin-bottom: 20px;
}

input[type="text"]{
    border-radius: 6px;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
height:44px;
font-size: 14px;

}


select {
  padding: 6px;
  height: 44px;
  border-radius: 2px;
}

button {
  
  color: #FFF;
  background-color: #13ABAF;
  font-size: 14px;
  text-align: center;
  font-style: normal;

  border-radius: 5px;
  width: 96%;
  height:44px;
  border: 1px solid;
  border-width: 1px 1px 3px;
  
  margin-bottom: 10px;
  margin-left: 10px;
}

fieldset {
  
  border: none;
}

legend {
  font-size: 17px;
  margin-bottom: 24px;
}

label {
  display: block;
  margin-bottom: 8px;

}

label.light {
  font-weight: 300;
  display: inline;
}



#horizontal-line{ 

    display: block;
    margin-top:100px;
    margin-bottom: 60px;
    width:96%;
    margin-left: auto;
    margin-right: auto;
    border-style: inset;
    border-width: 1px;
    border-color: #F0F0F0;
   

} 

#footer {
   

position : absolute;
    bottom : 0;
    height:60px;
   
   ...