<style>
body {
    background: #051021;
    color: #FFF;
}

.hontabmenu {
    width: 760px;
    min-height: 400px;
    margin: 20px;
    padding: 10px;
    /* background: #444; */
    border: 1px solid #444;
    margin-bottom: 15px;
    -moz-border-radius: 10px;
    background: #051021;
    color: #FFF;
    font: 8pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}

.tabcontent {
    display: none;
    margin-top: 2px;
    background: #232a3b;
    border: 1px solid #333;
    padding: 5px;
    -moz-border-radius: 10px;
    text-align: center;
}

.tab {
    text-align: center;
}

.tab button {
    display: inline;
    list-style: none;
    padding-right: 5px;
    background-color: transparent;
    color: #FFF;
    border: 0;
    padding: 6px;
    margin-top: 0;
    margin-bottom: 0;
    font-weight: bold;
    text-transform: uppercase;
    outline: none;
    font-family: verdana;
    font-size: 8pt;
}

.tab button:hover {
    background-color: #707070;
    padding: 6px;
    color: #FFFFFF;
    border: 0;
}

.tab button.active {
    background-color: #707070;
    padding: 6px;
    color: #FFFFFF;
    border: 0;
}
</style>

<div class="hontabmenu">
<div class="tab">
  <button class="tablinks" onclick="openhonTab(event, 'Tab1')">Tab1</button>
  <button class="tablinks" onclick="openhonTab(event, 'Tab2')">Tab2</button>
</div>

<!-- Tab content -->
<div id="Tab1" class="tabcontent">
  <h2>Tab1</h2>
  <p>The tab 1 content.</p>
</div>

<div id="Tab2" class="tabcontent">
  <h2>Tab2</h2>
  <p>The tab 2 content.</p>
</div>

</div>

<script>function openhonTab(evt, cityName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  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";
}
</script>

<style>
/* FADE EFFECT */
.tabcontent {
  animation: fadeEffect 1s;
}

@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
</style>