JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<div class="bonmedico-features">
<div class="section-left">

</div>


<div class="section-right">


    <div class="col">
      <img src="https://via.placeholder.com/150">
      <span>Feature 1</span>
    </div>

    <div class="col">
      <img src="https://via.placeholder.com/150">
      <span>Feature 2</span>
    </div>

    <div class="col">
      <img src="https://via.placeholder.com/150">
      <span>Feature 3</span>
    </div>
		
		
</div>


</div>

CSS

.col {
  height: 150px;
  width: 150px;
  display: inline-block;
}


.row {
  text-align: center;
  background-color: #e7e7e7;
  padding: 20px 0;
}

.bonmedico-features h2 {
    text-align: center;
}

.section-left {
  display: inline-block;
	background-image: url(https://i.shgcdn.com/7d506056-40c5-468b-a248-b3f58890f3bc/-/format/auto/-/preview/3000x3000/-/quality/lighter/);
    width: 49%;
    height: 500px;
		    min-width: 500px;
				    background-size: contain;
    background-repeat: no-repeat;
}

.section-right {
  display: inline-block;
	    width: 49%;
    height: 500px;
}

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