JSFiddle - React, Tailwind, and code Playground

by vaheed akhtar

HTML

<div class="main"> 
 <div class="first"></div>
 <div>
  <h2>Title</h2>
  <p>This is my paragraph</p>
 </div>
</div>

CSS

.main{
  background: #00b5e2;
  width:300px;
}
.first{
  background-image: url('https://www.gehealthcare.com/-/jssmedia/85f4c7e039e44cce96ca29cf03fbbff8.jpg?h=361&la=en-US&w=600&hash=3B3134B4829B13E7F17DF1AAF03D3DE8');
  height:300px;
  position: relative; 
  background-size:cover;
}
.first:after{
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    border: 8px solid transparent;
    border-color: transparent transparent #00b5e2 #00b5e2;
}