x
1
<!DOCTYPE html>
2
<html>
3
<head>
4
    <meta charset="utf-8">
5
    <script src="https://cdn.tailwindcss.com"></script>
6
</head>
7
<body class="bg-gray-50 min-h-screen flex items-center justify-center p-4">
8
    <div class="max-w-sm w-full bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow">
9
        <div class="p-4 border-b flex items-center justify-between">
10
            <span class="text-xl">✨ Welcome!</span>
11
            <span class="text-gray-400 hover:text-gray-600 cursor-pointer">×</span>
12
        </div>
13
        <div class="p-4">
14
            <p class="text-gray-600">Start editing to see the magic happen ✨</p>
15
            <button class="mt-3 block w-full bg-blue-500 text-white text-center py-2 rounded-md hover:bg-blue-600">
16
                Get Started
17
            </button>
18
        </div>
19
    </div>
20
</body>
21
</html>

Share Your Code

Option 1: Share via GitHub Gist (Recommended)

Create a new Gist at gist.github.com, paste your code, click "Raw" after saving, then add the raw URL to: https://realtimehtml.com/tailwind.html#https://gist.githubusercontent.com/user/id/raw/...

Option 2: Quick Share (URL Compressed)

Get an instantly shareable link with your code compressed into the URL (max 1200 lines).

Option 3: Embed Code

Add this HTML code to embed the editor in your website. You can test the embed code in this editor itself:

Available Editors

HTML/CSS/JS

Real-time HTML, CSS, and JavaScript editor with live preview

Svelte

Svelte component editor with Tailwind CSS support

Markdown

Markdown editor with instant preview and GitHub flavor

GLSL Shader

WebGL shader editor with Shadertoy compatibility

Tailwind CSS

Tailwind CSS playground with class suggestions

For payment-related issues or refund requests, please contact me@davidb.dev