JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<div class="ertekesites_block_wrap">
  <div class="ertekesites_block_cont">
    <div class="ertekesites_block">
      <div class="block_top">
        <div class="block_title">Signal</div>
        <div class="block_image bi_67">
          <div class="block_image_inner">
            <div><div class="block_image_inner_image bi_67"></div></div>
          </div>
        </div>
        <div class="block_price">
          2.990 Ft / negyedév 
          <span>Éves díj: 18.165Ft</span>
        </div>
        <ul>
          <li>Lorem ipsum</li>
          <li>Dolor sit amet</li>
          <li>Ensectetur adipiscing elit</li>
          <li>Dullam bibendum</li>
          <li>Liam sit amet lacinia</li>
        </ul>  
      </div>
      <div class="block_bottom">
        <a class="ertekesites_info" href="javascript:;" onclick="pageFn.showInfo('karexpertInfo')"><div class="info_icon"></div><label>TOVÁBBI INFORMÁCIÓ »</label></a>
        <div class="ertekesites_btn_padding">
          <input type="button" class="kiskozepgomb ertekesites_bnt" value="Megkötöm" onclick="project.crossSellingKAREXPERT(51)">
        </div>
        <div id="info_karexpertInfo" class="infoBlock">
          <p>Kárexpert szolgáltatás: Azért kötünk biztosítást, hogy a bajban ne maradjunk egyedül.</p>

          <p>Nem lehet azonban mindenki biztosítási szakember, így nem tudja mindenki pontosan,
            hogy mit kell tennie kár esetén.</p>

          <p>Ha Ön sem tudja, vagy egyszerűen szeretné, ha szakemberek járnának el Ön helyett, akkor válasszon minket!</p>
        </div>
      </div>
    </div>
    <div class="ertekesites_block">
      <div class="block_top">
        <div class="block_title">Signal</div>
        <div class="block_image bi_67">
          <div class="block_image_inner">
            <div><div class="block_image_inner_image bi_67"></div></div>
          </div>
        </div>
        <div class="block_price">
          2.990 Ft / negyedév 
          <span>Éves díj: 18.165Ft</span>
     ...

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');

* {
  font-family: 'Open Sans', sans-serif;
}
body{
  background-color: #fafafa;
}
.ertekesites_block_wrap {
    display: flex;
    flex-wrap: wrap;
}
.ertekesites_block_cont {
    flex: 0 1 300px;
}
.ertekesites_block {
    width: 278px;
    position: relative;
    border: 1px solid #CCC;
    border-collapse: collapse;
    border-spacing: 0px;
    margin-bottom: 10px;
    background-color: #FFF;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
    text-align: center;
    margin-right: 15px;
    height: 100%;
    display: inline-block;
    float: left;
}

.ertekesites_block .block_top .block_title {
    color: #fff;
    background-color: #4390e0;
    font-size: 15px;
    padding: 12px 0;
    font-weight: bold;
    text-transform: uppercase;
}

.ertekesites_block .block_top .block_image {
    background-size: 100% auto;
    background-repeat: no-repeat;
    height: 160px;
    width: 100%;
    bottom: 0px;
    background-image: url(https://ckb4.sktrend.hu/GLOBALS/Vega/web_ckb/img/kertekesit/21.png);
    position: relative;
}

.ertekesites_block .block_top .block_image.gap {
  background-image: url(https://i.imgur.com/zL5gE29.jpg);
}

.ertekesites_block .block_top .block_image.biztos {
  background-image: url(https://i.imgur.com/CgLAtK0.jpg);
}

.ertekesites_block .block_top .block_image.gap .block_image_inner .block_image_inner_image {
    background-position: -142px 0px;
    width: 36px;
}

.ertekesites_block .block_top .block_image.biztos .block_image_inner .block_image_inner_image {
   background-position: -42px 0px;
    width: 33px;
}

.ertekesites_block .block_top .block_image .block_image_inner {
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.8);
    width: 95px;
    height: 95px;
    border-radius: 15px;
    position: relative;
    top: 40px;
}

.ertekesites_block .block_top .block_image .block_image_inner .block_image_inner_image {
    background-image:...