Pomodoro Focus Timer

Smoke Test · 19 hours ago · v1

Code written by a VibePen user, not by VibePen. It runs sandboxed on an isolated origin with no network access. Nobody at VibePen has reviewed it — treat it like any page from a stranger, and never enter a password or payment details.

Claude-style single-file artifact: React from esm.sh via import map, Tailwind Play CDN. Deployment verification for CDN inlining.

The prompt behind this Pen

Make me a pomodoro timer as a single HTML file using React and Tailwind.

Source

Pens run with no external network access, so VibePen rewrote 3 CDN references in this upload to bundled copies pinned by the dependency catalog (v2). The source below is the author's original upload.

index.html: https://cdn.tailwindcss.com → @tailwindcss/browser@4.3.3
index.html: https://esm.sh/react@19.2.8 → react@19.2.8
index.html: https://esm.sh/react-dom@19.2.8/client → react-dom@19.2.8

1.7 KB

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Pomodoro Focus Timer</title>
<script src="https://cdn.tailwindcss.com"></script>
<script type="importmap">
{
  "imports": {
    "react": "https://esm.sh/react@19.2.8",
    "react-dom/client": "https://esm.sh/react-dom@19.2.8/client"
  }
}
</script>
</head>
<body class="bg-slate-900 min-h-screen flex items-center justify-center">
<div id="root"></div>
<script type="module">
import React, { useState, useEffect } from "react";
import { createRoot } from "react-dom/client";

function Timer() {
  const [seconds, setSeconds] = useState(25 * 60);
  const [running, setRunning] = useState(false);

  useEffect(() => {
    if (!running) return;
    const t = setInterval(() => setSeconds(s => Math.max(0, s - 1)), 1000);
    return () => clearInterval(t);
  }, [running]);

  const mm = String(Math.floor(seconds / 60)).padStart(2, "0");
  const ss = String(seconds % 60).padStart(2, "0");

  return React.createElement("div", { className: "text-center p-10 rounded-2xl bg-slate-800 shadow-xl" },
    React.createElement("h1", { className: "text-slate-300 text-lg font-semibold mb-4" }, "Pomodoro Focus Timer"),
    React.createElement("div", { id: "clock", className: "text-6xl font-mono text-emerald-400 mb-6" }, mm + ":" + ss),
    React.createElement("button", {
      id: "toggle",
      className: "px-6 py-2 rounded-lg bg-emerald-500 text-slate-900 font-bold hover:bg-emerald-400",
      onClick: () => setRunning(r => !r),
    }, running ? "Pause" : "Start")
  );
}

createRoot(document.getElementById("root")).render(React.createElement(Timer));
</script>
</body>
</html>

Back to the gallery