<div class="tab-wrapper">
    <ul class="tab-menu">
      <li class="active">#1</li>
      <li class="">#2</li>
      <li class="">#3</li>
    </ul>
    <div class="tab-content">
      <div>
        <div class="slider-div"></div>
        <div class="world-slider">
          <div class="world-image"></div>
          <p>App of<br/> 
          the year</p>
        </div>
        <div class="slider-content">
          <h1>My apps shoecase</h1>
          <p>Lorem Ipsum is simply dummy text .....</p>
          <div class="slider-btn">
            <img src="img/slider-btn.jpg">
            <input class="btn-buy" type="button" value="Buy now">
          </div>
        </div>
      </div>
      <div>
        <div class="slider-div"></div>
        <div class="world-slider">
          <div class="world-image"></div>
          <p>App of<br/> 
          the year</p>
        </div>
        <div class="slider-content">
          <h1>2.My apps shoecase</h1>
          <p>Lorem Ipsum is simply dummy text .....</p>
          <div class="slider-btn">
            <img src="img/slider-btn.jpg">
            <input class="btn-buy" type="button" value="Buy now">
          </div>
        </div>
      </div>
      <div>
        <div class="slider-div"></div>
        <div class="world-slider">
          <div class="world-image"></div>
          <p>App of<br/> 
          the year</p>
        </div>
        <div class="slider-content">
          <h1>3.My apps shoecase</h1>
          <p>Lorem Ipsum is simply dummy text .....</p>
          <div class="slider-btn">
            <img src="img/slider-btn.jpg">
            <input class="btn-buy" type="button" value="Buy now">
          </div>
        </div>
      </div>
    </div>
  </div>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

.tab-wrapper{
  position: relative;
  right: 0;
  top:40px;
  background: url("https://i.ibb.co/nCS6q0w/tab-slider.jpg") no-repeat;
  /*height:539px;*/
  overflow: hidden;
  background-size: 100%;
}
.tab-menu{
  position:relative;
  left:69%;
}
.tab-menu li {
  position:relative;
  color:#bcbcbc;
  display: inline-block;
  width:119px;
  height:123px;
  margin-right: -5px;
  cursor:pointer;
  z-index:0;
  opacity: 0.8;
  background: #079e97;
  color:#fff;
  /*transition:visibility 0.5s linear 0.5s,opacity 0.5s linear;*/

}

.tab-menu li.active {
  color:#464646;
  background: #017d82;
}
.tab-content{
  position: relative;
  bottom:120;
}
.tab-content>div {
  width: 100%;
  box-sizing:border-box;   
  position: relative;
  overflow: hidden;   
  min-height:300px;

}
.slider-div{
  width:256px;
  height:446px;
  background: url("https://i.ibb.co/2WSTRkX/phone-slider.jpg");
  background-size: 100%;
  clear: both;
  position: relative;
  left: -900;
  bottom: 60px;
  border-radius: 17px;
}
world-slider{
  position: absolute;
  top:50px;
  left:642px;
}
.world-image{
  background: url("img/globus.jpg");
  height: 57px;
  width:58px;
  float: left;
}
.world-slider p{
  float:right;
  font-family: segoeWPN;
  font-size: 1.3125em;
  color:#fff;
  text-transform: uppercase;
  margin: 0 0 0 9px;
}
.slider-content{
  position: relative;
  bottom: 300px;
  margin-left:50.15%;
  font-family: segoeWPN;
}
.slider-content h1{
  text-transform: uppercase;
  font-size:2.4375em;
  color:#fff;
}
.slider-content p{
  font-size: 1.0625em;
  color:#fff;
  position: relative;
}
.slider-btn{
  position: relative;
  top:34px;
}
.slider-content .btn-buy{
  height: 45px;
  width: 115px;
  position: relative;
  bottom:14px;
  right: 4px;
  border:none;
  background: #54d3c3;
  color:#fff;
  font-family: segoeWPN;
  font-size: 1.3125em;
}

$(document).ready(function(){

    $('.tab-content>div:not(":first-of-type")').fadeIn(250);
  
    $('.tab-menu li').each(function(i){
      $(this).attr('data-tab', 'tab' + i);
    });

    $('.tab-content>div').each(function(i){
      $(this).attr('data-tab', 'tab' + i);
    });

    $('.tab-menu li').on('click', function(){
  
      var dataTab = $(this).data('tab');
      var getWrapper = $(this).closest('.tab-wrapper');
    

      getWrapper.find('.tab-menu li').removeClass('active');
      $(this).addClass('active');

      getWrapper.find('.tab-content>div').fadeOut(250);
      getWrapper.find('.tab-content>div[data-tab='+ dataTab +']').fadeIn(250);

    });
});