JSFiddle - React, Tailwind, and code Playground

by qunzorez

HTML

<script src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js"></script>
<script src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- / /  CSS  \ \  -->
<!-- Our Custom CSS -->
<link rel="stylesheet" type="text/css" href="{% static 'css/dashboard.css' %}">
<!-- jQuery Datatables CSS -->
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<!-- Bootstrap datepicker CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<!-- Datatables Select CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.3.3/css/select.dataTables.min.css">
<!-- / /  JAVASCRIPT  \ \  -->
<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<!-- jQuery Datatables JS -->
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<!-- Datatables JS -->
<script type="text/javascript" src="https://cdn.datatables.net/v/bs5/dt-1.11.3/datatables.min.js"></script>
<!-- Datatables Bootstrap JS -->
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap5.min.js"></script>
<!-- Bootstrap datepicker JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<!-- Datatables Select JS -->
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/select/1.3.3/js/dataTables.select.min.js"></script>
<div...

CSS

body {
    background: #fafafa;
}

a,
a:hover,
a:focus {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s;
}
.d-flex {
  display: flex
}

.text {
  flex-direction: column;
  margin-left: 8px;
}

/* ---------------------------------------------------
    CONTENT STYLE
----------------------------------------------------- */

#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

.alert-custom {
  color: #193D4C !important;
  background-color: #F3E4A8 !important;
}

.new-task-dismiss {
  color: white !important;
  background-color: #408BAA !important;
}

#newTaskModalHeader {
  color: #193D4C !important;
  background-color: #F3E4A8 !important;
}

#toDoHeader {
  background-color: #F3E4A8 !important;
  color: #193D4C !important;
}

#projectsHeader {
  color: #193D4C !important;
  background-color: white; !important;
}

.card-header{
    border-bottom:  0px;
}

#projectsHeader h3{
  font-weight: 600;
}

.dropdown .btn:focus{
    box-shadow: none;
}

#toDoListBadge {
  color: #193D4C !important;
  font-size: small;
  flex-shrink:0;
}

.badge{
    display: unset;
}
#otherHeaders {
  background-color: #193D4C !important;
}

.cardItem {
  background-color: white !important;
  padding-top: inherit;
  padding-left: inherit;
  padding-bottom: inherit;
}

th {
  background-color: #193D4C !important;
  color: white !important;
}

/*Project Page*/
#project-reference{
    text-align: right;
    border-right: 1px solid gray;
}

.project-page-header{
    background-color: #193D4C !important;
    color: white;
}

.project-page-nav{
    color: #193D4C !important;
}

.project-page-nav{
    color: #193D4C !important;
}

.project-page-nav{
    color: #193D4C !important;
}

.project-page-nav-active{
    color: #193D4C !important;
}

.nav-tabs {
    border-bottom: 0px !important;
}

.nav-tabs .nav-link.active {
    border: 0px !important;
    border-bottom: 3px solid #193D4C !important;
}

.panel-body...