JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HashCracker Pro | Enterprise Security Dashboard</title>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
    <style>
        *{margin:0;padding:0;box-sizing:border-box}
        :root{--bg-primary:#0a0e1a;--bg-secondary:#131825;--bg-tertiary:#1a2035;--bg-card:rgba(26,32,53,0.6);--border:rgba(99,115,168,0.15);--border-hover:rgba(99,115,168,0.3);--text-primary:#e4e8f1;--text-secondary:#8b95b0;--text-tertiary:#5a6478;--accent-primary:#6366f1;--accent-secondary:#8b5cf6;--accent-gradient:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);--success:#10b981;--warning:#f59e0b;--danger:#ef4444;--info:#3b82f6;--shadow-sm:0 2px 8px rgba(0,0,0,0.15);--shadow-md:0 4px 16px rgba(0,0,0,0.2);--shadow-glow:0 0 40px rgba(99,102,241,0.15)}
        body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden;background-image:radial-gradient(circle at 15% 20%,rgba(99,102,241,0.05) 0%,transparent 40%),radial-gradient(circle at 85% 80%,rgba(139,92,246,0.05) 0%,transparent 40%)}
        .header{background:var(--bg-secondary);border-bottom:1px solid var(--border);padding:16px 32px;display:flex;justify-content:space-between;align-items:center;backdrop-filter:blur(12px);position:sticky;top:0;z-index:100;box-shadow:var(--shadow-sm)}
        .brand{display:flex;align-items:center;gap:16px}
        .brand-icon{width:44px;height:44px;background:var(--accent-gradient);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:var(--shadow-glow)}
        .brand-text{display:flex;flex-direction:column}
       ...