JSFiddle - React, Tailwind, and code Playground

by DaveAlger

HTML

<h4>To Do List</h4>
<ul class='paper'>
  <li>Wake Up</li>
  <li>Brush Teeth</li>
  <li>Drink OJ</li>
  <li>make a note to brush teeth after eating breakfast tomorrow</li>
  <li>call in sick to work</li>
    <li>(if boss says you are out of sick days then call in dead)</li>
  <li>Drive to the gym eventhough it is across the street</li>
  <li>Pretend to wait for a treadmill while watching the food network</li>
  <li>Pick up fast food on the way home</li>
  <li>call your mom</li>
</ul>

CSS

body{padding:20px;}
h4{color:crimson;font-size:42px;letter-spacing:-2px;font-family:sans-serif;}
.paper{border:1px solid #dedede;color:#555;font-family:courier;font-size:20px;padding:0px;width:500px;}
.paper li{border-bottom:1px dotted #ace;list-style:none;padding:10px 10px 10px 55px;position:relative;text-transform:capitalize;}
.paper li:before{border-left:4px double #ffaa9f;content:'';height:110%;left:45px;position:absolute;top:-5%;}
.paper li:hover{background-color:#f0f0f0;}