JSFiddle - React, Tailwind, and code Playground

by CommandLineDesign

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class='fluid-container'>

  <div class="col-md-12">
    <div class="col-md-9">
      <div id="product-700TDSOCOP-options"></div>
    </div>
    <div class="col-md-3">
      <div id="700TDSOCOP-sidebar" class="sidebar"></div>
    </div>
     <div class="col-md-12 pid">
     <input type="text" name="pid-input" id="pid-input" value="700TDSOCOPV08OZ">
      <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;
}

JavaScript

// ::::::::::::::::::::::::::::::::::::::::::::::: Sample JSON :::::::::::::::::::::::::::::::::::::::::::::::

var product = {
  ParentId: '700TDSOCOP',
  name: 'SoCo Pendant Light',
  attributeKey: {
    0: {
      name: 'Socket',
      len: 1
    },
    1: {
      name: 'Length',
      len: 2
    },
    2: {
      name: 'Color',
      len: 1
    },
    3: {
      name: 'Finish',
      len: 1
    }
  },
  attributes: {
    Socket: {
      V: {
        name: 'Vintage',
        image: 'http://i.imgur.com/abppeBG.png',
        Length: {
          '08': {
            name: '8ft',
            order: 1,
            price: 0,
            image: 'http://images.lumens.com/is/image/Lumens/lighting/SoCo%20Vintage%20Socket%20Pendant/uu471440_8-feet?$Lumens.com-75$',
            Color: {
              B: {
                name: 'Black',
                image: 'http://images.lumens.com/is/image/Lumens/lighting/SoCo%20Vintage%20Socket%20Pendant/uu471440_Black?$Lumens.com-75$',
                Finish: {
                  S: {
                    name: 'Satin Nickel',
                    image: 'http://images.lumens.com/is/image/Lumens/lighting/SoCo%20Vintage%20Socket%20Pendant/uu471440_Satin-Nickel?$Lumens.com-75$',
                    PID: '700TDSOCOPV08BS',
                    availability: 'Ships in 1-2 weeks',
                    price: '$91.20'
                  },
                  Z: {
                    name: 'Antique Bronze',
                    image: 'http://images.lumens.com/is/image/Lumens/lighting/SoCo%20Vintage%20Socket%20Pendant/uu471440_Antique-Bronze?$Lumens.com-75$',
                    PID: '700TDSOCOPV08BZ',
                    availability: 'Ships in 3-4 weeks',
                    price: '$91.20'
                  }
                }
              },
              O: {
                name: 'Orange',
                image: 'http://images.lumens.com/is/image/Lumens/lighting/SoCo%20Vintage%20Socket%20Pendant/uu471440_Orange?$Lumens.com-75$',
             ...