JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main_page">
   <div class="movie" id="602147">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/l13mt3oHErSkkqJbN1bjzgtK0Vq.jpg"/>
   </div>
   <div class="movie" id="576156">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/5jdLnvALCpK1NkeQU1z4YvOe2dZ.jpg"/>
   </div>
   <div class="movie" id="385103">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/zG2l9Svw4PTldWJAzC171Y3d6G8.jpg"/>
   </div>
   <div class="movie" id="686245">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/niyXFhGIk4W2WTcX2Eod8vx2Mfe.jpg"/>
   </div>
   <div class="movie" id="582596">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/A2YlIrzypvhS3vTFMcDkG3xLvac.jpg"/>
   </div>
   <div class="movie" id="618344">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/c01Y4suApJ1Wic2xLmaq1QYcfoZ.jpg"/>
   </div>
   <div class="movie" id="536517">
    <img class="poster" src="https://image.tmdb.org/t/p/w780/6btICrn3RsbtxZCthtb0MsR9lcq.jpg"/>
   </div>
  </div>

CSS

body{
    margin: 0 0 10% 0;
    padding: 0;
    background-color: #191919;
}

.movie{
  position: relative;
  margin: 10% auto 0 auto;
  width: 80%;
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.66);
  transition: 200 linear;
}

.poster{
  display: block;
  width: 100%;
  border-radius: 10px;
}

JavaScript

$(document).ready(function(){

  $("body").click(function(){
    $(".movie").animate({width: "80%"});
  });

  $(".movie").click(function(){
  	event.stopPropagation();
    $(".movie").animate({width: "70%"});
  });

})