JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/0.10.6/vue.js"></script>
<div id="changeItem" class="container">
    <div class="row">
         <h3>{{_title}}{{_version}}</h3>

        <p>変更したいアイテムを選んでください。パッチコードは自動的に出力されます。</p>
        <p>(ただし”なし”と選択したものはコードとして出力されません)</p>
        <hr />
        <div v-repeat="_boxes" v-on="click: updateCode">アイテムBOX{{$index+1}}番目：
            <select class="chosen-select">
                <option v-repeat="_items" value="{{yyyy}}">{{name}}</option>
            </select>
        </div>
    </div>
    <div class="row">
        <div>
             <h3>パッチコード</h3>

            <p>CYBER セーブエディター（3DS用）/v2のどちらでも使えます</p>
            <textarea cols="30" rows="40" id="codes"></textarea>
        </div>
         <h3>備考</h3>

        <ul>
            <li>変更コードは30個の欄までしか用意していませんが、使い勝手の意味で表示していません</li>
            <li>これ使ってセーブデータ壊れたり、不利益なことが起きても知りません。自己責任で使う方のみ使用してください。それ以外の人は使わないでください。知りません。</li>
            <li>元データは「大x頭」さん (No.6503)の方のデータです。勝手に利用してごめんちゃい。まずければ消します。</li>
            <li></li>
        </ul>
    </div>
</div>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
 .chosen-select {
    margin-top: 10px;
    width:300px;
}
.container {
    margin-top: 10px;
    margin-left: 10px;
}

JavaScript

var changeItem = new Vue({
    el: '#changeItem',
    data: {
        _title: "モンハン4G アイテム変更エディタ",
        _version: "v0.1",
        _boxes: new Array(30),
        _items: [{
            yyyy: '',
            name: 'なし'
        }, {
            yyyy: '0001',
            name: '0001 調合書①入門編'
        }, {
            yyyy: '0002',
            name: '0002 調合書②初級編'
        }, {
            yyyy: '0003',
            name: '0003 調合書③中級編'
        }, {
            yyyy: '0004',
            name: '0004 調合書④上級編'
        }, {
            yyyy: '0005',
            name: '0005 調合書⑤達人編'
        }, {
            yyyy: '0006',
            name: '0006 収納上手・技の書'
        }, {
            yyyy: '0007',
            name: '0007 収納上手・力の書'
        }, {
            yyyy: '0008',
            name: '0008 回復薬'
        }, {
            yyyy: '0009',
            name: '0009 回復薬グレート'
        }, {
            yyyy: '000A',
            name: '000A 栄養剤'
        }, {
            yyyy: '000B',
            name: '000B 栄養剤グレート'
        }, {
            yyyy: '000C',
            name: '000C 解毒薬'
        }, {
            yyyy: '000D',
            name: '000D 活力剤'
        }, {
            yyyy: '000E',
            name: '000E 強走薬'
        }, {
            yyyy: '000F',
            name: '000F 強走薬グレート'
        }, {
            yyyy: '0010',
            name: '0010 鬼人薬'
        }, {
            yyyy: '0011',
            name: '0011 鬼人薬グレート'
        }, {
            yyyy: '0012',
            name: '0012 怪力の丸薬'
        }, {
            yyyy: '0013',
            name: '0013 硬化薬'
        }, {
            yyyy: '0014',
            name: '0014 硬化薬グレート'
        }, {
            yyyy: '0015',
            name: '0015 忍耐の丸薬'
        }, {
            yyyy: '0016',
            name: '0016 クーラードリンク'
        }, {
            yyyy: '0017',
            name: '0017 ホットドリンク'
        }, {
            yyyy: '0018',
            name: '0018 消散剤'
        }, {
            yyyy: '0019',
            name: '0019 消臭玉'
        }, {
 ...