Duckdb - HTML Example

Create and preview duckdb with HTML, CSS, and JavaScript. Edit code and see the result instantly in a new tab. All code stays private.

Features

Write HTML, CSS, and JavaScript
Instant preview in a new tab
Local execution, no server upload
Full screen preview
Shareable URLs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind v4</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<body class="flex items-center justify-center min-h-screen transition-colors duration-500">
    <div class="bg-white p-12 rounded-3xl shadow-xl text-center border border-slate-100">
        <h1 class="text-4xl font-extrabold text-slate-900 mb-4">Tailwind v4</h1>
        <p class="text-slate-600 mb-8">Modern styling directly in your HTML.</p>
        <button 
            onclick="document.body.classList.toggle('bg-black'); console.log('Toggled background');"
            class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-xl transition-all active:scale-95"
        >
            Toggle Background
        </button>
    </div>
    <script>
        console.log("HTML Preview Loaded");
    </script>
</body>
</html>