JSFiddle - React, Tailwind, and code Playground

by lilalilabp

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://unpkg.com/[email protected]/swiper-bundle.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/swiper-bundle.min.css">
<div class="container-fluid">    
    <div class="row m-0">
        <div class="col-2 p-0">
            <div class="swiper-container gallery-thumbs2 m-0">
                <div class="swiper-wrapper">                    
                    <div class="swiper-slide thumbs"><img src="https://i.ibb.co/GT6Y1Pt/imageonline-co-placeholder-image.jpg" alt="" class="gallery-thumbs-slide"></div>
                    <div class="swiper-slide thumbs"><img src="https://i.ibb.co/JcrZGK7/imageonline-co-placeholder-image-1.jpg" alt="" class="gallery-thumbs-slide"></div>
                    <div class="swiper-slide thumbs"><img src="https://i.ibb.co/CsVdyDD/imageonline-co-placeholder-image-2.jpg" alt="" class="gallery-thumbs-slide"></div>
                    <div class="swiper-slide thumbs"><img src="https://i.ibb.co/GJf688d/imageonline-co-placeholder-image-3.jpg" alt="" class="gallery-thumbs-slide"></div>
                    <div class="swiper-slide thumbs"><img src="https://i.ibb.co/g4sCWPM/imageonline-co-placeholder-image-4.jpg" alt="" class="gallery-thumbs-slide"></div>                    
                </div>
              </div>
        </div>
        <div class="col-6 p-0">
            <div class="swiper-container gallery-top2 m-0">
                <div class="swiper-wrapper">                
                 <div class="swiper-slide top"><img src="https://i.ibb.co/GT6Y1Pt/imageonline-co-placeholder-image.jpg" alt=""></div>
                 <div class="swiper-slide top"><img src="https://i.ibb.co/JcrZGK7/imageonline-co-placeholder-image-1.jpg" alt=""></div>
                 <div class="swiper-slide top"><img...

CSS

.main-product-title {
    font-size: 2rem;
}

.gallery-thumbs {
    width: 150px;
    height: 500px;
    border-right: 1px solid rgba(177, 177, 177, 0.8);
  }

  .gallery-thumbs-slide {
    width: 150px;
    height: 150px;
  }

  .gallery-thumbs .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    cursor: pointer;
    opacity: 0.3;
  }

  .gallery-thumbs .swiper-slide-visible {
    opacity: 0.2;
  }

  .gallery-thumbs .swiper-slide-active {
    opacity: 1;
  }

  .gallery-thumbs .swiper-slide-next {
    opacity: 40%;
  }

  .gallery-top {
    width: 500px;
    height: 500px;
  }

  .gallery-top .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
  }

  .product-page-pre-title {
      font-weight: 600;
      font-size: 1.7rem;
      font-style: italic;
  }

  .cta-links {
    text-decoration: underline;
    color: #b1b1b1;
    font-size: 1.2rem;
  }

  .cta-links:hover {
    cursor: pointer;
    color: #000;
  }

  .paragraph-product-page {
    font-size: 1.3rem;
    font-weight: 500;
  }

  .section-title-product-page {
    font-size: 1.3rem;
    font-weight: 600;
  }

  .product-price-btn {
    padding: 0.5rem 2rem;
    border: none;
    background-color: #aaa;
    font-weight: 600;
    color: white;
  }

  .margin-top-text {
      margin-top: 1rem;
  }

  .input-form-text {
    font-style: italic;
    color: #7B7B79;
    font-size: 1.125rem;
  }

.swiper-prev-2,
.swiper-next-2 {
    top:50%;
	transform: translateY(-50%);
	position: absolute;
	z-index: 2;
	cursor: pointer;
	padding: 0;
}

.swiper-prev-2 { left: 3%; }
.swiper-next-2 { right: 3%; }

.swiper-prev-2:before {
    content: '<' !important;
}

.swiper-next-2:before {
    content: '>' !important;
}

.swiper-dark:before {
    font-size: 30px;
    line-height: 1;
    opacity: .75;
    color: #6e6d6d !important;
    -webkit-font-smoothing: antialiased;
   ...

JavaScript

var galleryThumbs = new Swiper(".gallery-thumbs", {
    //   centeredSlides: true,
      centeredSlidesBounds: true,
      direction: "horizontal",
      slidesPerView: 3,
      spaceBetween: 20,
      freeMode: false,
      watchSlidesVisibility: true,
      watchSlidesProgress: true,
      watchOverflow: true,
      mousewheel: true,
      loop:true,
      breakpoints: {
        480: {
          direction: "vertical",
          slidesPerView: 3
        }
      }
    });
    var galleryTop = new Swiper(".gallery-top", {
      loop:true,
      direction: "horizontal",
      spaceBetween: 20,
      navigation: {
        nextEl: ".swiper-next-2",
        prevEl: ".swiper-prev-2"
      },
      thumbs: {
        swiper: galleryThumbs
      }
    });