JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<div class="object">
</div>
<div class="firematch">
<div class="ognivo">
</div>
</div>
</div>

CSS

.container {
  width:500px;
  height:320px;
background-color:grey;
border:2px solid black;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.object {
   width:500px;
  height:320px;
background-color:antiquewhite;
box-shadow:4px 7px 24px -2px rgba(0,0,0,0.66);
  -webkit-box-shadow: 4px 7px 24px -2px rgba(0,0,0,0.66);
-moz-box-shadow: 4px 7px 24px -2px rgba(0,0,0,0.66);
box-shadow: 4px 7px 24px -2px rgba(0,0,0,0.66);
}
.object:active {
    width:500px;
  height:320px;
transform: translateX(200px);
border:1px solid black;
box-shadow:4px 7px 24px -2px rgba(0,0,0,0.66);
  -webkit-box-shadow: 4px 7px 24px -2px rgba(0,0,0,0.66);
-moz-box-shadow: 4px 7px 24px -2px rgba(0,0,0,0.66);
box-shadow: 4px 7px 24px -2px rgba(0,0,0,0.66);

}
.firematch {
  height:9px;
  width:190px;
  background-color:#FFDEAD;
  display:none;
 margin-top:-30px;
  }
.ognivo {
  width:20px;
  height:10px;
  background-color:brown;
  -moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;
  display:none;
}
.container:active .firematch,.container:active .ognivo {
  display:block;
}