JSFiddle - React, Tailwind, and code Playground

by ivos

HTML

<h2>Kimble Config Catalogue Users</h2>
    <div class="header-content">
        <div class="table-controls">
            <!-- <button id="addUser" class="btn">Add User</button>&nbsp; -->
            <a href="/users/new" target="_blank" class="btn">
                <span class="fa fa-user-plus">&nbsp;&nbsp;</span>
                Add User
            </a>&nbsp;&nbsp;
            <!-- <a href="/users/new" rel="modal:open" class="btn">Add User</a> -->
        </div>

        <div class="note">
            <h3>
                <span class="fa fa-info-circle info"></span>&nbsp;
                Available actions:</h3>
            <div class="note-line one"><b>Single click</b> will enter in edit mode - for editable cells only</div>
            <div class="note-line two"><b>Enter</b> or <b>clicking outside</b> the cell will save changes.</div>
            <div class="note-line three"><b>Escape</b> will discard changes.</div>
            <input type="hidden" id="id" value="<%= id %>" />
        </div>
    </div>

    <div id="user-table" />

CSS

.header-content {
    width: 99%;
    padding: 15px 15px 0 0;
    margin-bottom: 15px;
    float: left;
    border: solid 1px black;
    background-color: #eee;
    vertical-align: bottom;
}

div.note {
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  background-color: #f0f7fb;
  border: solid 1px #3498db;
  border-radius: 6px;
  line-height: 18px;
  overflow: hidden;
  padding: 0.1em 3em 1em 2.5em;
  margin: 0 2em 1.5em 2em;
  width: 70%;
  /* width: calc(100% - 100px); */
  float: left;
}

div.note > div.note-line {
  border-left: solid 4px #3498db;
  overflow: hidden;
  padding: 0.4em;
  line-height: 1.2em;
  margin-left: 3em;
  margin-bottom: 0.25em;
}

.one {
  background-color: LightYellow;
}
.two {
  background-color: Beige;
}
.three {
  background-color: AntiqueWhite;
}

span.fa-user-times:hover {
  color: red;
}

.table-controls {
  margin-bottom: 10px;
  padding: 10px 5px 0 5px;
  /* background: #eee; */
  font-size: 14px;
  float: left;
  vertical-align: bottom;
  width: 300px;
}

div#user-table{
    clear: both;
}

a.btn {
  display: inline-block;
  text-align: center;
}

button.btn,
a.btn {
  margin: 0 5px 10px 5px;
  width: 200px;
  margin-left: 2em;
  border-radius: 16px;
}

.btn {
  padding: 5px 10px;
  border: 1px solid #25682a;
  background: #0000cd;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#b0c4de),
    to(#0000cd)
  );
  background: linear-gradient(to bottom, #b0c4de 0%, #0000cd 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  color: #fff;
  font-weight: bold;
  padding: 10px;
}

.btn:hover {
  border: 1px solid #328e3a;
  background: #00bfff;
  /* Old browsers */
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#5bdff7),
    to(#caf7f8)
  );
  background: linear-gradient(to bottom, #5bdff7 0%, #caf7f8 100%);
  /* W3C,...