JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css"
/>
<link
  rel="stylesheet"
  href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/>

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"
/>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>

<div class="main container">
<button data-fancybox data-type="ajax" data-src="/ajax.html">
  Load content using AJAX
</button>
</div>

CSS

html,
body {
  color: #F9F9F9 !important;
  background: #212121;
}

.main.container {
  margin-top: 5%;
}

.modal-body {
  max-width: 400px;
  padding: 20px;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}

.btn {
  padding: 8px 14px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.btn-danger {
  background: #c0392b;
  color: #fff;
}
.btn-warning {
  background: #f39c12;
  color: #000;
}
.btn-secondary {
  background: #bdc3c7;
}

JavaScript

Fancybox.show([
  {
    src: 'ajax.html',
    type: 'ajax',
  },
])