JSFiddle - React, Tailwind, and code Playground

by doctor23

HTML

<div class="tab">
  <button class="tablinks" onclick="openCity(event, '1')">Москва</button>
  <button class="tablinks" onclick="openCity(event, '2')">Краснодар</button>
  <button class="tablinks" onclick="openCity(event, '3')">Воронеж</button>
  <button id="lastTab" class="tablinks" onclick="openCity(event, '4')">Красноярск и Новосибирск</button>
</div>

<div id="1" class="qc-step">
  <h3>Москва</h3>
  <p>Москва это столица России.</p>
</div>

<div id="2" class="qc-step">
  <h3>Краснодар</h3>
  <p>Краснодар это столица Краснодарского края.</p> 
</div>

<div id="3" class="qc-step">
  <h3>Воронеж</h3>
  <p>Воронеж это столица Воронежской области.</p>
</div>

<div id="4" class="qc-step">
  <h3>Красноярск</h3>
  <p>Красноярск это столица Красноярского края.</p>
</div>
<div id="5" class="qc-step">
  <h3>Новосибирск</h3>
  <p>Новосибирск это вторая столица Красноярского края.</p>
</div>

CSS

.tab {
    overflow: hidden;
    border: 1px solid #4CAF50;
    background-color: #C8E6C9;
}


.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
}


.tab button:hover {
    background-color: #FFEB3B;
}


.tab button.active {
    background-color: #4CAF50;
    color: #fff;
}


.qc-step {
    display: none;
    padding: 6px 12px;
    border: 1px solid #4CAF50;
    border-top: none;
}

.block {
  display: block!important;
}

JavaScript

function openCity(evt, cityName) {
    // Declare all variables
    var i, tabcontent, tablinks;

    // Get all elements with class="tabcontent" and hide them
    tabcontent = document.getElementsByClassName("qc-step");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }

    // Get all elements with class="tablinks" and remove the class "active"
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }

    // Show the current tab, and add an "active" class to the button that opened the tab
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
} 

$(document).ready(function() {
  $('.tablinks').on('click', function(){
  	if ($("#lastTab").hasClass('active')) {
    $('#5').addClass('block');
    } else {
      $('#5').removeClass('block');
    }
  });
});