<div id="vueTest" class="container">
  <h1>たむ語メーカー</h1>
  <input type="text" placeholder=
"好きなセリフを入れてみよう！" v-model='talking'>
  <div class="balloon" v-bind:class="{taboo:taboo.indexOf(talking) >= 0}">
    <span v-if="talking&&taboo.indexOf(talking) == -1">{{talking+"たむぅ！"}}</span>
    <span v-if="taboo.indexOf(talking) >= 0">{{talking+"？そんなことを言う人は許さないたむ！"}}</span>
  </div>
  <img src="https://myscreate.com/wp-content/themes/mycreate/common/img/tamtam_footer.svg" alt="mogitan">
</div>

@import url('https://fonts.googleapis.com/css?family=Kosugi+Maru');

$colorPtn : #f24c3a;

* {
  box-sizing : border-box;
}

body {
  font-family: 'Kosugi Maru', sans-serif;
}

.container {
  width : 400px;
  margin : 0 auto;
  text-align : center;
  h1 {
    position : relative;
    display : inline-block;
    margin : 1em 0 0 0;
    &:after {
      content : "";
      position : absolute;
      bottom : -0.3em;
      left : 0;
      width : 100%;
      height : 4px;
      border-radius : 2px;
      background-color : $colorPtn;
    }
  }
  input {
    width : 100%;
    margin : 2em 0;
    padding : 0.5em;
    border-radius : 3px;
    font-size : 1em;
    border : 1px solid #cacaca;
  }
  .balloon {
    width : 100%;
    position : relative;
    padding : 3em;
    color : #fff;
    word-break : break-all;
    border-radius : 5px;
    background-color : $colorPtn;
    &:after {
      content : "";
      position : absolute;
      bottom : -10px;
      right : 30%;
      border-top: 10px solid $colorPtn;
      border-right: 9px solid transparent;
      border-left: 9px solid transparent;
    }
  }
  .taboo {
    color : #303030;
  }
  img {
    position :relative;
    top : -2em;
    width : 100px;
  }
}

var vueTest = new Vue({
  el : "#vueTest",
  data : {
    talking : "",
    taboo : ["殺す","死ね","バカ","アホ"],
  }
})