JSFiddle - React, Tailwind, and code Playground

by Bo Andersen

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <div class="shape"
       v-for="shape in shapes" 
       v-bind:class="[ shape.shape, shape.direction ? shape.direction : '', { animate: shape.animate } ]">
         
       </div>
</div>

CSS

.shape {
  width: 150px;
  height: 150px;
  float: left;
  margin: 10px; 
}

.circle {
  background-color: red;
  border-radius: 50%;
}

.square {
  background-color: blue;
}

.triangle {
  width: 0;
  height: 0;
}

.triangle.up {
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 150px solid orange;
}

.triangle.right {
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent;
  border-left: 150px solid green;
}

.triangle.down {
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-top: 150px solid #49A5C4;
}

.triangle.left {
  border-top: 100px solid transparent;
  border-bottom: 100px solid transparent; 
  border-right:150px solid #A549C4; 
}

/* Animations */
.shape.animate {
  animation-name: stretch;
  animation-duration: 1.0s;
  animation-timing-function: ease-out;
}

@keyframes stretch {
  0% {
    transform: scale(.3);
  }
  100% {
    transform: scale(1.0);
  }
}

JavaScript

new Vue({
	el: '#app',
  data: {
  	// todo: example showing how to supply names of classes ("red", "blue")
  
  	shapes: [
    	{ shape: 'circle' },
      { shape: 'square', animate: true },
      { shape: 'triangle', direction: 'up' },
      { shape: 'triangle', direction: 'right', animate: true },
      { shape: 'triangle', direction: 'down' },
      { shape: 'triangle', direction: 'left', animate: true }
    ]
  }
});