JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<div class="bonmedico-features">
  <div class="img-section">
    <img src="https://via.placeholder.com/700x500">
  </div>
	
	
	
  <div class="ico-section">

    <h2>We care about your health</h2>

    <p>bonmedico ist mehr als ein Product. Unsere Produkte unterstützen Dich bestmöglich im Alltag und steigern Dein Wohlbefinden spürbar.</p>

    <div class="col">
      <img src="https://cdn.shopify.com/s/files/1/0283/0798/0341/files/bonmedico_webshopServiceIcons_v3_shipment_white-01_150x150.png?v=1594646287">
      <span>Speziell entwickelt, um Dir zu helfen</span>
    </div>

    <div class="col">
      <img src="https://cdn.shopify.com/s/files/1/0283/0798/0341/files/bonmedico_webshopServiceIcons_v3_package_White-01_150x150.png?v=1594646303">
      <span>Produziert mit bewährtem Expertenwissen</span>
    </div>

    <div class="col">
      <img src="https://cdn.shopify.com/s/files/1/0283/0798/0341/files/bonmedico_webshopServiceIcons_designedToHelpYou_white-01_150x150.png?v=1594646324">
      <span>Weiterentwicklet mit Innovation & Zeitgeist</span>
    </div>

    <div class="col">
      <img src="https://cdn.shopify.com/s/files/1/0283/0798/0341/files/bonmedico_webshopSI_producedExpertKnowledge_white-01_150x150.png?v=1594646342">
      <span>Optimiert mit Hilfe bisheriger Kundener-fahrungen</span>
    </div>

    <div class="col">
      <img src="https://cdn.shopify.com/s/files/1/0283/0798/0341/files/bonmedico_webshopServiceIcons_developedInnovation_white-01_150x150.png?v=1594646356">
      <span>Zugänglich gemacht zu fairem Preis-Leistungs-Verhältnis</span>
    </div>

  </div>
	
</div>

CSS

* {
  box-sizing: border-box;
}

.img-section {
  float: left;
  width: 40%;
}

.img-section img {
  width: 100%;
}

.ico-section {
  float: left;
  width: 60%;
  text-align: center;
  padding-bottom: 10px;
}


/* Clearfix (clear floats) */
.bonmedico-features::after {
  content: "";
  clear: both;
  display: table;

}

@media (max-width: 960px) {

  .img-section,
  .ico-section {
    width: 100%;
  }

  .bonmedico-features span {
    font-size: 2vw !important;
  }
}

@media (max-width: 576px) {
  .col {
    width: 100px !important;
  }

  .bonmedico-features span {
    font-size: 12px !important;
  }
}


.bonmedico-features {
  background-color: #DFEFFA;
}

.bonmedico-features span {
  font-size: 1.2vw;
  color: #7E7B79;
}

.bonmedico-features p {
  margin: 0;
}

.col {
  width: 19%;
  display: inline-block;
  vertical-align: top;
}

.col img {
  width: 100%;
  max-width: 150px;
}