JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<p style="text-align: center;"><span style="font-family: OpenSans, monospace; font-size: 28pt; color: #ff6600;">ТУРИСТИЧЕСКИЕ ПАКЕТЫ БАЗЫ "НИЛО"</span></p>

<div class="services">

  <div class="service-item" id="layer1">
  <p style="text-align: center;"><span style="font-family: OpenSans, monospace; font-size: 22pt; color: #00ccff;">"ЭКОНОМ"</span></p>


  <hr />
  <p style="text-align: center;"><span style="font-family: OpenSans, monospace; font-size: 20pt; color: #00ccff;">5000 РУБ/СУТКИ</span></p>

  <ul>
    <li><span style="font-family: OpenSans, monospace; font-size: 10pt;">ПРОЖИВАНИЕ</span></li>
    <li><span style="font-family: OpenSans, monospace; font-size: 10pt;">БАНЯ</span></li>
    <li><span style="font-family: OpenSans, monospace; font-size: 10pt;">РЫБАЛКА</span></li>
    <li>...</li>
  </ul>

  <hr />

  </div>
  <div class="service-item" id="layer2">
  <p style="text-align: center;"><span style="font-family: OpenSans, monospace; font-size: 22pt; color: #00ccff;">"СТАНДАРТ"</span></p>


  <hr />
  <p style="text-align: center;"><span style="font-family: OpenSans, monospace; font-size: 20pt; color: #00ccff;">6000 РУБ/СУТКИ</span></p>

  <ul>
    <li><span style="font-family: OpenSans, monospace; font-size: 10pt;">ПРОЖИВАНИЕ</span></li>
    <li><span style="font-family: OpenSans, monospace; font-size: 10pt;">УСЛУГИ ПОВАРА (ГОТОВИМ ИЗ НАШИХ ПРОДУКТОВ)</span></li>
    <li><span style="font-family: OpenSans, monospace; font-size: 10pt;">БАНЯ</span></li>
    <li><span style="font-family: OpenSans, monospace; font-size: 10pt;">РЫБАЛКА</span></li>
  </ul>

  <hr />

  </div>
  <div class="service-item" id="layer3">
  <p style="text-align: center;"><span style="font-family: OpenSans, monospace; font-size: 22pt; color: #00ccff;">"СТАНДАРТ+"</span></p>


  <hr />
  <p style="text-align: center;"><span style="font-family: OpenSans, monospace; font-size:...

CSS

* {
  box-sizing:border-box;
}
.services {
  display: flex;
}

.service-item {
  position: relative;
  width: 95%; /* Ширина первого слоя */
  height: 400px;
  padding: 15px; /* Поля вокруг текста */
  background: #fff; /* Цвет фона */
  margin: 5px auto 15px;
  border:1px solid #FF6600;
}
.service-item::before {
  content:"\f005";
  font-family: 'FontAwesome';
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: orange;
  border-radius: 0 0 50% 0;
}
.star-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: orange;
  border-radius: 0 0 50% 0;
}

@media (min-width: 500px) {
  .service-item {
    width: 31%;
  }
   
}