JSFiddle - React, Tailwind, and code Playground

by ppgab

HTML

<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>
<div class="ui basic segment">
  <div class="ui top fixed raised menu">
    <a id="menu-hover" class="basic item">
      <i class="sidebar icon"></i> Menu
    </a>
  </div>
  <div class="ui segment pushable">
    <div style="" class="ui inverted vertical sidebar menu">
      <a class="item">
      Pessoas
    </a>
      <a class="item">
      CCIR
    </a>
      <a class="item">
      MAPA
    </a>
    </div>
  </div>

  <div id="mainview" class="ui pusher">
    <div class="ui basic segment">
      <h1 class="ui center aligned header">
          Aplicação Teste
        </h1>
      <div class="ui center aligned 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) 8475-6921</td>
                <td class="selectable">
                  <a href="#" class="editTable">Edit</a>
              ...

CSS

.fullpage {
  height: 100%;
}

JavaScript

$("#menu-hover").click(function() {
  $(".ui.sidebar")
    .sidebar("toggle");
})
$(".editTable").click(function() {
  $("#editcards").append(`<div class="ui raised card">
              <div class="content">
                <div>
                  
                  Editar Pessoa
                  <i class="right aligned close icon"></i> 

                </div>
                <div class="ui divider"></div>
                <div class="meta">
                  <span class="category">Nome : ` + $(this).closest("tr").children().eq(0).text() + `</span>
                </div>
                <div class="description">
                  <p>Telefone : ` + $(this).closest("tr").children().eq(1).text() + `</p>
                </div>
                <div class="extra content">
                </div>
              </div>
            </div>`);
})

$(".ui.dropdown").on("click", function() {
  $(this).dropdown();
})