JSFiddle - React, Tailwind, and code Playground

by shamaleyte

HTML

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css">
<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>




<div id="app">
 

  <v-app id="inspire">
    <v-card
            color="blue-grey darken-1"
            dark
            :loading="isUpdating"
            >

      <v-form>
        <v-container>
          <v-row>


            <v-col cols="12">
              <v-autocomplete
                              v-model="friends"
                              :disabled="isUpdating"
                              :items="people"
                              filled
                              chips
                              color="blue-grey lighten-2"
                              label="Select"
                              item-text="name"
                              item-value="name"
                              multiple
                              >
                
                <template v-slot:selection="data">
                  
                  <v-chip
                          v-bind="data.attrs"
                          :input-value="data.selected"
                          close
                          @click="data.select"
                          @click:close="remove(data.item)"
                          >                   
                    {{ data.item.name }}
                  </v-chip>
                  
                  
                  
                </template>

                
               ...

JavaScript

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      autoUpdate: true,
      friends: [],
      isUpdating: false,
      name: 'Midnight Crew',
      people: [
      { header: 'Africa' },
      { name: 'Ägypthen', group: 'Africa' },
      { name: 'Algerien', group: 'Africa' },
      { name: 'Angola', group: 'Africa' },
      { name: 'Äquatorialguinea', group: 'Africa' },
      { name: 'Äthiopien', group: 'Africa' },
      { name: 'Benin', group: 'Africa' },
      { name: 'Botswana', group: 'Africa' },
      { name: 'Burkina Faso', group: 'Africa' },
      { name: 'Burundi', group: 'Africa' },
      { name: 'Dschibuti', group: 'Africa' },
      { name: 'Elfenbeinküste', group: 'Africa' },
      { name: 'Eritrea', group: 'Africa' },
      { name: 'Gabun', group: 'Africa' },
      { name: 'Gambia', group: 'Africa' },
      { name: 'Ghana', group: 'Africa' },
      { name: 'Guinea', group: 'Africa' },
      { name: 'Guinea-Bissau', group: 'Africa' },
      { name: 'Kamerun', group: 'Africa' },
      { name: 'Kap Verde', group: 'Africa' },
      { name: 'Kenia', group: 'Africa' },
      { name: 'Komoren', group: 'Africa' },
      { name: 'Kongo', group: 'Africa' },
      { name: 'Lesotho', group: 'Africa' },
      { name: 'Libanon', group: 'Africa' },
      { name: 'Liberia', group: 'Africa' },
      { name: 'Libyen', group: 'Africa' },
      { name: 'Madagaskar', group: 'Africa' },
      { name: 'Malawi', group: 'Africa' },
      { name: 'Mali', group: 'Africa' },
      { name: 'Marokko', group: 'Africa' },
      { name: 'Mauretanien', group: 'Africa' },
      { name: 'Mauritius', group: 'Africa' },
      { name: 'Mosambik', group: 'Africa' },
      { name: 'Namibia', group: 'Africa' },
      { name: 'Niger', group: 'Africa' },
      { name: 'Nigeria', group: 'Africa' },
      { name: 'Ruanda', group: 'Africa' },
      { name: 'Sambia', group: 'Africa' },
      { name: 'Sao Tome und Principe', group: 'Africa' },
      { name: 'Senegal',...