Design component · data-table-component

raw output — byte exact

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Deployment Records</title>
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8e6e3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    color: #1a1a1a;
    -webkit-font-smoothing: antialiased;
  }

  .table-wrap {
    background: #fafaf9;
    border: 1px solid #d4d2ce;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    overflow: hidden;
    max-width: 920px;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
  }

  thead {
    background: #f0efed;
    border-bottom: 1px solid #d4d2ce;
  }

  th {
    text-align: left;
    padding: 7px 12px;
    font-weight: 550;
    font-size: 11px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #5c5a56;
    white-space: nowrap;
    user-select: none;
    border-right: 1px solid transparent;
  }

  th:last-child { border-right: none; }

  th.sorted {
    color: #1a1a1a;
    background: #e8e6e3;
  }

  th.sorted .sort-icon {
    display: inline-block;
    margin-left: 4px;
    font-size: 9px;
    vertical-align: middle;
    color: #3d3d3a;
  }

  th .sort-icon { display: none; }

  tbody tr {
    border-bottom: 1px solid #ebe9e6;
    transition: background 0.05s ease;
  }

  tbody tr:last-child { border-bottom: none; }

  td {
    padding: 6px 12px;
    vertical-align: middle;
    white-space: nowrap;
    color: #2c2c2a;
  }

  /* Hovered row */
  tbody tr.is-hovered {
    background: #f0f4f8;
  }

  /* Selected row */
  tbody tr.is-selected {
    background: #e8f0fe;
    box-shadow: inset 3px 0 0 #3b6ef5;
  }

  tbody tr.is-selected td {
    color: #1a1a1a;
  }

  /* Status cell */
  .status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.01em;
  }

  .status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
  }

  .status--success .status-icon {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
  }

  .status--success { color: #065f46; }

  .status--failed .status-icon {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
  }

  .status--failed { color: #991b1b; }

  .status--running .status-icon {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
  }

  .status--running { color: #1e40af; }

  .status--pending .status-icon {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
  }

  .status--pending { color: #92400e; }

  .service-name {
    font-weight: 500;
    color: #1a1a1a;
  }

  .region {
    font-family: "SF Mono", "Consolas", "Liberation Mono", Menlo, monospace;
    font-size: 12px;
    color: #4a4a48;
  }

  .deployed-by {
    color: #3d3d3a;
  }

  .duration {
    font-family: "SF Mono", "Consolas", "Liberation Mono", Menlo, monospace;
    font-size: 12px;
    color: #4a4a48;
  }

  .timestamp {
    color: #5c5a56;
    font-size: 12px;
  }
</style>
</head>
<body>
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Status</th>
          <th>Service name</th>
          <th class="sorted">Region <span class="sort-icon">▲</span></th>
          <th>Deployed by</th>
          <th>Duration</th>
          <th>Timestamp</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <span class="status status--success">
              <span class="status-icon">✓</span>
              Success
            </span>
          </td>
          <td class="service-name">auth-gateway</td>
          <td class="region">us-east-1</td>
          <td class="deployed-by">m.chen</td>
          <td class="duration">1m 42s</td>
          <td class="timestamp">2025-03-14 09:12:03</td>
        </tr>
        <tr class="is-selected">
          <td>
            <span class="status status--running">
              <span class="status-icon">▸</span>
              Running
            </span>
          </td>
          <td class="service-name">billing-api</td>
          <td class="region">us-east-1</td>
          <td class="deployed-by">j.okonkwo</td>
          <td class="duration">3m 08s</td>
          <td class="timestamp">2025-03-14 09:18:41</td>
        </tr>
        <tr>
          <td>
            <span class="status status--success">
              <span class="status-icon">✓</span>
              Success
            </span>
          </td>
          <td class="service-name">catalog-worker</td>
          <td class="region">eu-west-1</td>
          <td class="deployed-by">a.petrov</td>
          <td class="duration">2m 15s</td>
          <td class="timestamp">2025-03-14 08:54:19</td>
        </tr>
        <tr class="is-hovered">
          <td>
            <span class="status status--failed">
              <span class="status-icon">✕</span>
              Failed
            </span>
          </td>
          <td class="service-name">image-resizer</td>
          <td class="region">eu-west-1</td>
          <td class="deployed-by">s.nakamura</td>
          <td class="duration">0m 47s</td>
          <td class="timestamp">2025-03-14 08:41:02</td>
        </tr>
        <tr>
          <td>
            <span class="status status--pending">
              <span class="status-icon">○</span>
              Pending
            </span>
          </td>
          <td class="service-name">notify-service</td>
          <td class="region">ap-south-1</td>
          <td class="deployed-by">r.torres</td>
          <td class="duration">—</td>
          <td class="timestamp">2025-03-14 09:22:00</td>
        </tr>
        <tr>
          <td>
            <span class="status status--success">
              <span class="status-icon">✓</span>
              Success
            </span>
          </td>
          <td class="service-name">search-indexer</td>
          <td class="region">us-west-2</td>
          <td class="deployed-by">m.chen</td>
          <td class="duration">4m 33s</td>
          <td class="timestamp">2025-03-14 07:58:44</td>
        </tr>
        <tr>
          <td>
            <span class="status status--success">
              <span class="status-icon">✓</span>
              Success
            </span>
          </td>
          <td class="service-name">session-store</td>
          <td class="region">us-west-2</td>
          <td class="deployed-by">l.brandt</td>
          <td class="duration">1m 09s</td>
          <td class="timestamp">2025-03-14 07:31:16</td>
        </tr>
        <tr>
          <td>
            <span class="status status--failed">
              <span class="status-icon">✕</span>
              Failed
            </span>
          </td>
          <td class="service-name">webhook-relay</td>
          <td class="region">eu-central-1</td>
          <td class="deployed-by">j.okonkwo</td>
          <td class="duration">1m 56s</td>
          <td class="timestamp">2025-03-14 06:47:28</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
</html>

request envelope — prompt redacted

{
  "model": "xai/grok-4.5",
  "system": "Respond with a single complete, self-contained HTML document rendering the component and nothing else. No markdown fences, no explanation. Inline all CSS and JavaScript, reference no external resource. Render the component at its natural size on a neutral background, with enough surrounding space that it can be photographed.",
  "messages": [
    {
      "role": "user",
      "content": "«REDACTED — 87 words, 559 chars»"
    }
  ],
  "maxOutputTokens": 32000,
  "gatewayStringId": "79967a98-155d-437c-bc43-1a033488fd6d"
}