JSFiddle - React, Tailwind, and code Playground

by gryzzly

HTML

<h1>Event handlers are attached to the items directly</h1>
<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ul>
<h1>Event delegation is used</h1>
<ul>
   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
   <li>Aliquam tincidunt mauris eu risus.</li>
   <li>Vestibulum auctor dapibus neque.</li>
</ul>

CSS

body {
    font-family:helvetica, arial, sans-serif;
}
li {
    background: #5a89ff;
    border-top: 1px solid white;
    border-bottom: 1px solid #444;
    color:#fff;
    text-shadow:1px 1px 0 #333;
    padding:10px;
}