JSFiddle - React, Tailwind, and code Playground

Class based states css variables.

by Travis Almand

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<div id="app">
	<div class="panel">
		<button @click="$el.className = ''">default</button>
		<button @click="$el.className = 'good'">good</button>
		<button @click="$el.className = 'error'">error</button>
	</div>
  <card-component></card-component>
  <card-component></card-component>
  <card-component></card-component>
</div>

SCSS

:root {
  --bg-color: white;
  --border-color: black;
  --color: black;
}

.good {
	--bg-color: green;
	--border-color: darkgreen;
	--color: white;
}

.error {
	--bg-color: red;
	--border-color: darkred;
	--color: white;
}

#app {
	display: flex;
	flex-wrap: wrap;
	height: 100vh;
	justify-content: center;
	width: 100vw;
	
	.panel {
		text-align: center;
		width: 100%;
	}
	
	.card {
		align-items: center;
		background-color: var(--bg-color);
		border: 2px solid var(--border-color);
		border-radius: 10px;
    color: var(--color);
		display: flex;
    flex-direction: column;
		height: 200px;
		justify-content: center;
    margin: 10px;
    transition: 0.25s;
		width: 200px;
	}
  
  .panel {
    margin-top: 10px;
  }
}

Vue

console.clear();

Vue.component('card-component', {
	name: 'card-component',
  
  data () {
  	return {
			state: ''
    }
  },
  
	template: `
  	<div class="card" :class="state">
      <div class="panel">
      	<button @click="state = ''">default</button>
        <button @click="state = 'good'">good</button>
        <button @click="state = 'error'">error</button>
      </div>
    </div>
  `
});

new Vue({
  el: "#app"
})