JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
    <head>

        <script type="text/javascript">
            function go(transform_function) {
                alert('go');

                transform_function('test');

            }

            function replace(output) {
                alert('rep');

            }

        </script>

    </head>

    <body>

        <form>
            <div class="row">
                <div class="col-lg-6">
                    Find:
                    <textarea id="replace" rows="5" cols="1">to replace</textarea>
                </div>

                <div class="col-lg-6">
                    Replace with:
                    <textarea id="with" rows="5" cols="1">replaced with</textarea>

                </div>
            </div>

            <button type="button" onclick="go(replace)">Replace</button> 

            <div id="output_container" class="bottom-row2">
                <div class="col-lg-12">
                    Output:
                    <textarea id="out" rows="5" cols="1"></textarea>
                </div>
            </div>

        </form>

    </body>
</html>