JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="container-fluid bg-light">
  <div class="row mt-1">
    <div class="col-7">
      <div class="row table-header bg-secondary">
        <div class="col bold">
          Commands
        </div>
        <div class="col bold">
          ID
        </div>
        <div class="col bold">
          Name
        </div>
        <div class="col bold">
          Time Stamp
        </div>
        <div class="col bold">
          Created By
        </div>
      </div>
      <div class="row">
        <div class="col">
          <a class="pointer mr-2 delete"><i class="fa fa-trash"></i></a>
          <a class="pointer edit"><i class="fa fa-pencil"></i></a>
        </div>
        <div class="col">
          1
        </div>
        <div class="col">
          Green
        </div>
        <div class="col">
          10/03/2019 14:42 EST
        </div>
        <div class="col">
          David
        </div>
      </div>
    </div>
    <div class="col">
      <div class="card rounded manage-event-type-window">
        <div class="card-header bg-secondary text-light">
          <div class="card-title">
            <h4 class="h4 text-center">
              Add Event type
            </h4>
          </div>
        </div>
        <div class="card-body">
          <p class="card-text">Some Content about the card.</p>
          <div class="row">
            <div class="col-4">
              <label for="Name">Name:</label>
            </div>
            <div class="col">
              <input type="text" name="Name" id="Name" class="form-control" required />
            </div>
          </div>
          <div class="row">
            <div class="col-4">
   ...

CSS

.pointer {
  cursor: pointer;
}

.bold {
  font-weight: bold;
}

JavaScript

'use strict';

$(function() {
  $(document).on('click', '.edit', function(e) {
    $('.manage-event-type-window').fadeIn(500);
  });

  $(document).on('click', '.delete', function(e) {
    alert('The delete button was clicked.');
  });

  $(document).on('click', '#CancelButton', function(e) {
    if (confirm('Are you sure you want to cancel you changes?')) {
      $('.manage-event-type-window').fadeOut(500);
    } else {
      e.preventDefault();
      e.stopPropagation();
    }
  });
  
  $(document).on('click', '#SaveButton', function(e) {
  	alert('The save button was clicked.');
    // TODO: If ajax is successful
    $('.manage-event-type-window').fadeOut(500);
  });
});