JSFiddle - React, Tailwind, and code Playground

HTML

<label for="input">Latex equation: </label>
<!-- <input type="text" name="input"> -->
<br><textarea rows="10" cols="50" name="input"></textarea>
<br><br>

<button onClick="toGithubRenderURL()">Encode to github render URL</button>
<br><br>

<label for="output">The URL is: </label>
<input type="url" name="output">
<br><br>

<label for="result">The result is: </label>
<p id="result"></p>

CSS

input {
    width: 95%;
}

JavaScript

function toGithubRenderURL() {
    var input = document.getElementsByName('input')[0].value;
    var output = '<img src="https://render.githubusercontent.com/render/math?math=' + encodeURIComponent(input) + '">';
    document.getElementsByName('output')[0].value = output;
    document.getElementById('result').innerHTML = output;
}