JSFiddle - React, Tailwind, and code Playground

by Cthulhu

HTML

<div class="caixa">desktop
</div>

<div class="caixaMob">mob
</div>

<p id="elemento">
aabbb
</p>

<p id="elemento2">
aabbb
</p>

CSS

.caixa {
  animation-name: mexe;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  background-color:red;
  border: 20px green solid;
  width:100px;
  height:50px;
  }
  
  @keyframes mexe
  {
    0% {
      
      transform: rotate(30deg);
    }
    50% {
       background-color:black;
       transform: rotatez(360deg);
       width:20px;
       border-radius: 100px;
    }
    100% {
       background-color:blue;
       width:220px;
       transform: translate(12px, 50%);
    }
  }
  
  .caixaMob {display:none;
  border: 20px green solid;
  height:50px;
  background-color:blue;
       width:220px;
       transform: translate(12px, 50%);}
 
  @media only screen and (max-width: 700px) {
    .caixa { display: none; }
    .caixaMob { display: block; }
  }
 #elemento{position:absolute;}

JavaScript

$("#elemento").text("xpto");

$(".caixa").click(function(){
	$("#elemento2").fadeToggle();
});

$("body").on('keypress', function(e){
console.log(e.keyCode);
if(e.keyCode == 39)
{
console.log("a");
$("#elemento2").fadeToggle();
}
});