JSFiddle - React, Tailwind, and code Playground

by jwpg018241

HTML

<div id="header">
  <br>
  <img src="https://www.balenciaga.com/on/demandware.static/-/Sites/default/dw983514c8/images/logo/BAL/logo.svg"/>
</div>
<div id="main">
	<div id="container">
    <div class="margin">
    <h1>MEN'S METAL T-SHIRT OVERSIZED IN BLACK</h1>
    <p>Metal T-Shirt Oversized in white vintage jersey</p>
    <hr>
    <h2>COLOR</h2>
    <span>•black<br>•white<br>•red<br>•blue<br>•gray</span>
    <hr>
    <h3>SIZE</h3>
    <span>•1<br>•2<br>•3</span>
    <hr>
    <h2>CHECK STORE AVAILABLITY</h2>
    <span>
      PRODUCT DETAILS<br>
    • Vintage jersey<br>
    • Unifit<br>
    • Oversize fit<br>
    • Crewneck<br>
    • Elbow sleeve length<br>
    • Metal artwork printed at front<br>
    • Paint spots on the bottom at front and back<br>
    • Washed-out effect<br>
    • Made in Portugal<br>
    • Cold machine wash<br>
    • Model is 185 cm / 6'06" and is wearing a size S<br>
    Material: 100% cotton<br>
    Product ID: 694576TMV889012
    </span>
    <hr>
    <h2>SUSTAINABILITY</h2>
    <p>Details: This product contains 100% organic cotton, grown without chemical fertilizers, pesticides or GMOs. This method of cultivation requires half as much water as conventional cotton on average, improves soil quality, and respects ecosystems and biodiversity. Organic cotton cultivation ensures better remuneration and working conditions for the growers.
      Our approach: We are committed to the sustainable and ethical management of our operations. The goal of reducing our environmental impact influences our decisions. At all levels and in all locales—whether at offices and stores or along the supply chain—we respect high standards for social and ecological responsibility. Balenciaga is also fur- and exotic leather-free. Read more ...</p>
  </div>
</div>
  <div class="imgArea">
    <img src="https://balenciaga.dam.kering.com/m/28dcfb91651fb2c4/Large-694576TMV889012_F.jpg?v=1"/>
    <img...

CSS

body {
    margin:0 0;
    padding:0;
    width:100%;
  }
  #header {
    background:#fff;
    height:50px;
    width: 100%;
    border-bottom: 1px solid #000;
  }
  #header img {
    height: 30%;
    margin-left: 30px;
  }
  #footer {
    border-top: 1px solid #000;
    background:#fff;
    height:400;
  }
  #main {
    background:gray;
    position: relative;
  }
  #container {
    background-color: #fff;
    height: auto;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 50%;
  }
  #container .margin {
    margin: 50px 40px;
  }
  .imgArea {
    background-color: #fff;
    height: auto;
    position: relative;
    left: 0px;
    top: 0px;
    width: 50%;
    border-right: 1px solid #000;
  }
  .imgArea img {
    width: 100%;
    border-bottom: 1px solid #000;
  }

JavaScript

jQuery(document).ready(function($){
	//variables
	var $window = $(window);
	var $container = $("#container");
	var $main = $("#main");
	var window_min = 0;
	var window_max = 0;
	var threshold_offset = 50;
	/*
	 set the container's maximum and minimum limits as well as movement thresholds
	*/
	function set_limits(){
		//max and min container movements
		var max_move = $main.offset().top + $main.height() - $container.height() - 2*parseInt($container.css("top") );
		var min_move = $main.offset().top;
		//save them
		$container.attr("data-min", min_move).attr("data-max",max_move);
		//window thresholds so the movement isn't called when its not needed!
		//you may wish to adjust the freshhold offset
		window_min = min_move - threshold_offset;
		window_max = max_move + $container.height() + threshold_offset;
	}
	//sets the limits for the first load
	set_limits();
	
	function window_scroll(){
		//if the window is within the threshold, begin movements
		if( $window.scrollTop() >= window_min && $window.scrollTop() < window_max ){
			//reset the limits (optional)
			set_limits();
			//move the container
			container_move();
		}
	}
	$window.bind("scroll", window_scroll);
	
	/**
	 * Handles moving the container if needed.
	**/
	function container_move(){
		var wst = $window.scrollTop();
		//if the window scroll is within the min and max (the container will be "sticky";
		if( wst >= $container.attr("data-min") && wst <= $container.attr("data-max") ){
			//work out the margin offset
			var margin_top = $window.scrollTop() - $container.attr("data-min");
			//margin it down!
			$container.css("margin-top", margin_top);
		//if the window scroll is below the minimum 
		}else if( wst <= $container.attr("data-min") ){
			//fix the container to the top.
			$container.css("margin-top",0);
		//if the window scroll is above the maximum 
		}else if( wst > $container.attr("data-max") ){
			//fix the container to the top
			$container.css("margin-top",...