Tabs with fade effect (HTML + Javascript)

Example

This code doesn’t work properly in CODEPEN but it will work if you paste it directly to Drupal 8. At least you can see the style of the tabs…

Code:

<div id="tabwrap"><!-- TABS -->
  <ul id="tabs">
    <li class="current"><a href="#TAB1">Tab 1</a></li>
    <li><a href="#TAB2">Tab 2</a></li>
    <li><a href="#TAB3">Tab 3</a></li>
  </ul>
  <!-- TAB CONTENT -->
  <div id="content">
    <div class="current" id="TAB1">
		<p>Tab 1 Content</p>
    </div>
    <div id="TAB2">
      <p>Tab 2 Content</p>
    </div>
    <div id="TAB3">
      <p>Tab 3 Content</p>
    </div>
  </div>
</div>
<style type="text/css">span.lwn0 {
  float: left;
  text-align: left;
  }
  .lwn0{
    width: 150px!important
  }
  .lwn a{
    float: right;
    width: 75%!important;
    color: #428bca!important;
  }
  /* TABS */
  @-webkit-keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  #tabwrap {
    background: #fff;
    overflow: hidden;
    width: 100%;
    min-height: 250px;
    border: 1px solid #ddd;
  }
  #tabs {
    overflow: hidden;
    background: #ddd;
    padding-left:0;
    margin:0;
  }
  #tabs li {
    list-style: none;
  }
  #tabs li a {
    float: left;
    display: block;
    padding: 10px;
    color: #333;
    width: 25%;
    text-decoration: none;
    text-align: center;
    border-right: 1px solid #ccc;
    border-left: 1px solid #eee;
    font-size: 15px;
    -webkit-box-sizing: border-box;
    /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;
    /* Firefox, other Gecko */
    box-sizing: border-box;
  }
  #tabs li a:hover {
    background: #eee;
  }
  #tabs li:first-child a {
    border-left: 0;
  }
  #tabs li:last-child a {
    border-right: 0;
  }
  #tabs li.current a {
    background: #fff;
    color: #333;
    text-shadow: 1px 1px 0 #fff;
  }
  #content > div {
    clear: both;
    padding: 1.2em;
    /* line-height: 19px; */
    color: #333;
    display: none;
  }
  #content .current {
    display: block;
  }
  #content #home.first {
    display: block;
  }
  #content blockquote.testimonial {
    margin:1em 0 2em 0;
  }
  #content > div h2 {
    line-height:1.1em;
  }
  #content .current > :first-child {
    margin-top:0;
  }
  #tabs li a {
    width: 33.333%;
  }
  .lwn0{
    text-align: right;
  }
</style>

<div class="main-content-block">
  <script type="text/javascript">
    // TABS
    document.addEventListener("DOMContentLoaded", function (event) {
      jQuery(document).ready(function () {
        jQuery('#tabs li a').click(function (e) {
          e.preventDefault();
          jQuery('#tabs li, #content .current').removeClass('current').removeClass('fadeIn');
          jQuery(this).parent().addClass('current');
          var currentTab = jQuery(this).prop("hash");
          jQuery(currentTab).addClass('current fadeIn');
          //ga('customTracker.send', 'event', 'tab', 'click', currentTab);
        });
        var hash = jQuery.trim(window.location.hash);
        if (hash) jQuery('#tabs li a[href$="' + hash + '"]').trigger('click');
        jQuery('a.tablink').click(function (e) {
          var linkHash = jQuery(this).prop("hash");
          if (linkHash) jQuery('#tabs li a[href$="' + linkHash + '"]').trigger('click');
          e.preventDefault();
        });
      });
    });
  </script>
</div>