JSFiddle - React, Tailwind, and code Playground

by cchana

HTML

<div class="answer" id="tick">
</div>

SCSS

.answer {
  background: silver;
  height: 100px;
  position: relative;
  width: 100px;
  &:before,
  &:after {
    border-radius: 5px;
    display: block;
    content: '';
    height: 30px;
    position: absolute;
    width: 5px;
  }
}

.answer,
.answer.no {
  &:before,
  &:after {
    background-color: #D22;
    left: 11px;
    top: 0;
    transition: left 1s, top 1s, background-color 1s, height 1s;
  }
  &:before {
    transform: rotate(45deg);
  }
  &:after {
    transform: rotate(-45deg);
  }
}

.answer.yes {
  &:before,
  &:after {
    background-color: #2A2;
    left: 11px;
    top: 0;
  }
  &:before {
    left: 16px;
    transform: rotate(45deg);
  }
  &:after {
    height: 10px;
    left: 2px;
    top: 15px;
    transform: rotate(-45deg);
  }
}

JavaScript

tick.onclick = function() {
	this.classList.toggle('yes');
}