JSFiddle - React, Tailwind, and code Playground

HTML

<section class="lala">

        <div class="media3" style="width:57%;display: inline-block;vertical-align: top;padding-left: 60px;padding-top:50px;">
        <h2 style="font-size: 16px; color: red; font-weight: bold;padding-bottom:20px;">title for the things we shuld do</h2>

        <p style="color: rgb(112, 111, 111); font-size: 16px; font-weight: bold;padding-bottom: 20px;">&quot;Pusing Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here'<strong style="font-size:17px;font-weight: bold;"> &quotwe serve to wudwhq&quot;.&quot;</strong>&nbsp;</p>

        <h3 class="media4" style="color:#FF0000;font-size:12px;">-GRAG THE PRESIDENT OF THE USA
        </div>
        </section>

        <div class="video">
          <img src="https://as2.ftcdn.net/jpg/00/00/57/35/500_F_573556_fGmwktYr1XKdRjt3iNgydn5kuiNfpc.jpg">
        </div>

CSS

.video.for {
  display:block;
}

JavaScript

$(function() {
$('.bolinha-dentro').click(function(){
  $('.bolinha-dentro').removeClass('.bolinha-dentro');
  $(this).addClass('for');     
});
});