<a href="https://toster.ru/q/672702" target="_blank">(тостер-ответ)</a>

<h1 class="pricing-table-title">Тарифные планы</h1>
    <div class="pricing-table">
      <h3 class="pricing-title">мониторинг</h3>
      <div class="price">₽<sup>/ до <br></br></sup></div>
      <!-- Список возможностей/свойств -->
      <ul class="table-list">
        <li><span>Цены </span></li>
        <li><span>Свойства </span></li>
        <li><span>Клас</span></li>
      </ul>
      <!-- Прокат/Купить -->
      <div class="table-buy">
        <p><sup></sup></p>
        <p><a href="#" class="pricing-action">Купить</a></p>
      </div>
    </div>

    <div class="pricing-table recommended">
      <h3 class="pricing-title">Про</h3>
      <div class="price">₽<sup>/ до</sup></div>
      <!-- Список возможностей/свойств -->
      <ul class="table-list">
        <li><span>Цены</span></li>
        <li><span>Свойства</span></li>
        <li><span>Детали</span></li>
      </ul>
      <!-- Прокат/Купить -->
      <div class="table-buy">
        <p><sup></sup></p>
        <p><a href="#" class="pricing-action">Купить</a></p>
      </div>
     </div>
    <div class="pricing-table">
      <h3 class="pricing-title">Проф</h3>
      <div class="price"><sup>/ дов</sup></div>
      <!-- Список возможностей/свойств -->
      <ul class="table-list">
        <li><span>Цены</span></li>
        <li><span>Свойства </span></li>
        <li><span>Детали</span></li>
        <li><span>Отчёт </span></li>
      </ul>
       <!-- Прокат/Купить -->
       
      <div class="table-buy">
        <p><sup></sup></p>
        <p><a href="#" class="pricing-action">Купить</a></p>
      </div>
     </div>
     <div class="pricing-table recommended">
       <h3 class="pricing-title">Бизнес-мониторинг</h3>
       <div class="price">₽<sup>/ до</sup></div>
       <!-- Список возможностей/свойств -->
       <ul class="table-list">
        <li><span>Цены</span></li>
        <li><span>Свойства</span></li>
         <li><span>Детализированная в</span></li>
         <li><span>Отчет</span></li>
         <li><span>Анализ </span></li>
         <li><span>Сравнение </span></li>
         <li><span>План ы</span></li>
       </ul>
       <!-- Прокат/Купить -->
       <div class="table-buy">
         <p><sup></sup></p>
         <p><a href="#" class="pricing-action">Купить</a></p>
       </div>
     </div>
   </div>

.pricing-table-title {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 2.6em;
    color: #000000;
    margin-top: 15px;
    text-align: center;
    margin-bottom: 50px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.pricing-table-title a {
    font-size: 0.6em;
}

.clearfix:after {
    content: '';
    display: block;
    height: 0;
    width: 0;
    clear: both;
}

/** ========================
 * Контейнер
 ============================*/

.pricing-wrapper {
    width: 1290px;
    margin: 40px auto 0;
    transform: translateY(8%);
}

.pricing-table {
    margin: 10px;
    text-align: center;
    width: 300px;
    float: left;
    -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    -webkit-transition: all 0.25s ease;
    -o-transition: all 0.25s ease;
    transition: all 0.25s ease;
}

.pricing-table:hover {
    -webkit-transform: scale(1.06);
    -ms-transform: scale(1.06);
    -o-transform: scale(1.06);
    transform: scale(1.06);
}

.pricing-title {
    color: #FFF;
    background: #866; /* фон шапки первичный*/
    padding: 20px 0;
    font-size: 2em;
    text-transform: uppercase;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.pricing-table.recommended .pricing-title {
    background: #688; /* фон шапки вторичный*/
}
/* Кнопка, фон кнопки */
.pricing-table.recommended .pricing-action {
    padding: 5px; border-radius: 6px; 
    background: linear-gradient(#acc, #699); 
}

.pricing-table .price {
    font-size: 3em;
    font-weight: 3500;
    padding: 20px 0;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    background: #806e4d; /* фон знака рубля */ 
}

.pricing-table .price sup {
    font-size: 0.4em;
    position: relative;
    left: 5px;
}