JSFiddle - React, Tailwind, and code Playground

by jnfsmile

HTML

<div class="container">
    <div class="main-container">
        <div class="row">
            <div class="col-md-12">
                <img id="brand-logo" src="images/logo.png">
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="container">
                    <img id='slider-img' src='images/img1.png'>
                    <div id='left_holder'><img onclick="slider(-1)" class='left' src="images/arrow_left.png"></div>
                    <div id='right_holder'><img onclick="slider(1)" class='right' src="images/arrow_right.png"></div>
                </div>
            </div>
        </div>
            <div class="scrolling-panel">
                <h3>Get Started</h3>
                <h3>$45</h3>
                <p>Join the Club for exclusive pric- ing. See a new box each month and skip if it’s not for you.</p>
                <button class="btn btn-success"><small>Join the club + get refresh</small></button>
                <p>Want Refresh without joining?
                        Quick Buy for $55.</p>
            </div>
        <div class="row">
            <div class="col-md-8">
                <div class="para-intro">
                    <h1>REFRESH</h1>
                    <p>Time to toss the cheap plastic bags -- your dopp kit should be
                        as composed as the rest of your travel getup. Our friends at
                        Men’s Journal helped us bring back this classic. Get ready to
                        breathe new life into your bathroom cabinet and carry-on.</p>
                </div>
            </div>
            <div class="col-md-8">
                <div class="sm-content-list">
                    <ul class="ul-content-list">
                    <li>DOPP KIT<br>
                        <span class='doppkit-value'>10"X6"X4"</span></li>
                    <li>DOUBLE HITTER<br>
                        2-IN-1 SHAMPOO &<br>
                       ...

CSS

p {
    font-family: times;
    font-size: 15px;
}
#container {
    height: 400px;
    width: 650px;
    margin: 20px auto 35px auto;
    position: relative;
}
.main-container {
    margin: 40px 130px 40px 130px;
    border: solid black 1px;
}

#slider-img {
    height: 400px;
    width: 650px;
    position: absolute;
}
#left_holder {
    height: 400px;
    width: 100px;
    position: absolute;
    left: 0px;
    top: 0px;
}
#right_holder {
    height: 400px;
    width: 100px;
    position: absolute;
    right: 0px;
    top: 0px;

}
.left {
    height: 50px;
    width: 50px;
    position: absolute;
    top:40%;
    left: 0px;
}

.right {
    height: 50px;
    width: 50px;
    position: absolute;
    top:40%;
    right: 0px;
}

img#brand-logo {
    margin-top: 25px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    height: 12px;
    width:120px;

}

.para-intro {
    margin-left: 110px;

}
.para-intro h1 {
    margin-top: 0px;
}
.sm-content-list {
 background-color: rgb(240,240,234);
 margin-left: 110px;
 float: left;
 margin-right: 10px;
 margin-bottom: 10px;
}

ul.ul-content-list {

    list-style-type: none;
    margin: 0px;
    padding: 5px 8px 5px 8px;
}
.ul-content-list li {
    font-size: 8px;
    font-weight: 600
}
.dopp-kit {
    margin-left: 110px;
}
.dopp-kit h5 {
    margin-bottom: 2px;
    margin-top: 0px;
}
.tabbed-interface {
    background-color: blue;
    margin-top: 20px;
    margin-left: 110px;
    height: 250px;
    width: 450px;
}
.clickable-links a {
    text-align: center;
    display: inline-block;
    margin-left: 110px;
    color: rgb(204,204,204);
    hover: none;
}
.clickable-links {
    text-align: center;
    margin-top: 10px;
}
.changing-para {
    margin-left: 110px;
    margin-bottom: 20px;
    margin-top: 30px;

}
.media-objects {
    margin-left: 110px;
    margin-bottom: 30px;
}
.media-objects h3 {
    margin-bottom: 30px;
}
.media-objects p {
    font-size: 12px;
}

.scrolling-panel {
    background-color:...

JavaScript

$(document).ready(function() {
    var s = $(".scrolling-panel");
    var pos = s.position();
    $(window).scroll(function() {
      var windowpos = $(window).scrollTop();
          if (windowpos >= pos.top) {
              s.addClass("stick");
          } else {
              s.removeClass("stick");
            }
    });
});