JSFiddle - React, Tailwind, and code Playground

by brasofilo

HTML

<div class="phpdebugbar">
    	<div class="phpdebugbar-header">		
    		<a href="javascript:" class="phpdebugbar-tab" data-tab="messages">Messages</a>
    		<!-- OUTROS MENUS -->
    	</div>
    
    	<div class="phpdebugbar-body">
    		<div class="phpdebugbar-panel active" id="tab-messages">
    			<!-- CONTEÚDO A SER MOSTRADO -->
                <button class="phpdebugbar-close-btn">fechar</button>
    		</div>
    		<!-- OUTRAS TABS -->
    	</div>
    </div>

CSS

.phpdebugbar {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      background-color: #ccc;
    }

    .phpdebugbar-header {
      min-height: 26px;
    }

    .phpdebugbar-header:after {
      clear: both;
    }

    .phpdebugbar-body {
      display: none;
      position: relative;
      height: 300px;
      background-color: #bbb;
    }

    .phpdebugbar-panel {
      display: none;
      height: 100%;
      overflow: auto;
      width: 100%;
    }

    .phpdebugbar-panel.active {
      display: block;
    }

JavaScript

$('.phpdebugbar-tab').click( function() {
        // Esconder painel ativo
        $('.phpdebugbar-panel.active').removeClass('active');
        // Marcar novo painel como ativo
        var tab = $(this).data('tab');
        $('#tab-'+tab).addClass('active');
        // Mostra o body se não estiver visivel
        if( $('.phpdebugbar-body').is(":hidden") ) {
            $('.phpdebugbar-body').toggle();
        }
    });
    
    $('.phpdebugbar-close-btn').click( function() {
        $('.phpdebugbar-body').toggle();
    });