JSFiddle - React, Tailwind, and code Playground

by yshrkn

HTML

<link rel="stylesheet" href="https://www.his-j.com/cmn/parts/css/parts.css">
<link rel="stylesheet" href="https://www.his-j.com/kaigai/impresso/css/style.css">
<link rel="stylesheet" href="https://www.his-j.com/cmn/css/common.css">
<div id="hisApp">
  <region-selection></region-selection>
  <grid></grid>
</div>

CSS

.grid-col3 {
  width: 33.33% !important; /* 見やすいように */
}

.region-selection {
  color: #fff;
  background: #555;
  padding: 10px;
  margin: 0 0 20px;
}

JavaScript

/* 実際には地域ごとに外部データのオブジェクトで用意 */

// kanto_data.js
const kantoData = {
	pickup: [
  	{
    	priceId: 'TI-KDC0002',
    	title: '【関東用】<br>クロアチア6日間',
      tags: [ '羽田空港発着' ],
      text: '世界遺産の街や大自然の絶景を巡る',
    	period: '2020年12月～2021年3月',
      img: 'https://e.his-j.com/images/area5/hrv/w472/dbv/dbv_dubrovnik01w472_k.jpg',
      link: 'example.com',
    },
    {
    	priceId: 'TI-KPF4010',
    	title: '【関東用】<br>ANA利用 モン・サン・ミッシェル＆パリ6日間',
      tags: [ '羽田空港発着' ],
      text: 'フランスの見どころを巡る',
    	period: '2021年1月～2021年3月',
      img: 'https://e.his-j.com/images/area5/fra/w472/b33/b33_mont-saint-michel18w472.jpg',
      link: 'example.com',
    },
  	{
    	priceId: 'TI-KVI2000',
    	title: '【関東用】<br>ベネチア・フィレンツェ・ローマ8日間',
      tags: [ '羽田空港発着' ],
      text: 'イタリア人気の3都市を巡る',
    	period: '2021年1月～2021年3月',
      img: 'https://e.his-j.com/images/area5/ita/w472/flr_city01w472_k.jpg',
      link: 'example.com',
    },
  ]
}

// kansai_data.js
const kansaiData = {
	pickup: [
  	{
    	priceId: 'TI-KDC0002',
    	title: '【関西用】<br>ドイツクリスマス紀行5日間',
      tags: [ '羽田空港発着' ],
      text: '5つのクリスマスマーケット',
    	period: '2020年12月～2021年3月',
      img: 'https://e.his-j.com/images/area5/deu/w472/fra/fra_xmas10w472.jpg',
      link: 'example.com',
    },
    {
    	priceId: 'TI-KPF4010',
    	title: '【関西用】<br>気軽にトルコ7日間',
      tags: [ '羽田空港発着' ],
      text: '5つの世界遺産を巡る旅',
    	period: '2021年1月～2021年3月',
      img: 'https://e.his-j.com/images/area6/tur/w472/pam/pam_Travertine04w472.jpg',
      link: 'example.com',
    },
  	{
    	priceId: 'TI-KVI2000',
    	title: '【関西用】<br>マドリード＆バルセロナ6日間',
      tags: [ '羽田空港発着' ],
      text: '人気3都市をコンパクトに周遊',
    	period: '2021年1月～2021年3月',
      img: 'https://e.his-j.com/images/area5/esp/w472/bcn_sagradafamilia01w472_k.jpg',
      link: 'example.com',
    },
  ]
}

// データ切り替え用オブジェクト。Ajaxで取ってくる際は必要なし
const data = {
	'tyo': kantoData,
  'kix': kansaiData,
}





/********************* Vueセクション *********************/

/* 地域選択 */
const...