JSFiddle - React, Tailwind, and code Playground

CSS

/* 
    Created on : 2013/05/10, 17:04:09
    Description:
        Purpose of the stylesheet follows.
*/
body{
    padding: 1em;
}
#menu{
    width: 12em;
    float: left;
}
.shop1{
    background-color: #AAEEEE;
    line-height:1.618em;
}

.shop2{
    background-color: #FFDDAA;
    line-height:1.618em;
}
td{
    padding: 0.5em;
    border: 1px solid #999;
}
div{
    margin: 1em;
}

.mobInfo{
    height: 7em;
}

.mobInfo ul{
    list-style: none;
}

li{
    line-height: 1.618em;
}

JavaScript

var obj = {
  "83" : {
    "id" : "83",
    "mid" : "5",
    "name" : "ディケイル",
    "shop" : "2",
    "price" : "6000",
    "mix" : "Y",
    "base" : "374",
    "sacriface" : "286"
  },
  "84" : {
    "id" : "84",
    "mid" : "6",
    "name" : "メルケラス",
    "shop" : "2",
    "price" : "15000",
    "mix" : "Y",
    "base" : "83",
    "sacriface" : "263"
  },
  "85" : {
    "id" : "85",
    "mid" : "7",
    "name" : "ルン=フィアレス",
    "shop" : "2",
    "price" : "25000",
    "mix" : "Y",
    "base" : "84",
    "sacriface" : "363"
  },
  "86" : {
    "id" : "86",
    "mid" : "8",
    "name" : "ゼラウラス",
    "shop" : "2",
    "price" : "50000",
    "mix" : "Y",
    "base" : "85",
    "sacriface" : "353"
  },
  "87" : {
    "id" : "87",
    "mid" : "9",
    "name" : "ペルソアティス",
    "shop" : "2",
    "price" : "70000",
    "mix" : "Y",
    "base" : "86",
    "sacriface" : "226"
  },
  "217" : {
    "id" : "217",
    "mid" : "",
    "name" : "リムドラ",
    "shop" : "0",
    "price" : "0",
    "mix" : "N",
    "base" : "N",
    "sacriface" : "N"
  },
  "218" : {
    "id" : "218",
    "mid" : "",
    "name" : "アースドラゴン",
    "shop" : "0",
    "price" : "0",
    "mix" : "N",
    "base" : "N",
    "sacriface" : "N"
  },
  "219" : {
    "id" : "219",
    "mid" : "1",
    "name" : "カミルドラゴン",
    "shop" : "0",
    "price" : "0",
    "mix" : "Y",
    "base" : "218",
    "sacriface" : "355"
  },
  "220" : {
    "id" : "220",
    "mid" : "",
    "name" : "シードラゴン",
    "shop" : "0",
    "price" : "0",
    "mix" : "N",
    "base" : "N",
    "sacriface" : "N"
  },
  "221" : {
    "id" : "221",
    "mid" : "2",
    "name" : "アクアドラゴン",
    "shop" : "0",
    "price" : "0",
    "mix" : "Y",
    "base" : "220",
    "sacriface" : "357"
  },
  "222" : {
    "id" : "222",
    "mid" : "",
    "name" : "ファイアドラゴン",
    "shop" : "0",
    "price" : "0",
    "mix" : "N",
    "base" : "N",
    "sacriface" : "N"
  },
  "223" : {
    "id" : "223",
    "mid" : "",
    "name" : "エグザグド",
    "shop" : "0",
   ...