JSFiddle - React, Tailwind, and code Playground

HTML

<div id="theBox">
<div id="innerBox">
  <div style="width: 500px;height: 500px;" class=""><img src="https://picsum.photos/200/300" width="100%" height="100%" style="object-fit: cover;" class=""></div>
</div>
</div>

CSS

body { padding: 10px; }

#theBox {
  position: relative;
    border-radius: 15px;
    width: 500px;
    height: 500px;
    overflow: hidden;
}

#theBox::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px white solid;
  border-radius: 15px;
}

#innerBox {
  position: absolute;
  inset: 0;
  background-color: gray;
  border-radius: 15px;
}

JavaScript

setTimeout(function () {
    var innerBox = document.getElementById("innerBox");
    /* var transformText = "translate3d(70px, 0, 0)"; */
    innerBox.style.webkitTransform = transformText;
    innerBox.style.MozTransform = transformText;
}, 1000);