JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<div class="wrapper">
  <div class="maxwidth">
    Yoda rockz!
    <div class="slider">
      <div class="slick-list">
        <div class="slick-track">
          <div class="item">a</div>
          <div class="item">b</div>
          <div class="item">c</div>
        </div>
      </div>
    </div>
  </div>

</div>

CSS

body {
  margin: 0;
  padding: 0;
}

div {
  box-sizing: border-box;
}

div.wrapper {
  max-width: 700px;
  min-width: 400px;
  display: inline-block;
}

div.maxwidth {
  width: 100%;
  background: lightgrey;
  padding: 20px;
  color: white;
}

.slider {
  width: 100%;
  overflow: hidden;
}

.slick-list {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
}

.slick-track {
  opacity: 1;
  width: 3920px;
  transform: translate3d(0px, 0px, 0px);
}

.slider .slick-list .item {
  width: 300px;
  float: left;
  background: red;
}