JSFiddle - React, Tailwind, and code Playground

by dusset

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <div class="container-fluid p-0 section-red">
      <div class="divider-wrap">
        <svg version="1.1" class="divider divider-flip" x="0px" y="0px" width="240px" height="24px" viewBox="0 0 240 24" enable-background="new 0 0 240 24" xml:space="preserve" preserveAspectRatio="none">
      		<path fill="#ffffff" fill-opacity="0.33" d="M240,24V0c-51.797,0-69.883,13.18-94.707,15.59c-24.691,2.4-43.872-1.17-63.765-1.08
      			c-19.17,0.1-31.196,3.65-51.309,6.58C15.552,23.21,4.321,22.471,0,22.01V24H240z"></path>
      		<path fill="#ffffff" fill-opacity="0.33" d="M240,24V2.21c-51.797,0-69.883,11.96-94.707,14.16
      			c-24.691,2.149-43.872-1.08-63.765-1.021c-19.17,0.069-31.196,3.311-51.309,5.971C15.552,23.23,4.321,22.58,0,22.189V24h239.766H240
      			z"></path>
      		<path fill="#ffffff" d="M240,24V3.72c-51.797,0-69.883,11.64-94.707,14.021c-24.691,2.359-43.872-3.25-63.765-3.17
      			c-19.17,0.109-31.196,3.6-51.309,6.529C15.552,23.209,4.321,22.47,0,22.029V24H240z"></path>
      	</svg>
      </div>

      <div class="row text-center text-light">
        <div id="section-one" class="col mx-auto p-3 mb-5" style="max-width:720px;">
          <h3 class="section-name text-white-50" data-aos="fade-in" data-aos-duration="250" data-aos-delay="250" data-aos-anchor="#section-one">O produkte</h3>
          <h2 data-aos="zoom-in" data-aos-duration="500" data-aos-anchor="#section-one">Preskúmajte nepreskúmané</h2>
          <p class="font-weight-bold mt-5 larger" data-aos="zoom-in" data-aos-duration="500"...

CSS

body {
  font-family: 'Roboto', sans-serif;
  /*background: blue;*/
}

/* Colors */
.section-red {
  background-color: #ff838a;
}



/* Typography */

h1 {
  font-size:80px;
  font-weight: 700;
  letter-spacing: -0.025em;
}

h2.product-name {
  font-size: 2rem;
  font-weight: 300;
  padding:5px;
}

h2 {
  font-size: 48px;
  letter-spacing: -0.025em;
  font-weight: 700;
}

h3, h4 {
  font-weight: 700;
}

p {
  font-size: 18px;
  line-height: 1.39em;
  font-weight: 300
}

p.larger {
  font-size: 21px;
}


.section-name {
  text-transform: uppercase;
  font-weight: 500;
}

/* Shape Dividers */
.divider-wrap {
  height:200px;
}

.divider {
  width: 100%;
  height: 100%;
}

.divider-flip {
  -webkit-transform: scaley(-1) scalex(-1);
  -moz-transform: scaley(-1) scalex(-1);
  -o-transform: scaley(-1) scalex(-1);
  -ms-transform: scaley(-1) scalex(-1);
  transform: scaley(-1) scalex(-1);
}