JSFiddle - React, Tailwind, and code Playground

by schantanu

HTML

<p>Test</p>

attr_manager.html
<!-- !DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap" rel="stylesheet">
    <style>
      body {
        font-family: 'IBM Plex Sans', sans-serif;
        font-size: 12px;
      }
      h4 {
        font-weight: bold;
      }
      h5, h6 {
        font-weight: bold;
        margin: 0;
      }
      p {
        font-size: 12.4px;
        margin: 0;
      }
      .form-select, .form-control {
        font-size: 12.4px;
      }
      .required:after {
        content:" *";
        color: red;
      }
      .form-label {
        font-weight: bold;
      }
      .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.8);
        display: none; /* Change from flex to none */
        justify-content: center;
        align-items: center;
        z-index: 1000;
      }
      .loader {
        width: 48px;
        height: 48px;
        border: 5px solid #f3f3f3;
        border-radius: 50%;
        border-top: 5px solid #3498db;
        animation: spin 1s linear infinite;
      }
   ...

JavaScript

/* requests.html
<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;700&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
      body {
        font-family: 'IBM Plex Sans', sans-serif;
        font-size: 12px;
      }
      h6 {
        font-weight: bold;
      }
      .request-card {
        border-left: 4px solid #0d6efd;
        margin-bottom: 15px;
        background-color: #f8f9fa;
      }
      .request-card.approved {
        border-left-color: #198754;
      }
      .request-card.rejected {
        border-left-color: #dc3545;
      }
      .card-header {
        background-color: transparent;
        border-bottom: none;
      }
      .timestamp {
        color: #6c757d;
        font-size: 0.9em;
      }
      .status-badge {
        font-size: 0.8em;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="mt-3 d-grid gap-2">
        <button class="btn btn-sm btn-primary" onclick="toggleSpinner(this, 'showUserConsole')">← Back to User Console</button>
      </div>

      <hr>

      <div class="mt-3 mb-3">
        <h6>Admin Requests</h6>
        <p>Review and manage attribute change requests from users.</p>
      </div>

      <hr>

      <div class="mt-3" id="requests-container">
        <!-- Requests will be loaded here -->
      </div>

      <div id="alert" class="mt-3"></div>
    </div>

    <template id="request-template">
      <div class="card request-card">
        <div class="card-header d-flex justify-content-between align-items-center">
          <div>
            <span class="badge rounded-pill bg-primary status-badge">{{type}}</span>
            <strong...