JSFiddle - React, Tailwind, and code Playground

by Juan Kristoffer Sanio

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.0/index.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
<div class="row" id="os_container"></div>

CSS

.other_service {
  background: #eee;
  padding: 20px;
  text-align: center;
  min-height: 160px;
  border: 8px solid #fff;
}

.other_service header {
  display: block;
  font-weight: bold;
}

.other_service p {
  display: none;
}

.opt_serv_price {
  display: inline-block;
  color: #018738;
  font-weight: bold;
  font-size: 1.5em;
  margin: 10px;
}

.opt_serv_dropdown {
  box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 80%;
  background: #f3f3f3;
  height: 25px;
  left: 10%;
  overflow: hidden;
}

.opt_serv_dropdown.selected {
  max-height: calc(25px * 4);
}

.opt_serv_dropdown:before {
  content: '\f0d7';
  font-family: FontAwesome;
  position: absolute;
  right: 8%;
  top: 3px;
}

.opt_serv_dropdown:focus {
  height: calc(25px * 5);
  outline: 0;
}

.opt_serv_dropdown li {
  height: 25px;
  line-height: 25px;
  background: #fafafa;
  border: 1px solid #CCC;
  border-bottom: 0;
}

.opt_serv_dropdown li:first-child {
  background-color: #fff;
  font-size: 0.8em;
  color: #AAA;
  border: none;
}

.opt_serv_dropdown li:last-child {
  border-bottom: 1px solid #CCC;
}

.opt_serv_dropdown li.selected {
  position: absolute;
  top: 0px;
  width: 100%;
  pointer-events: none
}

JavaScript

'use strict';

var opsvTmpl = {
  "Coordination": {
    "price": "0.0",
    "description": "",
    "variants": [{
      "ppid": "98",
      "vName": "13",
      "lstPrice": "0.0"
    }, {
      "ppid": "99",
      "vName": "25",
      "lstPrice": "0.0"
    }, {
      "ppid": "100",
      "vName": "30",
      "lstPrice": "0.0"
    }, {
      "ppid": "101",
      "vName": "56",
      "lstPrice": "0.0"
    }]
  },
  "Consultation": {
    "price": "0.0",
    "description": "",
    "variants": [{
      "ppid": "102",
      "vName": "13",
      "lstPrice": "0.0"
    }, {
      "ppid": "103",
      "vName": "25",
      "lstPrice": "0.0"
    }, {
      "ppid": "104",
      "vName": "30",
      "lstPrice": "0.0"
    }, {
      "ppid": "105",
      "vName": "56",
      "lstPrice": "0.0"
    }]
  },
  "Implementation": {
    "price": "0.0",
    "description": "",
    "variants": [{
      "ppid": "94",
      "vName": "13",
      "lstPrice": "99.99"
    }, {
      "ppid": "95",
      "vName": "25",
      "lstPrice": "0.0"
    }, {
      "ppid": "96",
      "vName": "30",
      "lstPrice": "0.0"
    }, {
      "ppid": "97",
      "vName": "56",
      "lstPrice": "0.0"
    }]
  },
  "Training": {
    "price": "0.0",
    "description": "",
    "variants": [{
      "ppid": "106",
      "vName": "13",
      "lstPrice": "0.0"
    }, {
      "ppid": "107",
      "vName": "25",
      "lstPrice": "0.0"
    }, {
      "ppid": "108",
      "vName": "30",
      "lstPrice": "0.0"
    }, {
      "ppid": "109",
      "vName": "56",
      "lstPrice": "0.0"
    }]
  }
};

(function() {
  var __myglobal = {};
  var ServiceTypes = Object.keys(opsvTmpl);
  var osvArray = [];

  var OsLi = React.createClass({
    displayName: 'OsLi',

    propTypes: {
      variant: React.PropTypes.object
    },
    render: function render() {
      var cls = classNames({
        'selected': this.props.index === this.props.active
      });
      return React.createElement(
        'li', {
          onClick:...