JSFiddle - React, Tailwind, and code Playground

by batrasoe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/dropdown.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/components/dropdown.min.css">
<div class="ui two column grid" style="height:100%">
  
  <div class="four wide column">
    <div class="ui vertical inverted sticky menu fixed top" style="height:100%">
      <div class="item">
        Pessoas
      </div>
      <div class="item">
        CCIR
      </div>
      <div class="item">
        Matricula
      </div>
    </div>
  </div>
  <div class="twelve wide centered column">
    <h1 class="ui header">
      Aplicação Teste
    </h1>
    <div class="ui raised segment">
      <div class="ui top attached blue label">
        Tabela Pessoas
      </div>
      <div class="ui action left icon right labeled input">
        <i class="search icon"></i>
        <input type="text" placeholder="Pesquisar...">
        <div class="ui dropdown label" tabindex="0">
          <div class="text">Nome</div>
          <i class="dropdown icon"></i>
          <div class="menu transition hidden" tabindex="0">
            <div class="item">Nome</div>
            <div class="item">Telefone</div>
          </div>
        </div>
      </div>
      <div class="ui very basic segment">
        <table class="ui very basic sortable unstackable celled table">
          <thead>
            <tr>
              <th>Nome</th>
              <th>Telefone</th>
              <th>Editar</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Gabriel</td>
              <td>(48)...

CSS

.ui {
  text-align: center;
}

JavaScript

$('.ui.dropdown').dropdown({
  on: 'click'
});
$('.ui.menu a.item')
  .on('click', function() {
    $(this)
      .addClass('active')
      .siblings()
      .removeClass('active');
  });