JSFiddle - React, Tailwind, and code Playground

by Che Sampat

HTML

<section class="has-divider">
  <div class="container">
    <div class="row align-items-center justify-content-between o-hidden">
      <div class="col-md-6 order-sm-2 mb-5 mb-sm-0" data-aos="fade-left">
        <img src="assets/img/saas-3.svg" alt="Image">
      </div>
      <div class="col-md-6 pr-xl-5 order-sm-1">
        <h1 class="display-4">Payments made simple.</h1>
        <p class="lead">Recurring, one-time payments made frictionless & fast.</p>
        <form class="d-sm-flex mb-2 mt-4">
          <a data-fancybox data-type="iframe" data-src="https://player.vimeo.com/video/322452870?transparent=0" style="background-color: #12263f" href="javascript:;" class="btn btn-lg btn-dark mr-sm-2 mb-2 mb-sm-0">Watch how</a>
          <button class="btn btn-lg btn-primary mb-2 mb-sm-0" type="submit">Get Started</button>
        </form>
        <span class="text-small text-muted">Already using SuperPay? <a href="#">Sign In</a>
                </span>
      </div>
    </div>
  </div>
  <div class="divider">
    <svg class="bg-primary-alt" width="100%" height="100%" version="1.1" viewbox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none">
          <path d="M0,0 C6.83050094,50 15.1638343,75 25,75 C41.4957514,75 62.4956597,0 81.2456597,0 C93.7456597,0 99.9971065,0 100,0 L100,100 L0,100" fill="#ffffff"></path>
        </svg>
  </div>
</section>
<section class="bg-primary-alt">
  <div class="container">
    <div class="row mb-4">
      <div class="col">
        <h2 class="h1">Many ways. One platform.</h2>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4" data-aos="fade-up" data-aos-delay="100">
        <div class="card card-body">
          <div class="icon-round mb-3 mb-md-4 bg-primary">
            <svg class="icon" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                   ...