JSFiddle - React, Tailwind, and code Playground

by eyupturkay

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="{ circle:shape.isRound, square: !shape.isRound  }">
  
  </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: {
  	shapes: [
    	{ isRound: true },
      { isRound: false }
    ]
  }
});