JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<section>
        <div id="profile">
            test
        </div>
    
        <div id="profile-photo">
        </div>
    
        <div id="profile-info">
            <p>Hello, I'm</p> 
            <p>Rick James</p>
        </div>
</section>

CSS

#profile-info {
    display: none;
    position:relative;
    left:200px;
    opacity:0;
}

JavaScript

$(document).ready(function(){
        $('#profile').click(function() {
           if ( $( "#profile-info" ).is( ":hidden" ) ) {
            $('#profile-info').fadeIn("").addClass('animated fadeInDown');
            $('#profile-info').animate({left:'0px',opacity:1}, 800,'swing');
            
           } else {
            $('#profile-info').animate({left:'200px',opacity:0}, 800,'swing');
            $('#profile-info').fadeOut("").removeClass('animated fadeInDown');
            
         }
      });
 });