JSFiddle - React, Tailwind, and code Playground

by Jennifer Perrin

HTML

<div id="ChildVerticalTab_1">
        <ul class="resp-tabs-list ver_1">
          <li>Responsive Tab 1</li>
          <li>Responsive Tab 2</li>
          <li>Responsive Tab 3</li>
          <li>Long name Responsive Tab 4</li>
        </ul>
        <div class="resp-tabs-container ver_1">
          <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida
              a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.</p>
          </div>
          <div>
            <p>This tab has icon in it.</p>
          </div>
          <div>
            <p>Suspendisse blandit velit Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis Integer laoreet placerat suscipit.
              Sed sodales scelerisque commodo. Nam porta cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravid urna gravid eget erat suscipit in malesuada odio venenatis.</p>
          </div>
          <div>
            <p>d ut ornare non, volutpat vel tortor. InLorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nibh urna, euismod ut ornare non, volutpat vel tortor. Integer laoreet placerat suscipit. Sed sodales scelerisque commodo. Nam porta
              cursus lectus. Proin nunc erat, gravida a facilisis quis, ornare id lectus. Proin consectetur nibh quis urna gravida mollis.t in malesuada odio venenatis.</p>
          </div>
        </div>
      </div>

CSS

body {
  margin: 20px;
  padding: 0px;
  background: #ffffff;
  font-family: 'Segoe UI';
}

ul.resp-tabs-list,
p {
  margin: 0px;
  padding: 0px;
}

.resp-tabs-list li {
  font-weight: 600;
  font-size: 13px;
  display: inline-block;
  padding: 13px 15px;
  margin: 0 4px 0 0;
  list-style: none;
  cursor: pointer;
  float: left;
}

.resp-tabs-container {
  padding: 0px;
  background-color: #fff;
  clear: left;
}

h2.resp-accordion {
  cursor: pointer;
  padding: 5px;
  display: none;
}

.resp-tab-content {
  display: none;
  padding: 15px;
}

.resp-tab-active {
  border: 1px solid #5AB1D0 !important;
  border-bottom: none;
  margin-bottom: -1px !important;
  padding: 12px 14px 14px 14px !important;
  border-top: 4px solid #5AB1D0 !important;
  border-bottom: 0px #fff solid !important;
}

.resp-tab-active {
  border-bottom: none;
  background-color: #fff;
}

.resp-content-active,
.resp-accordion-active {
  display: block;
}

.resp-tab-content {
  border: 1px solid #c1c1c1;
  border-top-color: #5AB1D0;
}

h2.resp-accordion {
  font-size: 13px;
  border: 1px solid #c1c1c1;
  border-top: 0px solid #c1c1c1;
  margin: 0px;
  padding: 10px 15px;
}

h2.resp-tab-active {
  border-bottom: 0px solid #c1c1c1 !important;
  margin-bottom: 0px !important;
  padding: 10px 15px !important;
}

h2.resp-tab-title:last-child {
  border-bottom: 12px solid #c1c1c1 !important;
  background: blue;
}


/*-----------Vertical tabs-----------*/

.resp-vtabs ul.resp-tabs-list {
  float: left;
  width: 30%;
}

.resp-vtabs .resp-tabs-list li {
  display: block;
  padding: 15px 15px !important;
  margin: 0 0 4px;
  cursor: pointer;
  float: none;
}

.resp-vtabs .resp-tabs-container {
  padding: 0px;
  background-color: #fff;
  border: 1px solid #c1c1c1;
  float: left;
  width: 68%;
  min-height: 250px;
  border-radius: 4px;
  clear: none;
}

.resp-vtabs .resp-tab-content {
  border: none;
  word-wrap: break-word;
}

.resp-vtabs li.resp-tab-active {
  position: relative;
  z-index: 1;
 ...

JavaScript

// https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion

// Easy Responsive Tabs Plugin
// Author: Samson.Onna <Email : [email protected]> 
(function($) {
  $.fn.extend({
    easyResponsiveTabs: function(options) {
      //Set the default values, use comma to separate the settings, example:
      var defaults = {
          type: 'default', //default, vertical, accordion;
          width: 'auto',
          fit: true,
          closed: false,
          tabidentify: '',
          activetab_bg: 'white',
          inactive_bg: '#F5F5F5',
          active_border_color: '#c1c1c1',
          active_content_border_color: '#c1c1c1',
          activate: function() {}
        }
        //Variables
      var options = $.extend(defaults, options);
      var opt = options,
        jtype = opt.type,
        jfit = opt.fit,
        jwidth = opt.width,
        vtabs = 'vertical',
        accord = 'accordion';
      var hash = window.location.hash;
      var historyApi = !!(window.history && history.replaceState);

      //Events
      $(this).bind('tabactivate', function(e, currentTab) {
        if (typeof options.activate === 'function') {
          options.activate.call(currentTab, e)
        }
      });

      //Main function
      this.each(function() {
        var $respTabs = $(this);
        var $respTabsList = $respTabs.find('ul.resp-tabs-list.' + options.tabidentify);
        var respTabsId = $respTabs.attr('id');
        $respTabs.find('ul.resp-tabs-list.' + options.tabidentify + ' li').addClass('resp-tab-item').addClass(options.tabidentify);
        $respTabs.css({
          'display': 'block',
          'width': jwidth
        });

        if (options.type == 'vertical')
          $respTabsList.css('margin-top', '3px');

        $respTabs.find('.resp-tabs-container.' + options.tabidentify).css('border-color', options.active_content_border_color);
        $respTabs.find('.resp-tabs-container.' + options.tabidentify + ' >...