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 Framework Ultimate-2.00 | Architectural Documentation</title>

<style>
:root {
    --bg:#0f1115;
    --panel:#161a22;
    --panel2:#0b0d12;
    --border:#2a2f3a;
    --text:#e6e6e6;
    --muted:#94a3b8;
    --accent:#7dd3fc;
    --accent2:#a78bfa;
    --good:#86efac;
    --warn:#fca5a5;
}

/* BASE */
body {
    margin:0;
    font-family: ui-sans-serif, system-ui, Arial;
    background:var(--bg);
    color:var(--text);
    line-height:1.5;
}

/* HEADER */
header {
    padding:40px 30px;
    text-align:center;
    border-bottom:1px solid var(--border);
}

h1 { color:var(--accent); margin:0; }
.subtitle { color:var(--muted); margin-top:6px; }
.version-badge {
    display:inline-block;
    margin-top:10px;
    padding:4px 10px;
    border:1px solid var(--border);
    border-radius:20px;
    font-size:12px;
    color:var(--accent2);
}

/* SECTION */
section {
    padding:30px;
}

.arch-section {
    max-width:1100px;
    margin:auto;
}

.arch-title {
    font-size:18px;
    margin-bottom:15px;
    color:var(--accent);
    border-left:3px solid var(--accent2);
    padding-left:10px;
}

/* CARDS */
.principles {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:12px;
}

.card {
    background:var(--panel);
    border:1px solid var(--border);
    padding:15px;
    border-radius:10px;
}

.card h4 { margin:0 0 6px 0; color:var(--accent2); }
.card p { margin:4px 0; color:var(--text); }
.small { color:var(--muted); font-size:13px; }

/* LIST BLOCKS */
.block {
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:10px;
    margin-bottom:12px;
    overflow:hidden;
}

.block-title {
    padding:10px 14px;
    background:rgba(255,255,255,0.02);
    border-bottom:1px solid...