JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<span>Clicks:</span> <input id="clicks" value="0"></input>
<div style="background-color:LightGreen"
onclick="$('#clicks').val(parseInt($('#clicks').val()) + 1);"><span class="hard">CLICK THE GREEN AND CLICK IT HARD!</span>
<br/>
<img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS5lQfEXNPKzMGZRHUQJJJj97NFoi1Q4iZ_dT1GK9lrYsjrgd7i5XWsrTA"></img>
<div style="width: 100%; display:inline-block"><span>more text</span></div>
</div>
<span>even more text</span>
<p id="log"></p>
</div>
CSS
.hard {
font-size: 2em;
color: DarkRed;
}
img {
line-height: 3em;
}
/**
* Disallow text selection in general.
*/
body {
-webkit-user-select: none; /* webkit (safari, chrome) browsers */
-moz-user-select: none; /* mozilla browsers */
-khtml-user-select: none; /* webkit (konqueror) browsers */
-ms-user-select: none; /* IE10+ */
}
/**
* White-list all of HTML5's "pure text" elements.
* @see http://www.w3schools.com/tags/
*/
a, abbr, address, b, bdi, bdo, blockquote, br, button, caption, center, cite, code,
col, dd, del, dfn, dt, em, figcaption, footer, h1, h2, h3, h4, h5, h6, i,
input, ins, kbd, label, legend, mark, output, p, pre, q, rp, rt, ruby, s,
samp, small, span, strike, strong, sub, summary, sup, td, textarea, th, time,
title, tt, u, var {
-webkit-user-select: text; /* webkit (safari, chrome) browsers */
-moz-user-select: text; /* mozilla browsers */
-khtml-user-select: text; /* webkit (konqueror) browsers */
-ms-user-select: text; /* IE10+ */
}