JSFiddle - React, Tailwind, and code Playground

by CommandLineDesign

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <div class='fluid-container'>
    <div class="col-md-12">
      <div class="col-md-3">
        <div id="tech-lighting-soco-pendant-light-sidebar" class="sidebar"></div>
      </div>
      <div class="col-md-9">
        <div id="tech-lighting-soco-pendant-light-options"></div>
      </div>
      <div class="col-md-12">
        <div id="tech-lighting-soco-pendant-light-SKUInfo" class="SKUInfo"></div>
      </div>
       <div class="col-md-12 pid">
       <input type="text" name="pid-input" id="pid-input" value="10071530">
       <input type="text" name="Quantity" id="tech-lighting-soco-pendant-light-quantity" value="1">
        <button id="pid-submit">select pid</button><button id="reset-button">reset</button>
      </div>
    </div>
  </div>

CSS

li {
  display: inline-block;
  margin-left: 4px;
  margin-bottom: 4px;
  height: 82px;
  width: 82px;
  border: 1px solid gray;
  vertical-align: top;
  background-color: white;
}
li img{
  margin: auto;
  max-height: 80px;
  max-widgth: 80px;
  display: block;
}
li span{
  display: block;
  margin-top: 8px;
}

.active {
  text-decoration: underline;
  cursor: pointer;
}

.inactive {
  color: gray;
  text-decoration: none;
  opacity: 0.5;
}

.selected {
  font-weight: bold;
  border: 1px solid red;
}

div.sidebar div span img{
  max-height: 80px;
  max-width: 80x;
}

div.pid{
  margin-top: 50px;
  display: block;
}

div.product-option b{
  display: block;
}

JavaScript

'use strict';
var product = {"parentId":"tech-lighting-soco-pendant-light","name":"SoCo Pendant Light","on_sale":false,"price":91.2,"sale_price":0,"attributeKey":[{"name":"Socket","id":"6070423"},{"name":"Cord Length","id":"6070424"},{"name":"Cord Color","id":"6070425"},{"name":"Socket Finish","id":"6070426"}],"attributes":{"6070423":{"8196884":{"name":"Modern","image":"","rank":0,"oprice":0,"sale_oprice":0,"6070424":{"8196885":{"name":"8 ft.","image":"http://yliving.yytlws.com/lib/10155-uu471483_8-feet.jpg","rank":0,"oprice":0,"sale_oprice":0,"6070425":{"8196888":{"name":"Black","image":"http://yliving.yytlws.com/lib/10011-uu280777_Black.jpg","rank":0,"oprice":0,"sale_oprice":0,"6070426":{"8196896":{"name":"Satin Nickel","image":"http://yliving.yytlws.com/lib/10042-uu280961_Satin-Nickel.jpg","rank":0,"oprice":0,"sale_oprice":0,"iPID":"tech-lighting-soco-pendant-light-8196884-8196885-8196888-8196896","PID":"9330196","price":91.2},"8196898":{"name":"Antique bronze","image":"http://yliving.yytlws.com/lib/10042-uu280961_Antique-Bronze.jpg","rank":2,"oprice":0,"sale_oprice":0,"iPID":"tech-lighting-soco-pendant-light-8196884-8196885-8196888-8196898","PID":"9330197","price":91.2},"8248201":{"name":"Chrome","image":"http://yliving.yytlws.com/lib/10042-uu280961_Chrome.jpg","rank":4,"oprice":0,"sale_oprice":0,"iPID":"tech-lighting-soco-pendant-light-8196884-8196885-8196888-8248201","PID":"10071474","price":91.2},"8248202":{"name":"Gold","image":"http://yliving.yytlws.com/lib/10042-uu12528_Gold.jpg","rank":6,"oprice":0,"sale_oprice":0,"iPID":"tech-lighting-soco-pendant-light-8196884-8196885-8196888-8248202","PID":"10071522","price":91.2},"8248203":{"name":"Copper","image":"http://yliving.yytlws.com/lib/10012-uu471483_Copper.jpg","rank":8,"oprice":0,"sale_oprice":0,"iPID":"tech-lighting-soco-pendant-light-8196884-8196885-8196888-8248203","PID":"10071570","price":91.2},"8196895":{"name":"Black (Modern socket...