JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/bxslider/4.1.1/images/bx_loader.gif"></script>
<script src="//cdn.jsdelivr.net/bxslider/4.1.1/images/controls.png"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.css">
<script src="//cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.js"></script>
<script src="//cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.min.js"></script>
<script src="//cdn.jsdelivr.net/bxslider/4.1.1/plugins/jquery.easing.1.3.js"></script>
<script src="//cdn.jsdelivr.net/bxslider/4.1.1/plugins/jquery.fitvids.js"></script>
<div id="slider">
<div class="boxslider">
  <div class="slide" id="welcomeBack">
      <div class="panel tip-panel">
        <div class="panel-head"><h2>WELCOME BACK</h2><div class="close"></div></div>
        <div class="panel-body">
        <div class="tip-overflow">
        Welcome Back SW185113:
        <br>
        <br>
        Last time you were:
        <br>
        <ul>
            <li>Move</li>
            <li>Add</li>
            <li>Change</li>
            <li>Move</li>
            <li>Add</li>
        </ul>
        </div>
        </div><!-- End Panel Body -->
    </div><!-- End Panel -->
    <br>
    <br>
  </div>
  <div class="slide" id="approvals">
      <div class="panel tip-panel" id="num-message">
        <div class="panel-head"><h2>APPROVALS</h2><div class="close">X</div></div>
        <div class="panel-body">
        <p><span id="number">2</span> Approvals pending</p>
        <a href="#" class="link">Link to Approvals</a>
        </div><!-- End Panel Body -->
    </div><!-- End Panel -->
    <br>
    <br>
    </div>
    <div class="slide" id="renewals">
      <div class="panel tip-panel" id="num-message">
        <div class="panel-head"><h2>RENEWALS</h2><div class="close">X</div></div>
        <div class="panel-body">
        <p><span id="number">2</span> Renewals pending</p>
        <a href="#" class="link">Link to Renewals</a>
        </div><!-- End Panel Body -->
    </div><!-- End...

CSS

.panel {
	border: 1px solid #b3b3b3;
	margin-bottom: 20px;
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px #ccc;
	box-shadow: 0 0 5px #ccc;
	
}

.panel-head {
	text-align: left;
	padding: 18px 18px 0;
	font-family: 'helvetica_neue', arial;
	min-height: 35px;
	text-transform: uppercase;
	border-bottom: 2px solid #fff;
	background-color: #c8c8c8;
	color: #5c5c5c;
}

.panel-head h2 {
	font-size: 20px;
}

.panel-body {
	margin: 5px 0 5px 0;
	padding: 0 10px 0 10px;
	color: #808080;
	font-size: normal;
	height: 100%;
}

.tip-panel {
     width: 220px;
     height: 250px;
     background-color: #efefef;
     margin-left: 48px;
}

.tip-panel div.panel-head {
     /*background-color: #d4e4f7;*/
     background-color: #c8c8c8;
}
.tip-panel div.panel-body {
     color: #4FB12D;
     padding-right: 0px;
    
}
.tip-panel div.panel-body div.tip-overflow {
     overflow: auto;
     max-height: 190px;
     max-width: 220px;
}

.tip-panel div.close {
     position: absolute;
     top: 2px;
     right: 55px;
}
/* not needed for icon, only use for image
.tip-panel div.close:hover {
     height: 10px;
     width: 10px;
     position: absolute;
     top: 4px;
     right: 54px;
}
*/
#num-message {
     background-color:#6d6d6d;
}

#num-message div.panel-body {
     color: #fff;
     margin-top: 0;
     margin-bottom: 0;
     height: 195px;
}

#num-message p {
     position: absolute;
     top: 40%;
     font-size: 1.2em;
}

#num-message span#number {
     font-size: 5em;
     vertical-align: middle;
}

#num-message div.panel-body a.link {
     position: absolute;
     top: 230px;
     left: 65px;
     color: #fff;
}

#num-message div.panel-body a.link:hover {
     color: #54B948;
     text-decoration: underline;
}

JavaScript

$('.boxslider').bxSlider({
	    slideWidth: 320,
	     minSlides: 1,
         maxSlides: 3,
         moveSlides: 1,
         auto: true,
         slideMargin: 10,
	    infiniteLoop: true
	  });
    $('#approvals').on('click', 'div.close', function(){
        var message = $(this).closest('.tip-panel').find('.panel-body');
        $(message).html('4');
        $('.bx-clone#'+$(this).closest('.slide').attr('id')).find('.tip-panel .panel-body').html('4');
    });