Vuetify

index.html

<div id="app">
  <v-app>
    <v-content>
      <v-container grid-list-sm>
        <v-layout row wrap>
          <v-flex md9 xs8 offset-xs2 v-for="letter in this.string">
            <v-card elevation="18" color="transparent" hover>
              <v-card-text id='letters' class="text-xs-center headline">
                {{letter}}
              </v-card-text>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container> 
    </v-content>
  </v-app>
</div>

script.js

new Vue({
  el: "#app",
  data: () => ({
    string: [
      "あ",
      "ぶ",
      "で",
      "ふ",
      "ぐ",
      "ほ",
      "ゆ",
      "じ",
      "る",
      "む",
      "の,",
      "ぷ",
      "る",
      "す",
      "つ",
      "ゔ",
      "わ",
      "く",
      "す",
      "ゆ"
    ]
  })
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.0.15/vuetify.min.js"></script>

style.scss

#app {
  background: #8a2387; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #f27121,
    #e94057,
    #8a2387
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #f27121,
    #e94057,
    #8a2387
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

#letters {
  transition: all ease-in-out 0.4s;
  &:hover {
    color: white;
    transform: scale(1.1) 
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" />
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css" rel="stylesheet" />

vuetify.markdown

Vuetify

A Pen by itamar on CodePen.

License.