JSFiddle - React, Tailwind, and code Playground

by trkli

HTML

<div class="el switch">off</div>

SCSS

* { padding: 0; margin: 0 }

.el {
  width: 120px;
  height: 120px;
  background: red;
  color: white;
  cursor: pointer;
  transition: transform 0.65s ease 0.15s;
  transform: translateX(120px);
  
  &.switch {
    transform: translateX(0);
  }
}

@media screen and (max-width: 425px) {
  .el {
    background: blue;
    transform: translateY(120px);
  }
}

JavaScript

$(".el").click(function() {
	if ( $(this).hasClass("switch") ) {
  	$(this).removeClass("switch");
    $(this).html("on");
  } else {
  	$(this).addClass("switch");
    $(this).html("off");
  }
});