JSFiddle - React, Tailwind, and code Playground

HTML

<div id="css-container">
    <div id="content">Content</div>
</div>
<div id="wrap">
    <a href="#" onclick="stopAnim(); return false;">stop it</a>
</div>

CSS

#wrap {
    top: 110px;
    position: absolute;
}

#css-container
{
    position: absolute;
    overflow: hidden;
    width: 100px;
    height: 100px;
    z-index: -10;
    /* -webkit-transform-style: preserve-3d; */
    background-image:
    -webkit-repeating-linear-gradient(-30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
    -webkit-repeating-linear-gradient(30deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
    -webkit-linear-gradient(30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
    -webkit-linear-gradient(-30deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
    background-size: 70px 120px;; background-color: #6d695c;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

@-webkit-keyframes shaking {
    0%   { -webkit-transform: translate(2px, 1px)   rotate(0deg); }
    10%  { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }
    20%  { -webkit-transform: translate(-3px, 0px)  rotate(1deg); }
    30%  { -webkit-transform: translate(0px, 2px)   rotate(0deg); }
    40%  { -webkit-transform: translate(1px, -1px)  rotate(1deg); }
    50%  { -webkit-transform: translate(-1px, 1px)  rotate(-1deg); }
    60%  { -webkit-transform: translate(-3px, -2px)  rotate(0deg); }
    70%  { -webkit-transform: translate(2px, 1px)   rotate(-1deg); }
    80%  { -webkit-transform: translate(-1px, -2px) rotate(1deg); }
    90%  { -webkit-transform: translate(2px, -1px)   rotate(0deg); }
    100% { -webkit-transform: translate(1px, -2px)  rotate(-1deg); }
}
.css-container-anim {
    -webkit-animation-name: 'shaking';
    -webkit-animation-duration: 0.8s;
    
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

JavaScript

function stopAnim() {
    // cssContent.classList.toggle('css-container-anim');
    cssContainer.classList.toggle('css-container-anim');
}

var cssContainer = document.getElementById("css-container");
var cssContent= document.getElementById("content");

cssContainer.classList.toggle('css-container-anim');
cssContent.classList.toggle('css-container-anim');