JSFiddle - React, Tailwind, and code Playground

by mohamm_98666

HTML

<div class="container">
  <div class="partial-section">
    <div class="section-inner">
      <div id="parallelogram">
        <div class="image"></div>
      </div>
    </div>
  </div>
  <div class="partial-section">
    <h1> This is some heading on the right partial section.</h1>
    <p>Some random text that should be appeared on the right side of the partial section. This should be below the heading the partial section has and should fill the empty space that it has.</p>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
  font-family: Arial;
}

* {
  box-sizing: border-box;
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  background-color: green;
  height: 450px;
}

.partial-section {
  width: 50%;
  background-color: red;
  height: inherit;
  display: inline;
  float: left;
  border: 2px solid lightgrey;
  padding: 20px;
}

.partial-section h1 {
  font-size: 40px;
}

.partial-section p {
  font-size: 20px;
}

.section-inner {
  height: inherit;
}

#parallelogram {
  width: 100%;
  height: inherit;
  transform: skew(-40deg);
  position: relative;
  top: 0;
  overflow: hidden;
}

.image {
  background: url(http://placekitten.com/601/301);
  background-size: cover;
  position: absolute;
  top: 0;
  background-repeat: no-repeat;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  height: inherit;
  width: 100%;
  transform: skew(40deg);
}