JSFiddle - React, Tailwind, and code Playground

by shamaleyte

HTML

<div class="clip-wrap">
     <div class="hero-text">
     <h1>Welcome to our <span class="banner-text-2"> help center</span>.</h1>
      <h2>Connect with our support team now:Connect with our support team nowConnect with our support team nowConnect with our support team nowConnect with our support team nowConnect with our support team nowConnect with our support team nowConnect with our support team nowConnect with our support team nowConnect with our support team nowConnect with our support team nowConnect with our support team nowConnect with our support team nowConnect with our support team nowConnect with our support team nowConnect with our support team nowConnect with our support team nowConnect with our support team nowConnect with our support team nowConnect with our support team nowConnect with our support team nowConnect with our support team nowConnect with our support team nowConnect with our support team nowConnect with our support team nowConnect with our support team now</h2>
    </div>
  </div>

CSS

.clip-wrap {
   position: relative;
    overflow: hidden
  position: relative
  width: 100%
  background: url("https://unsplash.it/1920/1080?image=901") no-repeat
  background-attachment: fixed
  background-size: cover
  color: #fff
  display: table
  min-height: 300px
  text-align: center
}

.clip-wrap:after {
   content: "";
   display: block;
   position: absolute;
   width: 100%;
   bottom: 0;
   left: 0;
   pointer-events: none;
   z-index: 1;
   background: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PHBhdGggZmlsbD0iI2ZmZiIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMCAxMDBoMTAwVjUweiIvPjwvc3ZnPg==); /* Use a white triangle here */
   height: 100px; /* Set this as appropriate */
   background-size: 100% 100%;
}