JSFiddle - React, Tailwind, and code Playground

by Burduja Serghei

HTML

<div class="our-projects" id="js-our-projects">
				<div class="our-projects__item inactive">
					<div class="img-wrap">
						<img src="assets/i/our-projects/1.jpg" alt="">
					</div>
					<!-- /.img-wrap -->
				</div>
				<!-- /.our-projects__item -->
				<div class="our-projects__item">
					<div class="img-wrap">
						<img src="assets/i/our-projects/2.jpg" alt="">
					</div>
					<!-- /.img-wrap -->
				</div>
				<!-- /.our-projects__item -->
				<div class="our-projects__item">
					<div class="img-wrap">
						<img src="assets/i/our-projects/3.jpg" alt="">
					</div>
					<!-- /.img-wrap -->
				</div>
				<!-- /.our-projects__item -->
				<div class="our-projects__item">
					<div class="img-wrap">
						<img src="assets/i/our-projects/4.jpg" alt="">
					</div>
					<!-- /.img-wrap -->
				</div>
				<!-- /.our-projects__item -->
				<div class="our-projects__item">
					<div class="img-wrap">
						<img src="assets/i/our-projects/5.jpg" alt="">
					</div>
					<!-- /.img-wrap -->
				</div>
				<!-- /.our-projects__item -->
				<div class="our-projects__item">
					<div class="img-wrap">
						<img src="assets/i/our-projects/2.jpg" alt="">
					</div>
					<!-- /.img-wrap -->
				</div>
				<!-- /.our-projects__item -->
				<div class="our-projects__item">
					<div class="img-wrap">
						<img src="assets/i/our-projects/1.jpg" alt="">
					</div>
					<!-- /.img-wrap -->
				</div>
				<!-- /.our-projects__item -->
				<div class="our-projects__item">
					<div class="img-wrap">
						<img src="assets/i/our-projects/4.jpg" alt="">
					</div>
					<!-- /.img-wrap -->
				</div>
				<!-- /.our-projects__item -->
			</div>

SCSS

.arrows {
  margin-bottom: 18px;
  text-align: right;

  &__item {
    display: inline-block;
    vertical-align: top;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: $accent;
    border: 2px solid $accent;
    transition: all .3s ease;

    &:hover,
    &:focus {
      background: transparent;
      cursor: pointer;
    }

    &:hover .fa {
      color: $accent;
    }

    &:first-child {
      margin-right: 20px;
    }

    .fa {
      font-size: 36px;
      color: #fff;
      transition: all .3s ease;
    }
  }
  /* arrows__item
  ====================================================*/
}
.our-projects {
  &-wrap {
    h2 {
      margin-bottom: 84px;
    }
  }

  .slick-slide {
    margin: 0;
    width: 100%;
    transform: scale(0.7);
    border: 2px solid transparent;

    .img-wrap {
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,.4);
      }
    }

    &.slick-current {
      transform: scale(1);
      border-color: $accent;

      .img-wrap {
        &::after {
          content: '';
          background: none;
        }
      }
    }
  }
}

JavaScript

/* our-projects-slider
    ====================================================*/
    $('#js-our-projects').slick({
        centerMode: true,
        slidesToShow: 3,
        'prevArrow': $('#js-project_arrows__prev'),
        'nextArrow': $('#js-project_arrows__next'),
    });