JSFiddle - React, Tailwind, and code Playground

by cheongjin kim

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div id="app">
  <ul id="tree1" class="tree"></ul>
  <ul id="tree2" class="tree"></ul>
  <ul id="tree3" class="tree"></ul>
</div>

CSS

#app {
  width:600px;
  height:400px;
  background-color:#DDDDDD;
}

ul {
  list-style-type: none;
  -webkit-margin-before: 0;
  -webkit-margin-after: 0;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 0;
}

.wrap {
  width:100%;
  height:100%;
  overflow: scroll;
}

.tree {
  width:33%;
  height:100%;
  background-color:white;
  float:left;
  border:1px solid #B5B5B5;
}

ul > li:hover {
  background-color:red;
  color:white;
}

JavaScript

var list = [
    {
        name: '수도권',
        list: [
            {
                name: '1호선',
                list: [
                    {
                    	name: '인천역'
                    },
                    {
                    	name: '신도림역'
                    },
                    {
                    	name: '용산역'
                    },
                    {
                    	name: '서울역'
                    }
                ]
            },
            {
                name: '2호선',
                list: [

                ]
            },
            {
                name: '3호선',
                list: [

                ]
            }
        ]
    },
    {
        name: '인천',
        list: [
            {
                name: '1호선',
                list: [
                    {
                    	name: '주안역'
                    },
                    {
                    	name: '가좌역'
                    },
                    {
                    	name: '가정중앙시장역'
                    },
                    {
                    	name: '검암역'
                    }
                ]
            },
            {
                name: '2호선',
                list: [

                ]
            }
        ]
    },
    {
        name: '대구',
        list: [
            {
                name: '1호선',
                list: [
                    {
                    	name: '몰라'
                    }
                ]
            },
            {
                name: '2호선',
                list: [
                    {
                    	name: '몰라 두번째'
                    }
                ]
            },
            {
                name: '3호선',
                list: [
                    {
                    	name: '진짜몰라'
                    }
                ]
            },
            {
                name: '4호선',
                list: [
                    {
                    	name: '몰라'
                    }
                ]
...