JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header"></div>
<!--close all header portion-->
<div class="container">
 
                <!-- Left Column---Tea Images -->
                <div class="columnleft">
                  <img data-image="oolong" src="https://noychat.github.io/Folia-Website/oolongbig.png" alt=" Big Oolong Can">
                  <img data-image="chamomile" src="https://noychat.github.io/Folia-Website/chamomilebig.png" alt="Big Chamomile Can">
                  <img data-image="green" class="active" src="https://noychat.github.io/Folia-Website/greenteabig.png" alt="Big Green Tea Can">
                  <img data-image="small" class="active" src="https://noychat.github.io/Folia-Website/foliasmall.png" alt="Small Example Can">
                  <img data-image="big"  src="https://noychat.github.io/Folia-Website/foliabig.png" alt="Big Example Can">

                  <img data-image1="small_chamomile"  src="https://noychat.github.io/Folia-Website/chamomilesmall.png" alt="Small Chamomile Can">
                  <img data-image1="small_oolong"  src="https://noychat.github.io/Folia-Website/oolongsmall.png" alt="Small Oolong Can">
                  <img data-image1="small_green"  src="https://noychat.github.io/Folia-Website/greenteasmall.png" alt="Small Green Tea Can">
                  
                  
                </div>
               
               
                <!-- Right Column -->
                <div class="columnright">
               
                  <!-- Product Description -->
                  <div class="product-description">
                    <span>Folia Tea Collection</span>
                    <h1>Signature Teas</h1>
                    <p>We source our tea leaves from around the world. Try our many selections of teas and you will taste the difference.</p>
                  </div>
               
                  <!-- Product Configuration -->
                  <div class="product-configuration">



                     <!-- Tea Size -->
               ...

CSS

/* Basic Styling */
   
  .container {
    width: 1200px;
    top: 300px;
    left: 50px;
    padding: 15px;
    display: flex;
    position: absolute;
  }

  /* Columns */
.columnleft {
    width: 220%;
    position: relative;
    margin-left: 30px;
  }
   
  .columnright {
    width: 120%;
    top: 10px;
    margin-left: 80px;
    display: block;
  }


  /* Left Column */
.columnleft img {
    width: 100%;
    position: absolute;
    opacity: 0;
    transition: all 0.3s ease;
  }
   
  .columnleft img.active {
    opacity: 1;
  }


  /* Product Description */
.product-description {
    border-bottom: 1px solid #E1E8EE;
    margin-bottom: 20px;
  }






  /* Product Color */
.tea-type {
    margin-bottom: 30px;
  }
   
  .choosetea div {
    display: block;
    margin-top: 10px;
  }
  .label{
    width: 150px;
    float: left;
    text-align: left;
    padding-right: 9px;
}
  .choosetea  input {
    display: none;
  }
   
  .choosetea  input+ label span {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin: -1px 4px 0 0;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 50%;
  }
   
  .choosetea  input + label span {
    border: 4px solid RGB(94, 94, 76)
  }
   
  .choosetea  input#green + label span {
    background-color: #90978b;
 
  }
  .choosetea  input#chamomile + label span {
    background-color: #ffd4a1;
  }
  .choosetea  input#oolong + label span {
    background-color: #948e9e;
  }
   
  .choosetea  input:checked + label span {
    background-image: url(check-icn.svg);
    background-repeat: no-repeat;
    background-position: center;
  }



/* SIZE */
.tea-type {
    margin-bottom: 30px;
  }
   
  .choosesize div {
    display: block;
    margin-top: 10px;
  }
  .label{
    width: 100px;
    float: left;
    text-align: left;
    padding-right: 9px;
}
  .choosesize  input {
    display: none;
  }
   
  .choosesize  input+ label span {
    display: inline-block;
    width: 40px;
    height: 40px;
    margin:...

JavaScript

src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"
charset = "utf-8" >

  $(document).ready(function() {

    $('.choosetea input').on('click', function() {
      var teatype = $(this).attr('data-image');

      $('.active').removeClass('active');
      $('.columnleft img[data-image = ' + teatype + ']').addClass('active');
      $(this).addClass('active');
    });

    $('.choosesize input').on('click', function() {
      var teatype = $(this).attr('data-image');

      $('.active').removeClass('active');
      $('.columnleft img[data-image = ' + teatype + ']').addClass('active');
      $(this).addClass('active');
    });




    //local storage color
    var radios = document.getElementsByName("color");
    var val = localStorage.getItem('color');
    for (var i = 0; i < radios.length; i++) {
      if (radios[i].value == val) {
        radios[i].checked = true;
      }
    }
    $('input[name="color"]').on('change', function() {
      localStorage.setItem('color', $(this).val());

    });


    //local storage size
    var radios = document.getElementsByName("size");
    var val = localStorage.getItem('size');
    for (var i = 0; i < radios.length; i++) {
      if (radios[i].value == val) {
        radios[i].checked = true;
      }
    }
    $('input[name="size"]').on('change', function() {
      localStorage.setItem('size', $(this).val());

    });





    // add the value of the added radio boxes in the text box
    $('.radios1').change(function(e) {
      var selectedValue = parseInt($(this).val());
      selectedValue += parseInt($(".radios2").val());
      $('#amount').val('$' + selectedValue)

    });

    //add to cart

  });



const sizeSelector = 'input:radio[id=small]';
const colorSelector = 'input:radio[id=green]';
const cartSelector = 'button[name=cart]';

$(function() {

  $(`${cartSelector}`).click(() => {
    validityCheck();
  });



  const SMALL = 20;
  const GREEN = 0;
  const CARTBUTTON = 5;

  function...