JSFiddle - React, Tailwind, and code Playground

by yourbudweiser

HTML

<div class="wrapper">
  <div class="container">
    <div class="container1">
      <h2>Page Banner</h2>
      <h1>Page Banner</h1>
    </div>
    <div class="container2">
      <input type="text">
    </div>
  </div>
</div>

CSS

body {
  margin: 0;
  padding: 0;
}

.wrapper {
  background-color: yellow;
  padding: 20px;
}

.container {
  transform: skew(-25deg);
}

.container1 {
  max-width: 50%;
  z-index: 1;
}

.container1:before {
  background-color: red;
  content: '';
  height: 100%;
  left: -50%;
  padding: 10px 0;
  position: absolute;
  width: 100%;
  z-index: -1;
}

h1 {
  margin: 0;
}
h2 {
  margin: 0;
}

.container2 {
  max-width: 50%;
  z-index: 1;
}

.container2:before {
  background-color: white;
  content: '';
  height: 100%;
  left: -50%;
  position: absolute;
  width: 100%;
  z-index: -1;
}