JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test-wrapper">
  <div class="test">
    <ul class="img-list">
      <li><img src="http://placehold.it/250x150" /></li>
      <li><img src="http://placehold.it/250x150" /></li>
      <li><img src="http://placehold.it/250x150" /></li>
      <li><img src="http://placehold.it/250x150" /></li>
      <li><img src="http://placehold.it/250x150" /></li>
      <li><img src="http://placehold.it/250x150" /></li>
      <li><img src="http://placehold.it/250x150" /></li>
      <li><img src="http://placehold.it/250x150" /></li>
      <li><img src="http://placehold.it/250x150" /></li>
      <li><img src="http://placehold.it/250x150" /></li>
    </ul>
    <div class="test-content">
      啊喔喔喔啊喔喔啊喔
    </div>
    <ul class="img-list">
      <li><img src="http://placehold.it/250x150" /></li>
      <li><img src="http://placehold.it/250x150" /></li>
      <li><img src="http://placehold.it/250x150" /></li>
      <li><img src="http://placehold.it/250x150" /></li>
      <li><img src="http://placehold.it/250x150" /></li>
      <li><img src="http://placehold.it/250x150" /></li>
      <li><img src="http://placehold.it/250x150" /></li>
      <li><img src="http://placehold.it/250x150" /></li>
      <li><img src="http://placehold.it/250x150" /></li>
      <li><img src="http://placehold.it/250x150" /></li>
    </ul>
  </div>
</div>

SCSS

.test-wrapper {
  width: 100%;
  overflow: hidden;
  background: linear-gradient( #B97A57 50%, #B5E51D 50% );
  
}

.test {
  background: #fff;
  transform: rotate(-10deg);
  width: 120%;
  position: relative;
  left: -10%;
  margin: 70px 0;
  z-index: 5;
}

.test-content {
  width: 50%;
  margin: 80px auto;
  transform: rotate(10deg);
}

.img-list {
  list-style: none;
  width: 120%;
  margin: 0;
  padding: 0;
  height: 150px;
  overflow: hidden;
  li {
    float: left;
  }
  img {
    display: block;
  }
}