JSFiddle - React, Tailwind, and code Playground

by zunme

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<link rel="stylesheet" href="https://gijsroge.github.io/owl-carousel2-thumbs/assets/owl.carousel.css">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<script src="https://gijsroge.github.io/owl-carousel2-thumbs/assets/OwlCarousel2Thumbs.min.js"></script>
<div class="contents-sub">



<div class="container-fluid">
   <div class="s_top_header"></div>
    <div class="s_top_wrapper">
        <div class="imgbox">
<!-- carousel -->
<div class="main-slider owl-carousel">
    <div class="item">
        <img data-thumb='<img src="https://placehold.it/300x300&text=filetour" />'  src="https://placehold.it/300x300&text=filetour" alt="MASK">
    </div>
    <div class="item">
        <img data-thumb='<img src="https://placehold.it/300x300&text=filetour" />'  src="https://placehold.it/300x300&text=filetour" alt="MASK">
    </div>
    <div class="item">
        <img data-thumb='<img src="https://placehold.it/300x300&text=filetour" />'  src="https://placehold.it/300x300&text=filetour" alt="MASK">
    </div>
</div>

<!-- / carousel -->
        </div>
        <div class="rightbox">
          <div class="r_box_wrap">
              <div class="r_goods_title">KF94 굿데이 방역마스크</div>
              <div class="r_price">2,500원</div>
          </div>
          <div class="r_box_wrap">
              <div class="r_sub_title">주문정보</div>
              <div class="r_line">
                <div class="r_head ml-10">이름</div>
                <div class="r_inp"><input type="text" class=""></div>
              </div>
                          <div class="r_line">
                <div class="r_head ml-10">전화번호</div>
                <div...

CSS

body, th, td, input, select, textarea, button {
    font-size: 12px;
    line-height: 1.5;
    font-family: '����','����', dotum, '���� ����', 'Malgun Gothic', sans-serif;
    color: #6e737c;
}
.contents-sub{
  width: 715px;
  float: left;
}
/* =================================== */
.main-slider {
  width: 100%;
  margin-top: 28px;
}
.main-slider .owl-stage {
  background-color: rgba(30, 144, 255, 0.8);
}
.main-slider .owl-item {
  padding: 0;
  position: relative;
  opacity: .5;
}
.main-slider .owl-item img {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  /*height: 450px;*/
}
.main-slider .center {
  opacity: 1;
  -webkit-transform: scale(1.005);
          transform: scale(1.005);
  -webkit-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  z-index: 9999;
}
.main-slider .owl-controls .owl-nav {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
}
.main-slider .owl-controls .owl-nav .prev {
  position: absolute;
  height: 80%;
  width: 15%;
  left: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}
.main-slider .owl-controls .owl-nav .next {
  position: absolute;
  height: 80%;
  width: 15%;
  right: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}
.main-slider .owl-thumbs {
  text-align: center;
  display: table;
  width: 100%;
}
.main-slider .owl-thumb-item {
  width: 20%;
  /*height: 150px;*/
  border: none;
  background: none;
  padding: 0;
  opacity: .7;
  overflow: hidden;
}
.main-slider .owl-thumb-item img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.main-slider .owl-thumb-item.active {
  opacity: 1;
}
.main-slider .owl-thumb-item.active img {
  position: relative;
}

.overlay {
  width: 100%;
  height: 100%;
  display:...

JavaScript

function viewtoggle(btn) {
    if( $("#product").hasClass("hide-overflow") ){
        $("#product").removeClass( 'hide-overflow');
        $(btn).addClass( 'expand');
    }else {
        $("#product").addClass( 'hide-overflow');
        $(btn).removeClass( 'expand');
    }
}
function topFunction() {
  document.body.scrollTop = 170; // For Safari
  document.documentElement.scrollTop = 170; // For Chrome, Firefox, IE and Opera
}

$(document).ready(function(){
  var owl = $('.main-slider');
    owl.owlCarousel({
        autoplay: false,
        autoplayTimeout: 4000,
        loop: true,
        items: 1,
        center: true,
        nav: false,
        thumbs: true,
        thumbImage: false,
        thumbsPrerendered: true,
        thumbContainerClass: 'owl-thumbs',
        thumbItemClass: 'owl-thumb-item',
        navText: ['<span class="prev">＜</span>','<span class="next">＞</span>'],
    });
});