JSFiddle - React, Tailwind, and code Playground

by Amin Kodaganur

HTML

<section class="header-banner">
    <div class="row">
        <div class="col1">
            <div class="title">
                BharatPe Credit Program for Distributors
                <span>100% Collateral Free</span>
                <span>Lowest Cost of Trade Credit</span>
                <span>Minimum Documentation & No Visit Required</span>
            </div>
        </div>
        <div class="col2">
            <img src="https://bharatpe.com/desktop-path/img-webview/d2r-banner.png" alt="">
        </div>
    </div>
</section>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;700&display=swap');
*{
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  font-family: 'Roboto', sans-serif;
}

.row{
  display: flex;
  flex-wrap: wrap;
  max-height: inherit;
}
.col1{
  width:70%;
}
.col2{
  width: 30%;
}
img{
  width: 85%;
  
}
.header-banner{
  padding: 20px 30px;
  width: 100%;
  max-height: 350px;
}
.title{
  font-weight: 700;
  font-size: 5.5vw;
  line-height: 70px;
  margin-top: 40px;
}
.title span{
  font-weight: 100;
  font-size: 2vw;
  display: block;
  line-height: 40px;
}
.title span::before{
    content: '';
    display: inline-block;
    margin-right: 12px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-left: 10px solid #3e3e3e;
    border-bottom: 6px solid transparent;
}