JSFiddle - React, Tailwind, and code Playground

by Jan Marthedal Rasmussen

HTML

This is inline <math><mi>z</mi></math> math and this is a block:

<math display="block">
    <mi>x</mi><mo>+</mo><mi>y</mi>
</math>

(There should be a red box around each math item, turning green on hover. Clicking inside a box should trigger an alert dialog.<br>
<em>Depends on browser</em>: The math items are focusable in which case they should get a blue border. You can tab between the math items.)

CSS

math {
    display: inline;
    border: 2px solid red;
}
math[display="block"] {
    display: block;
    text-align: center;
    margin: 0.5em 0;
}
math:hover {
    border: 2px solid green;
    cursor: pointer;
}
math:focus {
    border: 2px solid blue;
}

JavaScript

$('math').attr('tabindex', 0).on('click', function() { alert('Click!') });