JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.js"></script>
<script src="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.js"></script>
		<div id="simple">
			<v-app>
				<v-content>
					<v-container>
						<v-row>
							<v-col cols="5"><v-row justify="end"><v-btn :loading="loading == 'ps0'" @click="activatePS(0);" color="green" :outlined="activePS != 0">{{ presets[0] }}</v-btn></v-row></v-col>
							<v-spacer></v-spacer>
							<v-col cols="5"><v-row justify="start"><v-btn :loading="loading == 'ps1'" @click="activatePS(1);" color="green" :outlined="activePS != 1">{{ presets[1] }}</v-btn></v-row></v-col>
						</v-row>
						<v-row>
							<v-col cols="5"><v-row justify="end"><v-btn :loading="loading == 'ps2'" @click="activatePS(2);" color="green" :outlined="activePS != 2">{{ presets[2] }}</v-btn></v-row></v-col>
							<v-spacer></v-spacer>
							<v-col cols="5"><v-row justify="start"><v-btn :loading="loading == 'ps3'" @click="activatePS(3);" color="green" :outlined="activePS != 3">{{ presets[3] }}</v-btn></v-row></v-col>
						</v-row>
					</v-container>
					<v-divider></v-divider>
					<v-container>
						<v-row>
							<v-col cols="4"><v-row justify="end"><v-btn @click="decVolume();" :disabled="muted || volume == -120"><v-icon>mdi-volume-minus</v-icon></v-btn></v-row></v-col>
							<v-col cols="4"><v-row justify="center"><v-btn @click="toggleMute();"><v-icon>{{ muted ? "mdi-volume-high" : "mdi-volume-off" }}</v-icon></v-btn></v-row></v-col>
							<v-col cols="4"><v-row...

JavaScript

var dspData = {
	presets : [ "Preset 1", "Preset 2", "Preset 3", "Preset 4" ],
	activePS : 0,
	volume : 0,
	muted : false,
	loading: ""
}

var vm = new Vue({
	el : "#simple",
	data: dspData,
	vuetify: new Vuetify({theme:{dark:true}}),
	methods: {
		activatePS : function(preset) {
			dspData.loading = "ps" + preset;

			dspData.activePS = preset;
			console.log("Preset: " + dspData.activePS);

			setTimeout(() => { dspData.loading = ""; }, 500);
		},
		incVolume : function() {
			if (dspData.volume < 0) {
				dspData.volume = dspData.volume + 1;
				console.log("volume: " + dspData.volume);
			}
		},
		decVolume : function () {
			if (dspData.volume > -120) {
				dspData.volume = dspData.volume - 1;
				console.log("volume: " + dspData.volume);
			}
		},
		toggleMute : function() {
			dspData.muted = !dspData.muted;
			console.log("muted: " + dspData.muted);
		}
	}
});