JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
	<div id="app">
		<h1 class="tit">Schedule</h1>
		<p class="auther">Author Jayzou, modified by Vytaly Arkhipov</p>
		<Schedule 
				:color="[
				'#2B2E4A',
				'#521262',
				'#903749',
				'#53354A',
				'#40514E',
				'#537780',
			]" 
>
		</Schedule>
	</div>

CSS

/* http://meyerweb.com/eric/tools/css/reset/ 
		   v2.0 | 20110126
		   License: none (public domain)
		*/
		html, body, div, span, applet, object, iframe,
		h1, h2, h3, h4, h5, h6, p, blockquote, pre,
		a, abbr, acronym, address, big, cite, code,
		del, dfn, em, img, ins, kbd, q, s, samp,
		small, strike, strong, sub, sup, tt, var,
		b, u, i, center,
		dl, dt, dd, ol, ul, li,
		fieldset, form, label, legend,
		table, caption, tbody, tfoot, thead, tr, th, td,
		article, aside, canvas, details, embed, 
		figure, figcaption, footer, header, hgroup, 
		menu, nav, output, ruby, section, summary,
		time, mark, audio, video {
			margin: 0;
			padding: 0;
			border: 0;
			font-size: 100%;
			font: inherit;
			vertical-align: baseline;
		}
		/* HTML5 display-role reset for older browsers */
		article, aside, details, figcaption, figure, 
		footer, header, hgroup, menu, nav, section, main {
			display: block;
		}
		body {
			line-height: 1;
		}
		ol, ul {
			list-style: none;
		}
		blockquote, q {
			quotes: none;
		}
		blockquote:before, blockquote:after,
		q:before, q:after {
			content: '';
			content: none;
		}
		table {
			border-collapse: collapse;
			border-spacing: 0;
		}

		body {
		  font-size: 1.6rem;
		  font-family: "Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
		  color: #222222;
		  background-color: white;
		}
		.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}
	
		.tit{
			text-align: center;
			font-size: 4rem;
			margin-top: 4rem;
		}
		.auther{
			font-size: 2rem;
			text-align: center;
			margin-top: 1.5rem;
			margin-bottom: 4rem;
			color: #95a5a6;
		}
    
   ...

JavaScript

Vue.config.debug = true;
Vue.config.silent = false;
Vue.config.async = false;
Vue.config.devtools = true;

modal = Vue.component('Modal', {
		props: {
			show: {
				type: Boolean,
				default: false
			},
			showModalDetail: {
				type: Object,
				default(){}
			},
		},
    template:'\
    	<div class="modal-mask" v-show="show" transition="modal" v-on:click="close">\
	    <div class="modal-wrapper">\
	      <div class="modal-container" :style="{\'backgroundColor\': showModalDetail.styleObj.backgroundColor}">\
	        <div class="modal-header">\
	          <a class="close" @click="show = false">X</a>\
	        </div>\
	        <div class="modal-body">\
	        	<h2>{{showModalDetail.title}}</h2>\
	        	<small>{{showModalDetail.week}}  {{showModalDetail.dateStart}} - {{showModalDetail.dateEnd}}</small>\
	        	<p>{{showModalDetail.detail}}</p>\
	        </div>\
	      </div>\
	    </div>\
	</div>\
    ', 
		methods: {
			close(e) {
				if(e.target.className == "modal-wrapper") this.show = false;
				// console.log(e);
				// console.log(e.target.className)
			}
		}
})

schedule = Vue.component('Schedule', {
	props: {
		timeGround: {
    	type: Array,
   		default: function () {
             return [
						"09:00",
						"10:00",
						"11:00",
						"12:00",
						"13:00",
						"14:00",
						"15:00",
						"16:00",
						"17:00",
						"18:00",
					]
        }
		},
		weekGround: {
			type: Array,
				default: function () {
             return [
				'Monday',
				'Tuesday',
				'Wednesday',
				'Thursday',
				'Friday'
			]
     }
		},
		taskDetail: {
			type: Array,
			default: []
		},
		color: {
			type: Array,
			default(){
				return [
					"#2B2E4A",
					"#521262",
					"#903749",
					"#53354A",
					"#40514E",
					"#537780",
				]

			}
		}
	},
	
	template:'\
	<div class="schedule">\
	<div class="time-ground">\
		<ul>\
			<li v-for="time in timeGround">\
				<span>{{time}}</span>\
				<p...