JSFiddle - React, Tailwind, and code Playground

by bnickel

HTML

<h1>Tests</h1>
<h2>&lt;img alt title&gt;</h2>
<img src="https://www.google.com/images/srpr/logo3w.png" alt="Alt text" title="Title text">

<h2>&lt;input type="image" alt title&gt;</h2>
<input type="image" src="https://www.google.com/images/srpr/logo3w.png" alt="Alt text" title="Title text">

<h2>&lt;input type="checkbox" title&gt;</h2>
<input type="checkbox" title="Title text">

<h2>&lt;input type="radio" title&gt;</h2>
<input type="radio" title="Title text">

<h2>&lt;input type="text" value title&gt;</h2>
<input type="text" title="Title text" value="Value text">

<h2>&lt;select title&gt;</h2>
<select title="Title text">
    <option title="Title text">Option with title text</option>
    <option>Option without title text</option>
</select>

<h2>&lt;textarea title /&gt;</h2>
<textarea title="Title text">
Value text
</textarea>

<h2>&lt;div title&gt;</h2>
<div title="Title text">Body text</div>

<h2>&lt;div aria-label&gt;</h2>
<div title="Title text" aria-label="Label text">Body text</div>


<h2>&lt;div aria-labelledby&gt;</h2>
<div title="Title text" aria-labelledby="label-element">Body text</div>
<div id="label-element" style="display:none">Label text</div>

CSS

h1 {
    font-weight: bold;
    font-size: 1.5em;
    margin-top: 0.5em;
}

h2 {
    font-weight: bold;
    font-size: 1.25em;
    margin-top: 0.5em;
}