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>MSE – Vendor-Neutral Industrial Automation Platform | Strategic Roadmap</title>
<style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    
    :root {
        --primary: #0a2540;
        --secondary: #1e4d8b;
        --accent: #00a6d6;
        --accent-dark: #0077a8;
        --warning: #f59e0b;
        --success: #10b981;
        --danger: #ef4444;
        --light-bg: #f4f7fa;
        --border: #d1d9e0;
        --text: #1a202c;
        --text-muted: #4a5568;
        --codesys: #0066cc;
        --siemens: #009999;
        --rockwell: #c8102e;
        --abb: #ff000f;
        --beckhoff: #ffcc00;
        --schneider: #3dcd58;
        --omron: #003da5;
        --mitsubishi: #e60012;
    }
    
    body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        background: #e8eef4;
        color: var(--text);
        line-height: 1.6;
        padding: 20px;
    }
    
    .document {
        max-width: 1100px;
        margin: 0 auto;
        background: white;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        border-radius: 8px;
        overflow: hidden;
    }
    
    /* Toolbar - hidden in print */
    .toolbar {
        position: sticky;
        top: 20px;
        right: 20px;
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        padding: 0 20px;
        margin-bottom: -60px;
        z-index: 100;
    }
    
    .btn {
        padding: 10px 20px;
        border: none;
        border-radius: 6px;
        font-weight: 600;
        cursor: pointer;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        transition: all 0.2s;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    
    .btn-primary...