JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

<section style="background-color: white;height:300px"></section>
<section id="uslug" class="_mPS2id-t mPS2id-target mPS2id-target-first mPS2id-target-last">
	<!-- услуги... -->
	<div class="container uslug">
		<h2 class="slide-bottom" style="opacity: 1; visibility: visible; position: relative; top: 0px;">Услуги</h2>
		<button class="contuslugb">Больше</button>
		<div class="contuslug contuslugaf">
		    
            
            
            <!-- ================== -->
            <!-- ================== -->
            <!-- ================== -->
            
            
            
            <div class="uslugblocks">
                <div class="uslugblocks_c uslugblocks_c_a">
                    <div class="uslugblocks_a">
                        <span class="uslugblocks_a_o">BTL & Promotion</span>
                        <span class="uslugblocks_a_t">Привлечение внимания покупателей к товару</span>
                    </div>
                    <ul class="uslugblocks_b">
                        <li>Разработка программ лояльности для потребителей</li>
                        <li>Организация BTL  и ПРОМО активностей</li>
                        <li>Проведение семлингов, дегустаций, тестирований</li>
                        <li>Дизайн и производство рекламных и информационных материалов, призов</li>
                        <li>3D-моделирование и визуализация торгового пространства</li>
                    </ul>
                </div>
                <!-- \\\\\\\\ -->
                <div class="uslugblocks_c uslugblocks_c_b">
                    <div class="uslugblocks_a">
                        <span class="uslugblocks_a_o">Sales Incentive</span>
                        <span class="uslugblocks_a_t">Мотивация канала продаж</span>
                    </div>
                    <ul class="uslugblocks_b">
                        <li>Внедрение комплексных программ мотивации для покупателей и продавцов одновременно</li>
                        <li>Разработка и...

CSS

*{margin:0;padding:0;}
section#uslug{background: url(http://osco-design.com/images_oscodesign/fon_content.png) center top #253342;}
.uslug {
    text-align: center;
}
.container {
    padding: 50px 0 70px 0;
    height: 100%;
}
.menucontainer, .container {
    height: 100%;
    margin: 0 10%;
}
section#uslug > div > h2, section#vacan > div > h2, section#contact > div > h2 {
    color: white;
}
section > div > h2 {
    text-align: center;
    margin-bottom: 50px;
    font-family: 'OpenSansBold', sans-serif;
    font-size: 2.1em;
    cursor: default;
}
h2 {
    font-size: 24px;
    line-height: 30px;
}
.uslug button {
    border: 2px solid #ddd;
    background: none;
    padding: 9px 20px;
    font-size: 1.2em;
    color: #ddd;
    margin-bottom: 28px;
    border-radius: 4px;
}



@import url(http://fonts.googleapis.com/css?family=Poiret+One&subset=latin,cyrillic);
@import url(http://fonts.googleapis.com/css?family=Comfortaa&subset=latin,cyrillic);
@import url(http://fonts.googleapis.com/css?family=Kurale&subset=latin,cyrillic);
.uslug .contuslug .uslugblocks{width:100%;display:inline-table;overflow:hidden;}
    .uslug .contuslug .uslugblocks_c{width:24%;display:inline-block;color:#fff;vertical-align:top;margin-right:1%;}
    .uslug .contuslug .uslugblocks_c:last-child{margin-right:0;}
        .uslug .contuslug .uslugblocks_a{text-align:center;margin-bottom:10px;padding:5px 20px;height:77px;border-radius:2px;line-height:17px;position:relative;}
        .uslug .contuslug .uslugblocks_a:after{top:100%;left:50%;border:solid transparent;content:" ";height:0;width:0;border-color:rgba(136,183,213,0);position:absolute;pointer-events:none;border-top-color:#88b7d5;border-width:10px;margin-left:-10px;}
            .uslug .contuslug .uslugblocks_a > span{width:100%;display:block;}
            .uslug .contuslug .uslugblocks_a .uslugblocks_a_o{margin-bottom:10px;font-family: 'Comfortaa', cursive;font-size:1.7em;}
            .uslug .contuslug .uslugblocks_a...