JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<div class="b-main_services">
        
        	<span>Наши сервисы</span>
            
            	<div class="s-servicess">
                        <div class="s-website_img col-l">
                            <img src="http://m.megagroup.ge/i/images/website.png" alt="website production" class="fadeInLeft" />
                        </div>    
                        <div class="s-content">
                            <h2>Заголовок 1</h2>
                            <p>Какой-то текст 1
                            </p>
                            <a href="/ge/services/site-production/">Подробнее <div class="icon icon-arrow-right-dark"></div></a>
                        </div>   
                </div>
            	<div class="s-services">  
                        <div class="s-website_img col-r">
                            <img src="http://m.megagroup.ge/i/images/seo.png" alt="website production" class="fadeInRight" />
                        </div>                  
                        <div class="s-content">
                            <h3 class="s-content_title">Заголовок 2</h3>
                            <p>Какой-то текст 2 
                            </p>
                            <a href="#">Подробнее <div class="icon icon-arrow-right-dark"></div></a>
                        </div>                           
                </div>
            	<div class="s-services">
                        <div class="s-website_img col-l">
                            <img src="http://m.megagroup.ge/i/images/ad.png" alt="website production" class="fadeInLeft" />
                        </div>    
                        <div class="s-content">
                            <h4 class="s-content_title">Заголовок 3</h4>
                            <p>Какой-то текст 3
                            </p>
                            <a href="#">Подробнее <div class="icon icon-arrow-right-dark"></div></a>
                        </div>   
                </div>             ...

CSS

/*FONTS*/
@font-face {
    font-family:'Ubuntu';
    src:url("../fonts/ubuntu_r.ttf");
    -webkit-font-smoothing: antialiased !important;
}
@font-face {
    font-family:'Prime';
    src:url("../fonts/mega_prime.otf");
    -webkit-font-smoothing: antialiased !important;
}
/*END FONTS*//*FONTS*/
@font-face {
    font-family:'Ubuntu';
    src:url("../fonts/ubuntu_r.ttf");
    -webkit-font-smoothing: antialiased !important;
}
@font-face {
    font-family:'Prime';
    src:url("../fonts/mega_prime.otf");
    -webkit-font-smoothing: antialiased !important;
}
/*END FONTS*/

/******************************** Mega Group ***************************************/
* {
    margin: 0px;
    padding: 0px;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	outline:none;
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
 	
}
.page-wrapper {
    min-height: 100%;
    margin-bottom: -500px;
}
* html .page-wrapper {
    height: 100%;
}
.page-buffer {
    height: 15px;
	width:100%;
	float:left;
	margin-top:10px;
}
html{
	overflow-y:scroll;
}
img{
	border:none; 
	max-width:100%;
}
body{
	background:#fff; 
	font:13px/1.3 "MegaGroup";
}
h1, h2, h3, h4, h5, h6{
	font-weight:normal; 
	color:#3a3e3f;
}



/*===========Main page===========*/

.b-main_services{
	overflow:hidden;
	margin-bottom:50px;
}
.b-main_services span{
	color:#333;
	font:bolder 50px/70px 'MegaGroup Bolder';
	text-align:center;
	width:100%;
	margin-top:30px;
	float:left;
}
.s-service{
	overflow:hidden;
	float:left;
	margin-top:60px;
}
.s-website_img{
	width:50%;
	text-align:center;
}
.s-content{
	width:50%;
	margin-top:30px;
	float:left;
}
.s-content h2{
	font-size:25px;
	font-weight:bold;
	margin-bottom:25px;
	color:#565f65;	
}
.s-content_title{
	font-size:25px;
	font-weight:bold;
	margin-bottom:25px;
	color:#565f65;	
}
.s-content p{
	font-size:20px;
	line-height:25px;
	color:#565f65;
	margin-bottom:20px;
}
.s-content a{
	text-decoration:underline;
	font-size: 20px;
	color: #384047;
	font-weight: bold;
	height:...