JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="ctabox_container">
<div class="ctabox_item ctabox_img"><img src="http://www.hloe.co.uk/example1.jpg"></div>
<div class="ctabox_item">
<div class="ctabox_txt">
<h2>Get instant results!</h2>
<p>Quisque eget maximus urna. Nulla f
aucibus in magna vitae viverra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<button>Calculate</button>
</div>
</div>
</div>

CSS

body {margin:50px 0;font-size:10px;}

.ctabox_container {background-color:#275DAA;box-sizing: border-box;display: -webkit-flex;display: flex;-webkit-flex-direction: row;flex-direction: row;-webkit-flex-wrap: nowrap;flex-wrap: nowrap;-webkit-justify-content: center;justify-content: center;-webkit-align-content: stretch;align-content: stretch;-webkit-align-items: center;align-items: center;}  
.ctabox_item {width:50%;}  
.ctabox_txt {color:#ffffff;padding:40px 20px;max-width:500px;}
.ctabox_img {-webkit-align-self: stretch;align-self: stretch;clip-path: polygon(0 0, 100% 0%, 85% 100%, 0% 100%);overflow:hidden;}   
.ctabox_img img {display:block;object-fit: cover;object-position: center;width: 100%;height: 100%;}
.ctabox_txt h2 {font-size:2.6em;margin:0;}
.ctabox_txt p {font-size:1.6em;line-height:1.8em;}
.ctabox_txt button {background-color: #04AA6D; /* Green */
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;border-radius: 4px;}

@media screen and (max-width: 600px) { 
.ctabox_container {-webkit-flex-direction: column;flex-direction: column;padding:20px 0;}
.ctabox_item {width:100%;box-sizing: border-box;} 
.ctabox_img {clip-path: none;}  
.ctabox_img img {display:block;object-fit: cover;object-position: center;width: 300px;height: 150px;margin:auto;}
.ctabox_txt {padding:20px 0px;width:300px;margin:auto;text-align:center;}
}