JSFiddle - React, Tailwind, and code Playground

by piyushpranjal

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="description" content="??" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pockets</title>

    <!-- Default Stylesheet -->
    <link rel="stylesheet" href="assets/css/style.css" />

    <!-- Jquery 3.6.0 Minified -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.11.3/sc-2.0.5/datatables.min.js"></script>
  </head>

  <!-- Body as a 12 Col Grid -->

  <body class="font-ibm select-none">
    <!-- Table Start -->
    <div class="p-4 mb-96 w-full">
      <table id="ticket-table" style="width:100%">
        <thead class="bg-gradient-to-tr from-broadcast-dark to-broadcast-light">
          <tr>
            <th class="font-ibm font-normal text-lg border-r border-l-0 text-white border-white w-4">#</th>
            <th class="font-ibm font-normal text-lg border-r border-l text-white border-white w-25">
              Description</th>
            <th class="px-0 border-r border-l w-10">
              <div class="flex flex-col">
                <h6 class="font-ibm font-normal text-lg text-white border-white">Issue</h6>
                <hr class="w-full">
                <h6 class="font-ibm font-normal text-lg text-white border-white">I</h6>
              </div>
            </th>
            <th class="px-0 border-r border-l w-10">
              <div class="flex flex-col">
                <h6 class="font-ibm font-normal text-lg text-white border-white">Promo</h6>
                <hr class="w-full">
                <h6 class="font-ibm font-normal text-lg text-white border-white">P</h6>
              </div>
            </th>
            <th class="px-0 border-r border-l w-10">
              <div class="flex flex-col">
                <h6 class="font-ibm font-normal...

CSS

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@300;400;500;600&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap");

/*! tailwindcss v2.2.15 | MIT License | https://tailwindcss.com */

/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

*,
::before,
::after {
  box-sizing: border-box;
}

/**
Use a more readable tab size (opinionated).
*/

html {
  -moz-tab-size: 4;
  -o-tab-size: 4;
     tab-size: 4;
}

/**
1. Correct the line height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
*/

html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/*
Sections
========
*/

/**
Remove the margin in all browsers.
*/

body {
  margin: 0;
}

/**
Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
*/

body {
  font-family:
		system-ui,
		-apple-system, /* Firefox supports this but not yet `system-ui` */
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
}

/*
Grouping content
================
*/

/**
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
}

/*
Text-level semantics
====================
*/

/**
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr[title] {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/**
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all...

JavaScript

// ***Resources used***
// Jquery 3.6.0
// Tailwind v2.2.15
// Datatables v1.11.3
// Datatables Extenstion - Scroller v2.0.5