JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<section class="cat-box scroll-box scroll-box-wide tie-cat-7">
  <h2 class="cat-box-title"><a href="#">Scrolling Box</a></h2>
  <div class="cat-box-content">
    <div class="group_items-box" id="wslideshow7">
      <div class="scroll-item">
        <div class="post-thumbnail">
          <a href="#" title="Permalink to Post With Featured Image" rel="bookmark">
            <img width="300" height="160" src="https://placehold.co/300x160" class="attachment-tie-large size-tie-large wp-post-image" alt="Test 2" loading="lazy"> 
          </a>
        </div>
        <h3 class="post-box-title"><a href="#" title="Permalink to Post With Featured Image" rel="bookmark">Post With Featured Image</a></h3>
        <p class="post-meta">
          <span class="tie-date">July 30, 2012</span>
        </p>
      </div>
      <div class="scroll-item">
        <div class="post-thumbnail">
          <a href="#" title="Permalink to Post with SoundCloud" rel="bookmark">
            <img width="300" height="160" src="https://placehold.co/300x160" class="attachment-tie-large size-tie-large wp-post-image" alt="" loading="lazy">
          </a>
        </div>
        <h3 class="post-box-title"><a href="#" title="Permalink to Post with SoundCloud" rel="bookmark">Post with SoundCloud</a></h3>
        <p class="post-meta">
          <span class="tie-date">July 30, 2012</span>
        </p>
      </div>
      <div class="scroll-item">
        <div class="post-thumbnail">
          <a href="#" title="Permalink to Post with Image + Lightbox" rel="bookmark">
            <img width="300" height="160"...

CSS

.scroll-box {
  margin: 10px;
  border-top: 6px solid #cb242a;
  position: relative;
  font-family: 'Helvetica', 'Arial', sans-serif;
}

.cat-box-title {
  position: absolute;
  top: 0;
  left: 0;
  background: #cb242a;
  color: #fff;
  text-transform: uppercase;
  padding: 0px 10px 3px;
  z-index: 100;
}

.cat-box-title A {
  text-decoration: none;
  color: #fff;
}

.cat-box-content {
  position: relative;
}

#wslideshow7 {
  overflow: hidden;
  position: relative;
}

#wslideshow7 .slick-list {
  margin: 0 -6px;
}

#wslideshow7 .slick-arrow {
  width: 30px;
  height: 30px;
  display: block;
  position: absolute;
  top: -6px;
  border: 0;
  border-radius: 0;
  background: #cb242a;
  color: #fff;
  z-index: 100;
  font-size: 1.15rem;
  padding: 6px 0 0 0;
  cursor: pointer;
}

#wslideshow7 .slick-arrow.slick-disabled I {
  opacity: .5;
}

#wslideshow7 .your-prev-button-class {
  right: 36px;
}

#wslideshow7 .your-next-button-class {
  right: 0;
}

.scroll-item {
  padding: 0 6px;
}

.scroll-item .post-thumbnail {
  margin-bottom: 10px;
}

.scroll-item .post-thumbnail > A {
  display: block;
}

.scroll-item .post-thumbnail > A > IMG {
  width: 100%;
  height: auto;
}

.scroll-item .post-box-title {
  margin-bottom: 5px;
}

.scroll-item .post-box-title A {
  color: #444444;
  text-decoration: none;
}

.scroll-item .post-meta {
  font-size: .75rem;
  color: #aaaaaa;
}

JavaScript

$('#wslideshow7').slick({
  infinite: false,
  slidesToShow: 4,
  slidesToScroll: 4,
  prevArrow: '<button type="button" class="your-prev-button-class"><i class="fa fa-chevron-left"></i></button>',
  nextArrow: '<button type="button" class="your-next-button-class"><i class="fa fa-chevron-right"></i></button>'
});