JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
<!-- Sidebar -->
<div class="sidebar" id="sidebar">
  <div class="sidebar-dark sidebar-header">
    <a href="#" class="text-center d-block">
      <img src="/api/placeholder/240/60" alt="Logo" class="img-fluid" />
    </a>
  </div>

  <!-- Sidebar menu -->
  <div class="sidebar-content">
    <div id="sidebar-menu">
      <ul class="list-unstyled">
        <li class="menu-title">Navigation</li>

        <li>
          <a href="#" class="side-nav-link active">
            <i class="fas fa-home"></i>
            <span>Dashboard</span>
          </a>
        </li>

        <li>
          <a href="#" class="side-nav-link">
            <i class="fas fa-calendar"></i>
            <span>Calendar</span>
          </a>
        </li>

        <li>
          <a href="#" class="side-nav-link">
            <i class="fas fa-envelope"></i>
            <span>Mail</span>
          </a>
        </li>

        <li class="menu-title">Apps</li>

        <li>
          <a href="#" class="side-nav-link">
            <i class="fas fa-briefcase"></i>
            <span>Projects</span>
          </a>
        </li>

        <li>
          <a href="#" class="side-nav-link">
            <i class="fas fa-shopping-cart"></i>
            <span>eCommerce</span>
          </a>
        </li>

        <li>
          <a href="#" class="side-nav-link">
            <i class="fas fa-user-friends"></i>
            <span>CRM</span>
          </a>
        </li>

        <li class="menu-title">Components</li>

        <li>
          <a href="#" class="side-nav-link">
            <i class="fas...

CSS

:root {
  --bs-primary: #727cf5;
  --bs-secondary: #6c757d;
  --bs-success: #0acf97;
  --bs-info: #39afd1;
  --bs-warning: #ffbc00;
  --bs-danger: #fa5c7c;
  --bs-light: #eef2f7;
  --bs-dark: #313a46;
  --bs-body-bg: #f5f6f8;
  --bs-body-color: #6c757d;
  --bs-sidebar-width: 240px;
  --bs-sidebar-bg: #313a46;
  --bs-sidebar-dark: #272e38;
}

body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--bs-sidebar-width);
  background: var(--bs-sidebar-bg);
  padding-top: 70px;
  z-index: 100;
  transition: all 0.2s;
}

.sidebar-dark {
  background: var(--bs-sidebar-dark);
  padding: 15px;
}

.sidebar-header img {
  height: 25px;
}

.content-page {
  margin-left: var(--bs-sidebar-width);
  overflow: hidden;
  padding: 70px 15px 65px;
  position: relative;
}

.navbar-custom {
  background-color: white;
  box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
  padding: 0 24px;
  position: fixed;
  left: var(--bs-sidebar-width);
  right: 0;
  top: 0;
  z-index: 99;
  height: 70px;
}

.nav-user {
  padding: 0 12px;
}

.dropdown-menu-end {
  right: 0;
  left: auto;
}

.card {
  box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
  margin-bottom: 24px;
}

.card-header {
  background-color: white;
  border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.avatar-sm {
  height: 2rem;
  width: 2rem;
}

.bg-soft-primary {
  background-color: rgba(114, 124, 245, 0.25) !important;
}

.bg-soft-success {
  background-color: rgba(10, 207, 151, 0.25) !important;
}

.bg-soft-info {
  background-color: rgba(57, 175, 209, 0.25) !important;
}

.bg-soft-warning {
  background-color: rgba(255, 188, 0, 0.25) !important;
}

.menu-title {
  padding: 12px 20px;
  letter-spacing: 0.05em;
  pointer-events: none;
  cursor: default;
  font-size: 0.6875rem;
  text-transform: uppercase;
  color:...

JavaScript

// Mobile sidebar toggle
document.getElementById("menu-toggle").addEventListener("click", function () {
  document.getElementById("sidebar").classList.toggle("sidebar-show")
})

// Revenue Chart
const revenueCtx = document.getElementById("revenueChart").getContext("2d")
const revenueChart = new Chart(revenueCtx, {
  type: "line",
  data: {
    labels: [
      "Jan",
      "Feb",
      "Mar",
      "Apr",
      "May",
      "Jun",
      "Jul",
      "Aug",
      "Sep",
      "Oct",
      "Nov",
      "Dec",
    ],
    datasets: [
      {
        label: "Current Year",
        data: [42, 58, 66, 93, 82, 105, 92, 97, 105, 115, 103, 118],
        borderColor: "#727cf5",
        backgroundColor: "rgba(114, 124, 245, 0.1)",
        tension: 0.3,
        fill: true,
      },
      {
        label: "Previous Year",
        data: [30, 41, 52, 65, 72, 84, 75, 80, 92, 100, 85, 98],
        borderColor: "#0acf97",
        borderDash: [5, 5],
        tension: 0.3,
        fill: false,
      },
    ],
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        position: "top",
      },
    },
    scales: {
      y: {
        beginAtZero: true,
        grid: {
          borderDash: [2, 2],
        },
      },
      x: {
        grid: {
          display: false,
        },
      },
    },
  },
})

// Channel Chart
const channelCtx = document.getElementById("channelChart").getContext("2d")
const channelChart = new Chart(channelCtx, {
  type: "doughnut",
  data: {
    labels: ["Direct", "Affiliate", "Social", "Referral", "Campaign"],
    datasets: [
      {
        data: [30, 25, 20, 15, 10],
        backgroundColor: [
          "#727cf5",
          "#0acf97",
          "#39afd1",
          "#ffbc00",
          "#fa5c7c",
        ],
        borderWidth: 0,
      },
    ],
  },
  options: {
    responsive: true,
    maintainAspectRatio: false,
    cutout: "70%",
    plugins: {
      legend: {
        position: "bottom",
       ...