JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- http://www.w3.org/QA/2002/04/valid-dtd-list.html -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="content-type" content="text/html;charset=utf-8" />
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
 <style>
 div:focus{background-color:cyan;}
 </style>
 <script type="text/javascript">
 $(document).ready(function(){
 $("#div3").mousedown(function(event){ event.preventDefault(); });
 });
 </script>
</head>
<body>
 <div id="div1" tabindex=1>Div 1 - click me to focus</div>
 <div id="div2" tabindex=2>Div 2 - click me to focus</div>
 <div id="div3">Div 3 - click on me to (erroneously) steal focus in IE<=8. But not in IE9/FF/Chrome.</div>
</body>
</html>