JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <div id="pricing-table">
            <div class="plan plan1">
                <div class="header_plan">Старт</div>
                <div class="price_plan">1500 грн</div>       
                <ul>
                    <li>Лучшее решение для первого сайта</li>
                    <li>Отличная реклама вашей компании в интернете</li>
                    <li>Самый дешевый из наших пакетов</li>
                    <li>Очень быстрые сроки разработки</li>            
                </ul>
                <a class="signup" href="#">Подробнее</a>         
            </div >
            <div class="plan plan2">
                <div class="header_plan">Обозреватель</div>
                <div class="price_plan">2500 грн</div>  
                <ul>
                    <li>Ведите свой блог или портал о чем угодно</li>
                    <li>Удобная система управления материалами</li>
                    <li>Возможность установки функционального форума</li>
                    <li>Легко зарабатывайте деньги на своем сайте</li>            
                </ul>
                <a class="signup" href="#">Подробнее</a>            
            </div>
            <div class="plan plan3">
                <div class="header_plan">Коммерция</div>
                <div class="price_plan">3000 грн</div>  
                <ul>
                    <li>Создание магазина или каталога товаров</li>
                    <li>Гибкая система управления товарами</li>
                    <li>Различный выбор варианта доставки товара</li>
                    <li>Оплата товара множеством способов</li>    
                </ul>
                <a class="signup" href="#">Подробнее</a> 
            </div>
    </div>
    </div>
<div id="connection">
                <div id="skype">
                <a href="skype:f.a.q.9?add"><img src="img/skype.png" alt="Skype"></img></a>
                <div id="mail">
                <a href="#"><img src="img/mail.png" alt="Написать...

CSS

#pricing-table {margin: 0px auto; text-align: center; width: 800px; }

#pricing-table:before, #pricing-table:after {
        content: "";
        display: table
}

#pricing-table:after {
        clear: both
}
#pricing-table .plan:hover {
        font: 15px 'Trebuchet MS';
        width: 220px;
        
        
}

#pricing-table .plan {
        font: 13px 'Trebuchet Ms';     
        background: #fff;      
        border: 1px solid #ddd;
        color: black;
        padding: 20px;
        width: 200px;
        float: left;
        _display: inline; /* IE6 double margin fix */
        position: relative;
        margin: 0 5px;
        box-shadow: 0 2px 2px -1px rgba(0,0,0,.3);              
}

#pricing-table .plan:after {
        z-index: -1; 
        position: absolute; 
        content: "";
        bottom: 10px;
        right: 4px;
        width: 80%; 
        top: 80%; 
        box-shadow: 0 12px 5px rgba(0, 0, 0, .3);
        transform: rotate(3deg);        
}

#pricing-table .header_plan {
        position: relative;
        font-size: 20px;
        font-weight: normal;
        text-transform: uppercase;
        padding: 20px;
        margin: -20px -20px 20px -20px;
        border-bottom: 8px solid;
        background-color: #eee;
        background-image: linear-gradient(#fff, #eee);
}

#pricing-table .price_plan{
        font-size: 45px;
}

#pricing-table ul {
        margin: 20px 0;
        padding: 0;
        list-style: none;
}

#pricing-table li {
        padding: 10px 0;
}

#pricing-table .signup {
        position: relative;
        padding: 10px 20px;
        color: #fff;
        font: bold 14px Trebuchet MS;
        text-transform: uppercase;
        text-decoration: none;
        display: inline-block;       
        background-color: black;
        border-radius: 3px;     
        text-shadow: 0 -1px 0 rgba(0,0,0,.15);
        opacity: .9;       
}