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>Code Sandbox</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }

        textarea {
            width: 80%;
            height: 200px;
            margin-bottom: 20px;
            font-family: monospace;
        }

        button {
            margin-bottom: 10px;
        }

        iframe {
            width: 80%;
            height: 300px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <textarea id="code" placeholder="Enter HTML, CSS, and JavaScript code here"></textarea>
    <button onclick="runCode()">Run Code</button>
    <iframe id="result" sandbox="allow-scripts allow-same-origin"></iframe>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/prism.min.js"></script>
    <script>
        function runCode() {
            const codeTextarea = document.getElementById('code');
            const iframe = document.getElementById('result');
            const code = codeTextarea.value;

            iframe.srcdoc = `
                <html>
                <head>
                    <style>
                        body {
                            margin: 0;
                            padding: 0;
                            font-family: Arial, sans-serif;
                        }
                    </style>
                    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/themes/prism.min.css">
                </head>
                <body>
                    <pre><code class="language-html">${code}</code></pre>
                    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.25.0/components/prism-core.min.js"></script>
                   ...