JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/1.2.1/jquery-migrate.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class="showdata">
  <div class="slideshow">
    <div class="item-1">
      <div id="name">花椰菜</div>
      <div id="location">Market &nbsp; &#58;台北二</div>
      <div id="middleprice">Middle Price &nbsp; &#58;28.3</div>
      <div id="upperprice">Upper Price &nbsp; &#58;36.2</div>
      <div id="averageprice">Average Price &nbsp; &#58;27.6</div>
      <div id="lowerprice">Lower price &nbsp; &#58;16.8</div>
      <div id="quantity">Quantity &nbsp; &#58;9495.0</div>
      <div id="code">Code &nbsp; &#58;FB</div>
      <div id="kind">Kind &nbsp; &#58;青梗</div>
      <div id="processtype">Process type &nbsp; &#58;留梗柄</div>
      <div id="date">Date &nbsp; &#58;2016-04-08</div>

    </div>
    <div class="item-2">
      <div id="name">胡瓜</div>
      <div id="location">Market &nbsp; &#58;西螺鎮</div>
      <div id="middleprice">Middle Price &nbsp; &#58;22.3</div>
      <div id="upperprice">Upper Price &nbsp; &#58;28.0</div>
      <div id="averageprice">Average Price &nbsp; &#58;21.7</div>
      <div id="lowerprice">Lower price &nbsp; &#58;13.4</div>
      <div id="quantity">Quantity &nbsp; &#58;23125.0</div>
      <div id="code">Code &nbsp; &#58;FC</div>
      <div id="kind">Kind &nbsp; &#58;黑刺</div>
      <div id="processtype">Process type &nbsp; &#58;&quot;&quot;</div>
      <div id="date">Date &nbsp; &#58;2016-04-08</div>

    </div>
    <div class="item-3">
      <div id="name">花椰菜</div>
      <div id="location">Market &nbsp; &#58;桃園縣</div>
      <div...

CSS

.slideshow .item-1 {
  display: inline-block;
  width: 146px;
  font-size: 16px;
  background-color: mediumaquamarine;
  margin: 2px;
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
}

.slideshow .item-2 {
  display: inline-block;
  width: 146px;
  font-size: 16px;
  background-color: mediumaquamarine;
  margin: 2px;
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
}

.slideshow .item-3 {
  display: inline-block;
  width: 146px;
  font-size: 16px;
  background-color: mediumaquamarine;
  margin: 2px;
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
}

.slideshow .item-4 {
  display: inline-block;
  width: 146px;
  font-size: 16px;
  background-color: mediumaquamarine;
  margin: 2px;
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
}

.slideshow .item-5 {
  display: inline-block;
  width: 146px;
  font-size: 16px;
  background-color: mediumaquamarine;
  margin: 2px;
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
}

.slideshow .item-6 {
  display: inline-block;
  width: 146px;
  font-size: 16px;
  background-color: mediumaquamarine;
  margin: 2px;
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
}

.slideshow .item-7 {
  display: inline-block;
  width: 146px;
  font-size: 16px;
  background-color: mediumaquamarine;
  margin: 2px;
  clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 25%, 75% 0);
}

.slideshow .item-8 {
  display: inline-block;
  width: 146px;
  font-size: 16px;
  background-color:...

CoffeeScript

$('.slideshow').slick
  slidesToShow: 9
  slidesToScroll: 9
  autoplay: true
  rows: 2
  autoplaySpeed: 1000
  mobileFirst: true
  adaptiveHeight: true