JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<ul>
<li><a class="shareTab" data-panel="1">John</a></li>
  <li><a class="shareTab" data-panel="2">Steve</a></li>
  <li><a class="shareTab" data-panel="3">Bob</a></li>
</ul>

<div class="sharePanel sharepanel1">
  <div class="shareFade">
    <span class="shareClose"><i class="fa fa-times"></i></span>
    <div>John's Panel</div>
  </div>
</div>
<div class="sharePanel sharepanel2">
  <div class="shareFade">
    <span class="shareClose">x</span>
    <div>Steve's Panel</div>
  </div>
</div>
<div class="sharePanel sharepanel3">
  <div class="shareFade">
    <span class="shareClose">x</span>
    <div>Bob's Panel</div>
  </div>
</div>

CSS

.sharePanel { display: none; position: fixed; top: 0; width: 700px; right: 0; height: 100%; z-index: 99999; margin: 0; overflow: hidden; background-color: #111; color: #fff; }
.shareFade { display: none; color: white; padding: 0px; overflow: hidden; }
.shareClose { display: block; width: 50px; height: 50px; line-height: 50px; text-align: center; cursor: pointer; background: rgba(255, 255, 255, 0.2);  }
.shareClose:hover { background: #888f36; }
.shareFade a.ico { display: block; width: 50px; height: 50px; line-height: 50px; text-align: center; color: #fff; font-size: 22px; }

JavaScript

$(document).ready(function() {
  $("a.shareTab").each(function(index, item) {
    $(this).on("click", function() {
    	$('.sharePanel').animate({
        'width': 'hide'
      });
      $('.sharepanel' + $(item).data("panel")).animate({
        'width': 'show'
      }, 1000, function() {
        $('.sharepanel' + $(item).data("panel") + ' .shareFade').fadeIn(100);
      });
    });
  });

  $('.shareClose').on('click', function() {
    $('div.shareFade').fadeOut(100, function() {
      $('.sharePanel').animate({
        'width': 'hide'
      }, 1000);
    });
  });
});