index.html

 <!DOCTYPE html>
 <html>
    <head>
        <meta name = 'viewport' content="width=device-width,initial-scale=1.0">
        <title>Live  Code Editor </title>
        <link rel="stylesheet" href="style.css">
        <script src="https://kit.fontawesome.com/d40ebe4c07.js" crossorigin="anonymous"></script>


    </head>
    <body>
        <div class="container">
            <div class="left">
                <label><i class="fa-brands fa-html5">  </i>.       HTML    
                </label>
                <textarea id="html-code" onkeyup="run()"> </textarea>

                <label>
                    <i class="fa-brands fa-css3-alt"></i>.         CSS
                </label>
                <textarea id="css-code" onkeyup="run()" > </textarea>

                <label>
                    <i class="fa-brands fa-square-js"></i>.                    JS
                </label>
                <textarea id="javascript-code" onkeyup="run()" > </textarea>


            </div>
            <div class="right">
                <label>
                    <i class="fa-solid fa-play"></i>.    Output</label>
                
                <iframe id="output"></iframe>
            </div>


        </div>
        <script>
            function run(){
                let htmlCode = document.getElementById("html-code").value;
                let cssCode = document.getElementById("css-code").value;
                let jsCode = document.getElementById("javascript-code").value;
                let output = document.getElementById("output");

                output.contentDocument.body.innerHTML = htmlCode +"<style>"+ cssCode + "</style> ";
                output.contentWindow.eval(jsCode)


            }

        
        </script>


    </body>
 </html>