<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="tabs"> <div class="row"> <div class="col-md-3"> <div class="tabat"> <ul class="list-unstyled tab-switch text-center list-group"> <li class="selected list-group-item" data-class="tab-one"> <i class="fa fa-plane"></i> fight </li> <li class='list-group-item' data-class="tab-two"> Home <i class="fa fa-home"></i> </li> <li class='list-group-item' data-class="tab-three"> Home <i class="fa fa-home"></i> </li> <li class='list-group-item' data-class="tab-four"> Creadit Card <i class="fa fa-cart"></i> </li> <li class='list-group-item' data-class="tab-five"> Home <i class="fa fa-home"></i> </li> </ul> </div> </div> <div class="col-md-9"> <div class="tabs-content"> <div class="tab-one tab"> <h4><i class="fa fa-plane fa-5x"></i></h4> <h3 class=" text-center-xs">Cooming Soon<br>Flight Reservation</h3> </div> <div class="tab-two tab"> <h3 class=" text-center-xs">Two</h3> </div> <div class="tab-three tab"> <h3 class=" text-center-xs">Three</h3> </div> <div class="tab-four tab"> <h4><i class="fa fa-plane fa-5x"></i></h4> <h3 class=" text-center-xs">Cooming Soon<br>Credit Card</h3> </div> <div class="tab-five tab"> <h4><i class="fa fa-plane fa-5x"></i></h4> <h3 class=" text-center-xs">Cooming Soon<br>Flight Reservation</h3> </div> </div> </div> </div> </div>

body{ overflow-x: hidden; } .tabs{ background: #fff; direction: rtl; border: 1px solid #ddd; box-shadow: 0 6px 12px rgba(0,0,0,.175); height: 100vh } .tabs .tabat{ display: flex; margin-right: -40px; justify-content: flex-start; } .tabs .tab-switch li { background-color: #fff; color: #5f5aa6; border-bottom: 1px solid #fff; height: 80px; font-weight: bold; line-height: 50px; width: 120px; border: 1px solid #ccc } .tabs .tab-switch li.selected, .tabs .tab-switch li:hover{ background-color: #5f5aa6; color: #fff } .tabs .tab-switch li.selected::before{ content: ''; display: block; position: absolute; border: 13px solid transparent; border-right: 10px solid #5f5aa6; right:118px; top: 30% } .tabs-content{ text-align: right; } .tabs .tabs-content div:not(.tab-one){ display: none } .tabs .tabs-content h3{ margin-top: 0; letter-spacing: -1px; margin-bottom: 20px; font-weight: bold } @media(max-width : 991px){ .tabs .tabs-content h3{ margin: 30px 0 20px;; } } .tabs .tabs-content p{ line-height: 1.6; font-size: 18px; color: #ccc; } .tabs .tabs-content button{ background-color: #ff8b38; color: #fff; padding: 8px 30px; border-radius: 0; margin-bottom: 25px; } @media(max-width : 991px){ .tabs .tabs-content button{ display: block; margin: 25px auto; } } @media(max-width : 991px){ .tabs .tabimg{ display: block; margin: 25px auto; } } .tab i{ color: #5f5aa6 }

/*global $ */ $(function () { "use strict"; $('.tab-switch li').click(function () { $(this).addClass('selected').siblings().removeClass('selected'); $('.tabs .tabs-content > div').hide(); $("." + $(this).data('class')).show(); }); });