JSFiddle - React, Tailwind, and code Playground

by Ricardo Ruiz

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<main>
  <article class="container">
    <section class="col col--left">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus eu justo at viverra. Sed sollicitudin semper lectus, et placerat magna hendrerit vel. Nunc ac ipsum non neque dictum congue. Nunc ligula libero, tempus vitae magna eu, ultrices
        porta est. Vivamus et turpis scelerisque, vehicula tellus in, feugiat augue. Aliquam egestas massa id leo suscipit, id venenatis tellus dictum. Sed ante eros, iaculis a diam in, dapibus sagittis ipsum. Sed in eros id odio ornare interdum.</p>
      <p>Sed volutpat fringilla tempus. Quisque sit amet elit non ante facilisis accumsan. Phasellus varius facilisis eleifend. Sed iaculis arcu magna, ut ullamcorper diam venenatis eget. Pellentesque iaculis risus vitae augue ultricies accumsan. Etiam vulputate,
        ante a blandit luctus, sapien augue scelerisque ligula, id rhoncus massa arcu eget eros. Ut et nisl eu purus ullamcorper suscipit. Pellentesque in suscipit ipsum, quis auctor augue. Vestibulum non aliquet ipsum, sed luctus nibh. Praesent vulputate
        efficitur augue, eu mattis metus porttitor pharetra.
      </p>
    </section>
    <section class="col col--right col--with-separator">
      <div class="separator__container">
        <svg class="separator__triangle">
          <use xlink:href="#triangleSeparator"></use>
        </svg>
      </div>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque maximus eu justo at viverra. Sed sollicitudin semper lectus, et placerat magna hendrerit vel. Nunc ac ipsum non neque dictum congue. Nunc ligula libero, tempus vitae magna eu, ultrices
        porta est. Vivamus et turpis scelerisque, vehicula tellus in, feugiat augue. Aliquam egestas massa id leo suscipit, id venenatis tellus dictum. Sed ante eros, iaculis a diam in, dapibus...

CSS

.container {
  display: flex;
}

.col {
  padding: 3em;
}

.col--left {
  background-color: #fff;
}

.col--right {
  background-color: #019CDC;
}

.col--with-separator {
  position: relative;
}

#spriteSheet {
  display: none;
}

.separator__container {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

.separator__triangle {
  width: 100px;
  height: 100%;
  color: white;
}

.separator__container--inverted {
  left: calc(100% - 100px);
}

.separator__container--inverted .separator__triangle {
  color: #019CDC;
  transform: rotateZ(180deg);
}