JSFiddle - React, Tailwind, and code Playground

by Exceeder

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.0/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<script type="text/x-mathjax-config">
  MathJax.Ajax.config.path["Contrib"] = "//cdn.mathjax.org/mathjax/contrib";
</script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
   extensions: ["tex2jax.js","[Contrib]/xyjax.js"],
    jax: ["input/TeX","output/HTML-CSS"],
    "HTML-CSS": {
      styles: {".MathJax_Preview": {visibility: "hidden"}}
    },
    tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]},
    TeX: {extensions:   [
    "[Contrib]/xypic.js",
     "AMSmath.js",
     "AMSsymbols.js"
    ]}
    });
</script>

<div>

\[
\begin{xy}
\xymatrix {
X \ar@/_2pc/[rr]_{f;g} \ar[r]^f &Y \ar[r]^g &Z\
}
\end{xy}
\]


$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$

</div>
<div>
\[
\begin{xy}
\xymatrix {
U \ar@/_/[ddr]_y \ar@{.>}[dr]|{\langle x,y \rangle} \ar@/^/[drr]^x \\
 & X \times_Z Y \ar[d]^q \ar[r]_p & X \ar[d]_f \\
 & Y \ar[r]^g & Z
}
\end{xy}
\]
</div>
<div>
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
   <mi title = "Future Value">FV</mi>
        <mo>=</mo>
        <mfrac>
            <mrow><mi>R</mi><mtext>[</mtext>
                <msup>
                    <mrow>
                        <mtext>(</mtext>
                        <mn>1</mn>
                        <mo>+</mo>
                        <mi>i</mi>
                        <mtext>)</mtext>
                    </mrow>
                    <mi>n</mi>
                </msup>
                <mo>-</mo>
                <mn>1</mn>
                <mtext>]</mtext>
            </mrow>
            <mi>i</mi>
        </mfrac>
</math>
</div>