JSFiddle - React, Tailwind, and code Playground

by satantx

HTML

<div class="blog-posts">
		<img src="img/blog.png" alt="blog-posts">
		<section>
			<figure>
				<div class="photo-block"></div>	
				<figcaption>BY TOMMY GRIFFIN</figcaption>
				<p>
					Hollywood’s latest trend 
					comes Underfire
				</p>
			</figure>
			<figure>
				<div class="photo-block"></div>	
				<figcaption>BY TOMMY GRIFFIN</figcaption>
				<p>
					Hollywood’s latest trend 
					comes Underfire
				</p>
			</figure>
			<figure>
				<div class="photo-block"></div>	
				<figcaption>BY TOMMY GRIFFIN</figcaption>
				<p>
					Hollywood’s latest trend 
					comes Underfire
				</p>
			</figure>
			<figure>
				<div class="photo-block"></div>	
				<figcaption>BY TOMMY GRIFFIN</figcaption>
				<p>
					Hollywood’s latest trend 
					comes Underfire
				</p>
			</figure>
			<figure>
				<div class="photo-block"></div>	
				<figcaption>BY TOMMY GRIFFIN</figcaption>
				<p>
					Hollywood’s latest trend 
					comes Underfire
				</p>
			</figure>
			<figure>
				<div class="photo-block"></div>	
				<figcaption>BY TOMMY GRIFFIN</figcaption>
				<p>
					Hollywood’s latest trend 
					comes Underfire
				</p>
			</figure>
			<figure>
				<div class="photo-block"></div>	
				<figcaption>BY TOMMY GRIFFIN</figcaption>
				<p>
					Hollywood’s latest trend 
					comes Underfire
				</p>
			</figure>
		</section>
		<div class="carousel-bar">
			<div class="scroll-button">
				<div class="shadow-bar"></div>
			</div>
		</div>
	</div>

CSS

.blog-posts {
  position: relative;
  width: 100%;
  height: 870px;
  padding-top: 70px;
  background: #3f3b48;
   overflow: hidden;
}
/* line 327, ../sass/screen.scss */
.blog-posts img[src*="blog"] {
  display: block;
  margin: 0 auto;
}
/* line 331, ../sass/screen.scss */
.blog-posts h2 {
  line-height: 160px;
  text-align: center;
}
/* line 337, ../sass/screen.scss */
.blog-posts section {
  position: absolute;
  top: 250px;
  left: 2%;
  width: 2630px;
  height: 450px;
}
/* line 344, ../sass/screen.scss */
.blog-posts section figure .photo-block {
  background-size: cover !important;
  background-position: center !important;
}
/* line 348, ../sass/screen.scss */
.blog-posts section figure:nth-of-type(1) .photo-block {
  background: url(../img/first.jpg) no-repeat;
}
/* line 351, ../sass/screen.scss */
.blog-posts section figure:nth-of-type(2) .photo-block {
  background: url(../img/second.jpg) no-repeat;
}
/* line 354, ../sass/screen.scss */
.blog-posts section figure:nth-of-type(3) .photo-block {
  background: url(../img/third.jpg) no-repeat;
}
/* line 357, ../sass/screen.scss */
.blog-posts section figure:nth-of-type(4) .photo-block {
  background: url(../img/fourth.jpg) no-repeat;
}
/* line 360, ../sass/screen.scss */
.blog-posts section figure:nth-of-type(5) .photo-block {
  background: url(../img/fifth.jpg) no-repeat;
}
/* line 363, ../sass/screen.scss */
.blog-posts section figure:nth-of-type(6) .photo-block {
  background: url(../img/seventh.jpg) no-repeat;
}
/* line 366, ../sass/screen.scss */
.blog-posts section figure:nth-of-type(7) .photo-block {
  background: url(../img/eighth.jpg) no-repeat;
}
/* line 369, ../sass/screen.scss */
.blog-posts section figure {
  display: inline-block;
  width: 340px;
  height: 450px;
  margin: 0 15px;
  background: #595466;
  box-shadow: 5px 5px 30px 0 black;
}
/* line 379, ../sass/screen.scss */
.blog-posts section figure div {
  position: relative;
  width: 300px;
  height: 300px;
  margin: 20px auto;
 ...

JavaScript

var a = 0,
        c = $(".carousel-bar").width(),
        d = $(".carousel-bar").offset().left,
        b = $(window).width(),
        e = $(".blog-posts section").width();
    $(".scroll-button").on("mousedown", function(f) {
        c = $(".carousel-bar").width();
        d = $(".carousel-bar").offset().left;
        b = $(window).width();
        e = $(".blog-posts section").width();
        a = 1
    });

    $(document).on("mouseup", function() {
        a = 0
    });
    $(window).resize(function() {
    $(".scroll-button").css("left", "0%")
    $(".blog-posts section").css("left", "2%");
    });
    $(".carousel-bar").on("mousemove", function(f) {
        a && (distance = (f.pageX - d - 15) / c * 100, 100 < distance && (distance = 100), 0 > distance && (distance = 0), $(".scroll-button").css("left",
            distance + "%"), distance *= (e - b + 70) / b, $(".blog-posts section").css("left", -distance + 2 + "%"))
    })