JSFiddle - React, Tailwind, and code Playground

by aklintsevich

HTML

<section class="full" id="third">
     	
            <div id="contact">
                <form action="#" method="post" id="form">
                    <div class="email_info top white_border icomoon">
                        <div id="name_font" class="icon center_text">
                        
                        </div>
                        
                        <div>
                        	<input type="text" name="firstname">
                        </div>
                    
                    </div>
                    <div class="email_info bottom white_border icomoon">
                        <div id="email_font" class="icon center_text">
                        
                        </div>
                        
                        <div >
                        	<input type="text" name="firstname">
                        </div>
                    
                    </div>
                    <div class="message white_border">
                        <div id="message_icon" class="icomoon center_text">
                        </div>
                    
                    </div>
                </form>
            </div>
            
      
    </section>

CSS

.full{
	height:100vh;
}
#third{
	background-color:#22AFA0;
	
}
#contact{
	width:65%;
	height:30%;
	background-color:red;

	margin:0px auto 30px auto;
	position:relative;
	top:30%;
	
}

.email_info{
	height:40%;
	width:45%;
	position:absolute;
	background-color:green;
}

.message{
	position:absolute;
	right:0px;
	height:100%;
	width:45%;
	background-color:green;
}

#message_icon{
	height:40%;
	width:20%;
	background-color:blue;
	border-right:1px solid white;
	border-bottom:1px solid white;
}

#message_icon:before{
	color:white;
	display:block;
	width:100%;
	height:100%;
	text-align:center;
	line-height:80px;
	font-size:2.5em;
	content:"\e610";
}

.text_position{
	
	float:right;
	position:absolute;
	
}


.top{
	
top:0px;	
	
}


.bottom{
	bottom:0px;
	
}


#form_button{
	
	
	position:relative;
	width:65%;
	height:20%;
	/*background-color:orange;*/
}

.icon{
	width:20%;
	height:100%;
	background-color:blue;
	border-right:1px solid white;
	
}
.icomoon{
	 font-family: 'icomoon';
 	 speak: none;
 	 font-style: normal;
 	 font-weight: normal;
 	 -webkit-font-smoothing: antialiased;
}
.white_border{
	
	border:2px solid white;
	
}
.center_text{
	
	text-align:center;
	
}
#name_font:before{
	font-size:2.5em;
	display:block;
	width:100%;
	height:100%;
	line-height:80px;
	color:white;
	content:"\e611";
	
}

#email_font:before{
	font-size:2.5em;
	display:block;
	width:100%;
	height:100%;
	line-height:80px;
	color:white;
	content:"\e60f";
	
}