JSFiddle - React, Tailwind, and code Playground

by neonDog

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<div class="container">
 
   <section class="accordion show-as-tabs neon-tab-container">
   
    <section class="accordion-tabs nav nav-tabs nav-fill">
      <li class="nav-item">
        <a class="nav-link show neon-tab-control active" data-tab="0" data-toggle="tab">Tab 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link show neon-tab-control" data-tab="1" data-toggle="tab">Tab 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link show neon-tab-control" data-tab="2" data-toggle="tab">Tab 3</a>
      </li>
      <li class="nav-item">
        <a class="nav-link show neon-tab-control" data-tab="3" data-toggle="tab">Tab 4</a>
      </li>
    </section>
    
    <section class="accordion-content">
    
      <article class="neon-tab-control accordion-item active card" data-tab="0">
        <h4 class="accordion-item__label card-header">Tab 1</h4>
        <div class="accordion-item__container card-body">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt minima? Ut facere minus, ipsa dolore animi quis alias eos, porro corporis quod esse quidem. Maxime a aperiam perspiciatis architecto?</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt minima? Ut facere minus, ipsa dolore animi quis alias eos, porro corporis quod esse quidem. Maxime a aperiam perspiciatis architecto?</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates, deserunt minima? Ut facere minus, ipsa...

SCSS

$color_blue: #447fff;
$color_blue__fade: rgba($color_blue, .1);
$color_white: #f9f9f9;
$color_cloud: #eaeaea;

.accordion {
  background: $color_white;
  
  &-tabs {
    display: none;
  }

  &-item {
  
    &__label {
      //padding: 1.25rem;
      cursor: pointer;
      transition: padding .2s ease;
      position: relative;

      &:after { //The arrow
        content: "";
        height: 4px;
        width: 4px;
        position: absolute;
        top: -4px;
        right: 1.25rem;
        bottom: 0;
        margin: auto;
        border: 3px solid transparent;
        border-radius: 2px;
        transform: rotate(45deg);
        border-color: transparent $color_blue $color_blue transparent;
        opacity: 1;
        transition: opacity .1s ease;
      }

      &:hover {
        background: lighten($color_blue, 28);
      }
    }

    &__container {
      padding: 0 1.25em;
      height: 0;
      overflow: hidden;
      opacity: 0;
      transition:
        padding .2s ease,
        opacity .5s .15s ease;
    }
  }
  
  .active {
    //background: $color_blue__fade;
    
    .accordion-item {
      &__container {
        padding: 1.25em;
        height: auto;
        opacity: 1;
      }
    }
  }
}


.show-as-tabs {
  .accordion-tabs {
    display:flex;
  }
  
  .accordion-item {
    display: none;
    min-height: 260px;
    border:none;
    
    &__label, &__container {
      //padding: 0;
      //transition: inherit;
    }
    
    &__label {
      display:none;
    }

    &.active {
      display: block;

      .accordion-item__container {
        //padding: 0;
      }
    }
  }
}


.nav-tabs-modern {
  
}

JavaScript

class NeonTabs {

    constructor() {
        this.click = this.click.bind(this);
        document.addEventListener('click', this.click);
    }
    
    click(e) {
        const btn = e.target.closest('.neon-tab-control');
        if (!btn) { return false; }
        const tab = btn.getAttribute('data-tab');
        const container = btn.closest('.neon-tab-container');
        this.select(container, tab);
    }

    selectNth(container, num = 0) {
        const btn = container.querySelectorAll('.neon-tab-container .neon-tab-control')[num];
        if (!btn) { return false; }
        const tab = btn.getAttribute('data-tab');
        if (!tab) { return false; }
        this.select(container, tab);
    }

    select(container, tab) {
        if (!container || !tab) { return false; }
        const controls = container.getElementsByClassName('neon-tab-control');
        if (controls) {
            for (const el of controls) {
                el.classList.toggle('active', el.getAttribute('data-tab') === tab);
            }
        }
        
        const detail = { tab };
        container.dispatchEvent(new CustomEvent('neon-tab-event', { detail }));
    }

}

const tabs = new NeonTabs();