JSFiddle - React, Tailwind, and code Playground

by anAgent

HTML

<ul>
    <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
    <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
    <li>Pellentesque fermentum dolor.</li>
    <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li>Aliquam tincidunt mauris eu risus.</li>
    <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
    <li>Vestibulum auctor dapibus neque.</li>
</ul>

CSS

ul {
    margin: 12px;
    padding: 0;
}
ul li {
    margin: 0 0 12px 0;
    font-size: .9em;
    line-height: 1em;
}
body:nth-of-type(1) ul li {
    list-style-type:none;
    padding: 0 0 0 45px;
    position:relative;
}
body:nth-of-type(1) ul li:before {
    /*fill it with a blank space*/
    content:"\00a0";
    /*make it a block element*/
    display: block;
    /*adding an 8px round border to a 0x0 element creates an 8px circle*/
    border: solid 9px #000;
    border-radius: 9px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    height: 0;
    width: 0;
    /*Now position it on the left of the list item, and center it vertically
(so that it will work with multiple line list-items)*/
    position: absolute;
    left: 7px;
    top: 40%;
    margin-top: -8px;
}
body:nth-of-type(1) ul li:after {
    /*Add another block-level blank space*/
    content:"\00a0";
    display:block;
    /*Make it a small rectangle so the border will create an L-shape*/
    width: 3px;
    height: 6px;
    /*Add a white border on the bottom and left, creating that 'L' */
    border: solid #fff;
    border-width: 0 2px 2px 0;
    /*Position it on top of the circle*/
    position:absolute;
    left: 14px;
    top: 40%;
    margin-top: -4px;
    /*Rotate the L 45 degrees to turn it into a checkmark*/
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
}