JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans&amp;subset=latin,cyrillic"></script>
<link rel="stylesheet" href="http://cougardesign.ru/templates/cougarnest/css/beez5.css">
<div class="sell_board">
    <p style="width:920px;margin:0 auto;">Студия осуществляет широкий набор услуг в сфере разработки и обслуживания интернет-сайтов. Ниже предствленны наши основные тарифные планы:</p>
</div>
<br />
<div class="sell_board">
        <div class="sell_head"><p>Разработка и создание сайтов</p></div>
    <div class="service_body">
        <div class="service_header"><p>Визитка</p></div>
        <div class="service_content">
            <ul class="">
                <li>CMS Joomla</li>
                <li>Домен в подарок</li>
                <li>1 GB места</li>
                <li>Хостинг на год</li>
                <li>Почта</li>
            </ul>
            <p class="service_price">Цена: 5000 руб.</p>
        </div>
        <a href="" class="go_post"><p>Заказать</p></a>
    </div>
    <div class="service_body standart">
        <div class="service_header"><p>Стандарт</p></div>
        <div class="service_content">
            <ul class="">
                <li>CMS Joomla</li>
                <li>Модули нашей разработки</li>
                <li>Домен в подарок</li>
                <li>2 GB места</li>
                <li>Хостинг на год</li>
                <li>Почта</li>
                <li>Регистрация в каталогах</li>
            </ul>
            <p class="service_price">Цена: 10000 руб.</p>
        </div>
        <a href="" class="go_post"><p>Заказать</p></a>
    </div>
    <div class="service_body full">
        <div class="service_header"><p>Расширенный </p></div>
        <div class="service_content">
            <ul class="">
                <li>CMS на выбор</li>
                <li>Модули нашей разработки</li>
                <li>Домен в подарок</li>
                <li>10 GB места</li>
                <li>Хостинг на год</li>
               ...

CSS

.service_body {
    height:400px;
    width:250px;
   -webkit-box-shadow: 3px 3px 12px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    3px 3px 12px rgba(50, 50, 50, 0.75);
    box-shadow:         3px 3px 12px rgba(50, 50, 50, 0.75);
    background: #f0f0f0;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    margin:20px;
    display:inline-block;
}
.service_body li{
    list-style-image: url(http://cdn1.iconfinder.com/data/icons/prettyoffice9/16/rhombus.png);
    line-height:1.6em;
}
.service_header {
    background: #08a1d8;
    background: -moz-linear-gradient(-45deg, #08a1d8 0%, #258dc8 100%);
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#08a1d8), color-stop(100%,#258dc8));
    background: -webkit-linear-gradient(-45deg, #08a1d8 0%,#258dc8 100%);
    background: -o-linear-gradient(-45deg, #08a1d8 0%,#258dc8 100%);
    background: -ms-linear-gradient(-45deg, #08a1d8 0%,#258dc8 100%);
    background: linear-gradient(135deg, #08a1d8 0%,#258dc8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#08a1d8', endColorstr='#258dc8',GradientType=1 );
    height:50px;
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}
.service_header img {
    margin:5px;
}
.service_header p {
    display: inline-block;
    color: #FFF;
    position: relative;
    bottom: 10px;
    text-transform: uppercase;
    font-family: 'KabelC-Medium';
    font-size: 23px;
    left: 65px;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 2px;
}
.service_content  {
    height:280px;
    margin:10px 0px;
    border-bottom:1px solid rgb(192, 192, 192);
    position:relative;
}
.service_price {
position: absolute;
bottom: -8px;
letter-spacing: 2px;
font-size: 18px;
left: 38px;
}
.go_post {
    background:#187FC4;
...