JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stitch Design - Machine Control Dashboard</title>
  <link rel="icon" type="image/x-icon" href="data:image/x-icon;base64," />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700;900&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
  <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react.development.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/react-dom.development.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@babel/[email protected]/babel.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    const { useState, useEffect } = React;

    const App = () => {
      const [activeTab, setActiveTab] = useState('Overview');
      const [machineStatus, setMachineStatus] = useState('Stopped');
      const [alarms, setAlarms] = useState([
        { id: 1, type: 'Temperature Alarm', message: 'High temperature detected in extruder zone 3', time: '5 min ago', icon: 'Fire' },
        { id: 2, type: 'Pressure Warning', message: 'Low pressure detected in clamping unit', time: '15 min ago', icon: 'Gauge' },
        { id: 3, type: 'Material Alert', message: 'Material level low in hopper', time: '30 min ago', icon: 'PaintBucket' },
      ]);
      const [metrics, setMetrics] = useState({
        cycleTime: '12.5s',
        productionRate: '2880/hr',
        efficiency: '95%',
        materialUsage: '150kg/hr',
        temperature: '220°C',
       ...