JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="full-width">
    <div class="box-width">
      <div class="slide1"></div>
      <div class="slide1"></div>
      <div class="slide1"></div>
      <div class="slide1"></div>
    </div>
  </div>
  <div class="full-width">
    <div class="box2">
      <div class="slide"></div>
    </div>
  </div>
</body>
</html>

CSS

.full-width
{
  width:100%;
  padding:0;
  margin:0;
  position:relative;
}
.box-width
{
  position:relative;
  max-width:500px;
  margin:0 auto;
  height:150px;
  background:yellow;
}
.box2
{
  max-width:400px;
  margin:-30px auto 0 auto;
  height:150px;
  background:red;
}
.slide
{
  max-width:200px;
  margin:-25px auto 0 auto;
  height:60px;
  background:orange;
}
.slide1{
  float:left;
}