JSFiddle - React, Tailwind, and code Playground

HTML

<html>

  <head>
    <link id="theme" rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.grey-.min.css">
  </head>

  <body>
    <div id="app">

      <!-- Material Design Header Code Start -->
      <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
        <header class="mdl-layout__header">
          <div class="mdl-layout__header-row">
            <span class="mdl-layout-title">Title</span>
            <div class="mdl-layout-spacer"></div>
            <nav class="mdl-navigation mdl-layout--large-screen-only">
              <a class="mdl-navigation__link" href="">Link</a>
              <a class="mdl-navigation__link" href="">Link</a>
              <a class="mdl-navigation__link" href="">Link</a>
              <a class="mdl-navigation__link" href="">Link</a>
            </nav>
          </div>
        </header>
      </div>
      <!-- Material Design Header Code End -->


      <center>Change Theme
        <select name="theme" @change="changetheme">
  <option v-for="(theme, index) in themes" :value="index">{{theme.color}}</option>
 
</select></center>

    </div>
  </body>

</html>

CSS

#app {}

select {
  margin-top: 50px;
  text-align: center;
  font-size: 14px;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    themes: [{
        color: 'blue',
        url: 'https://code.getmdl.io/1.3.0/material.light_blue-light_green.min.css'
      },
      {
        color: 'orange',
        url: 'https://code.getmdl.io/1.3.0/material.orange-yellow.min.css'
      },
      {
        color: 'purple',
        url: 'https://code.getmdl.io/1.3.0/material.deep_purple-red.min.css'
      },
      {
        color: 'pink',
        url: 'https://code.getmdl.io/1.3.0/material.pink-indigo.min.css'
      },
    ]
  },
  mounted() {
    document.querySelector('#theme').href = this.themes[0].url
  },
  methods: {
    changetheme(event) {
      let val = event.target.value
      document.querySelector('#theme').href = this.themes[val].url
    }
  }

});