JSFiddle - React, Tailwind, and code Playground

by understore

HTML

<script src="https://unpkg.com/understore@latest/dist/understore.min.js"></script>
<section class="app">
  <section class="main">
    <article class="product_list">
      <header class="header">
        <h1>Movie</h1>
      </header>
      <div class="stauts"></div>	
      <div class="area"></div>
    </article>

    <article class="cart_list">
      <header class="header">
        <h1>cart</h1>
      </header>
      <div class="stauts"></div>	
      <div class="area"></div>
    </article>
  </section>	
</section>


<script id="productTpl" type="template">
		<product>
			<div class="image">
				<img src="{ this.img }" alt="thumbnail">
  </div>
			<div class="txt">
				<div class="title">
					<strong>{ this.date }</strong> <span>{ this.title }</span> <i>{ this.score }</i>
  </div>	
				<div class="prices">
					<span>{ this.price }</span>
					<span>{ this.rent_price }</span>
  </div>
				<span>{ this.type }</span>
				<span>예매 가능 좌석 <span>{ this.amount }</span></span>
				<button @click="addCart" class="{ this.soldout }">추가</button>
  </div>
  </product>
</script>


<script id="cartTpl" type="template">
		<cart>
			<div class="image">
				<img src="{ this.img }" alt="thumbnail">
  </div>
			<div class="txt">
				<div class="title">
					<span>{ this.title }</span>
  </div>	
				<div class="prices">
					<span>{ this.price }</span>
  </div>
				<span>표 : <span>{ this.amount }</span>장</span>
				<button @click="decCart">감소</button>
  </div>
  </cart>
</script>

CSS

[class*='_list'] .area{overflow:hidden;}
.app{margin:20px auto; width:640px;}
.cart_list{position: absolute; top:0; left:50%; margin-left: 340px;}

product {
	position: relative;
	float: left;
	width: 200px;
}
product+product {
	margin-left: 20px;
}
product .txt {
	position: absolute;
	padding: 15px;
	left: 0px;
	bottom: 0px;
	width: 100%;
	z-index: 1;
	box-sizing: border-box;
}
product .txt * {
	color: rgb(255, 255, 255);
}
product .txt strong {
	display: block;
}
product .txt button {
	display: block;
	margin-top: 10px;
	padding: 5px 0px;
	border: 0px;
	width: 100%;
	font-size: 13px;
	background-color: rgb(255, 255, 255);
	color: rgb(0, 0, 0);
}
product .txt button.disabled {
	font-size: 0px;
}
product .txt button.disabled::after {
	content: "매진";
	font-size: 13px;
}
product .txt [_type] {
	display: block;
}
product .txt [_rent_price] {
	display: none;
}
product .image img {
	display: block;
	width: 100%;
}
product::after {
	content: "";
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
}

cart {
	display: block;
	position: relative;
	overflow: hidden;
	width: 150px;
	height: 150px;
}
cart .txt {
	position: absolute;
	padding: 15px;
	left: 0px;
	top: 0px;
	width: 100%;
	z-index: 1;
	box-sizing: border-box;
}
cart .txt * {
	color: rgb(255, 255, 255);
}
cart .txt strong {
	display: block;
	word-break: keep-all;
}
cart .txt button {
	position: absolute;
	right: 10px;
	bottom: 10px;
	color: rgb(0, 0, 0);
}
cart .image img {
	display: block;
	width: 100%;
}
cart::after {
	content: "";
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
}

JavaScript

var movie_data = [
	{
		title : "닥터 스트레인지",
		img : "https://lh3.googleusercontent.com/-ZXqAxJg8FsgOI3990sOWfSq3ERqH8FjddmJQ-X6wDj5tjVX7flU6xvPoxKiWIfiEn0",
		price : 12000,
		type: "action",
		rent_price : 0,
		date : "2016-10",
		score : 4.5,
		soldout : "",
		amount : 50
	},
	{
		title : "캡틴 아메리카 : 시빌 워",
		img : "https://lh3.googleusercontent.com/gBEeijFoj2N1g9Gf6cgPEE6GP3sLLFGlvlB1YmoiLgOLri1vfF6Hi90zj_nmwR7AYCe7SA=w200-h300",
		price : 14000,
		type: "action",
		rent_price : 0,
		date : "2016-04",
		score : 4.5,
		soldout : "",
		amount : 3
	},
	{
		title : "어벤져스: 에이지 오브 울트론",
		img : "https://lh3.googleusercontent.com/3HCwMVjdnRaUcWOoCh_eF2bQ5X6rfRxc21n7Y5FOfPycXOqnFQNGe-aEj2scezSvXEc",
		price : 10000,
		type: "action",
		rent_price : 0,
		date : "2015-04",
		soldout : 4.5,
		state : "",
		amount : 15
	}	
];



var addToCart = function(e){
console.log(e);
	var item_bool = e.data.amount > 0;
	var key = e.id+"-"+e.idx;
	var id = "cart"+e.idx;
	var cart_item;

	if(item_bool){
		var data = JSON.stringify(e.data);
			data = JSON.parse(data);

		if(e.data.child){
			var item = _.getItem(e.data.child);
			var item_data;
			item_data = item.data ? item.data : undefined;   
		}

		if(item_data){
			item_data.amount = item_data.amount + 1;

			_.setItem({
				id : e.data.child.id,
				data : item_data,
				parent : {
					id : e.id,
					idx : e.idx
				}
			});
		}else{
			data.amount = 1;
			var obj = _.addItem({
				id : id, 
				template : document.querySelector("#cartTpl").innerHTML,
				target : document.querySelector(".cart_list .area"),
				css : "/cart.css",
				events : {
					decCart : decToCart
				},
        //sync : true,
				data : data,
				parent : {
					id : e.id,
					idx : e.idx
				},
			});
			e.data.child = obj;
		}

		e.data.amount = e.data.amount - 1;
		e.data.amount == 0 ? e.data.soldout = "disabled" : e.data.soldout = "";

		_.setItem({
			id : e.id,
			idx : e.idx,
			data : e.data
		});
	}
};

var decToCart =...