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>Dynamic Service Report</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        * { box-sizing: border-box; }
        
        body { 
            font-family: 'Inter', Arial, sans-serif; 
            margin: 0; 
            padding: 0; 
            line-height: 1.4; 
            color: #2d3748; 
            background-color: #f7fafc; 
            max-width: 210mm;
            margin: 0 auto; 
        }
        
        .container { padding: 20px 15px; }
        
        .control-bar {
            background-color: #edf2f7;
            padding: 8px 15px;
            border-bottom: 1px solid #e2e8f0;
            display: flex;
            gap: 10px;
            align-items: center;
            margin-bottom: 10px;
            height: 45px;
        }
        
        .control-btn {
            padding: 6px 12px;
            background-color: #4299e1;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.85em;
            font-weight: 500;
            transition: background-color 0.2s;
        }
        
        .control-btn:hover, .control-btn:focus {
            background-color: #3182ce;
            outline: none;
        }
        
        .control-btn:focus-visible {
            box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.3);
        }
        
        .add-section-btn { background-color: #48bb78; }
        
        .add-section-btn:hover, .add-section-btn:focus { background-color: #38a169; }
        
        .header { 
            margin-bottom: 20px; 
            padding: 15px 0; 
            border-bottom: 1px solid #e2e8f0; 
            display: flex;
           ...