JSFiddle - React, Tailwind, and code Playground

HTML

<div
  class="flex__item flex--directionColumn " 
>
  <div
    class="flex height-full panelBox--promo panelBox--bigShadow bg-white"
  >
    <div
      class="flex__item flex--directionColumn padding-left-20"
    >
      <header>
        <div>
          <div class="h4">Exclusive Content</div>
        </div>
      </header>
      <section class="font-size-s">
        <p class="margin-bottom-20">
          A subsciption provides 
        </p>
        <ul class="list--faIcons font-size-13px">
          <li class="list__item--faIcon margin-bottom-7">
            <i class="fa fa-check-circle"></i>
            <p>Full access to 1m statistics</p>
          </li>
          <li class="list__item--faIcon margin-bottom-7">
            <i class="fa fa-check-circle"></i>
            <p>All available resources</p>
          </li>
          <li class="list__item--faIcon margin-bottom-7">
            <i class="fa fa-check-circle"></i>
            <p>Available to download in PNG, PDF, XLS format</p>
          </li>
        </ul>
      </section>
    </div>
    <div
      class="width45 blue-background padding-all-20 padding-left-50 text-white text-center"
      <span class="triangle-white-right100"></span>
      <div class="h4 margin-bottom-20 text-color--white">Purchase now</div>
     
    </div>
  </div>
</div>

CSS

.blue-background {
    background: linear-gradient(#0f2741 0,#2f425a 100%);
    margin: 0 auto 0 85px;
    position:relative;
    transform: skew(-15deg);
}

.bg-white {
    background-color: #fff !important;
    overflow: hidden
}

.text-white {
 color:white; 
}

.flex {
    display: -webkit-box;
    display: flex;
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.height-full {
    height: 100%;
}

.padding-vertical-20 {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

.flex__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.flex--directionColumn {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: column !important;
    flex-direction: column !important;
}
.panelBox--bigShadow {
    -webkit-box-shadow: 0 5px 25px 0 rgba(67,94,131,.35);
    box-shadow: 0 5px 25px 0 rgba(67,94,131,.35);
}
.font-size-s {
    font-size: .9rem;
}
.width45 {
    width: 45%;
}
.text-center {
    text-align: center !important;
}
.padding-left-50 {
    padding-left: 50px !important;
}
.padding-all-20 {
    padding-top: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 20px !important;
}

.margin-vertical-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}