JSFiddle - React, Tailwind, and code Playground

by magizter

HTML

<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">

    <div class="bd-exemple">

    <button type="button" class="btn btn-light shadow notSelected"><i class="fas fa-question">a</i></button>
    <div class="equal-widths">
    <button type="button" class="btn btn-danger shadow"><i class="fas fa-file-alt"></i><br>Protocolo</button>

    <button type="button" class="btn btn-primary shadow"><i class="fas fa-comment-alt"></i><br>Chat</button>

    <button type="button" class="btn btn-light shadow"><i class="fas fa-chart-line"></i><br>Dashboard</button>

    <button type="button" class="btn btn-light shadow"><i class="fas fa-calendar-alt"></i><br>Agenda</button>

    <button type="button" class="btn btn-light shadow"><i class="fas fa-user-injured"></i><br>Pacientes</button>

    <button type="button" class="btn btn-light shadow"><i class="fas fa-user-md"></i><br>Equipe Multidiciplinar</button>

    <button type="button" class="btn btn-light shadow"><i class="fas fa-hospital"></i><br>Planos de Saúde</button>

    <button type="button" class="btn btn-light shadow"><i class="fas fa-capsules"></i><br>Medicamentos</button>

    <button type="button" class="btn btn-light shadow"><i class="fas fa-user-circle"></i><br>[email protected]</button>
    </div>
    <button type="button" class="btn btn-light shadow botfr notSelected"><i class="fas fa-sign-out-alt"></i></button>

    </div>
</nav>

CSS

.bd-exemple {
   display: grid;
   grid-template-columns: auto 1fr auto;
}

.equal-widths{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(10px, 1fr));
   word-break: break-all; /*remove if not needed*/
   overflow: hidden; /*remove if not needed*/
}

.notSelected {
   height: 30px;
   width: 30px;
   align-self: center;
}