JSFiddle - React, Tailwind, and code Playground

by Justin Breen

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div>
    <p class="list-heading"><strong>This is the header.</strong></p>
    <ul class="list">
        <li>This is list item number one.</li>
        <li>This would be the second list item.</li>
        <li>Here would be the third list item.  Let's make this one a little longer so it wraps onto a second line.  Might need a bit more text.</li>
        <li>And finally, the fourth thingy.</li>
    </ul>
    <p class="list-heading"><strong>This is second the header.</strong></p>
    <ul class="list">
        <li>This is list item number one.</li>
        <li>This would be the second list item.</li>
        <li>Here would be the third list item.  Let's make this one a little longer so it wraps onto a second line.  Might need a bit more text.</li>
        <li>And finally, the fourth thingy.</li>
    </ul>
    <p class="list-heading"><strong>This is third the header.</strong></p>
    <ul class="list">
        <li>This is list item number one.</li>
        <li>This would be the second list item.</li>
        <li>Here would be the third list item.  Let's make this one a little longer so it wraps onto a second line.  Might need a bit more text.</li>
        <li>And finally, the fourth thingy.</li>
    </ul>
</div>

CSS

* {
    font-family: helvetica, arial, sans-serif;
}
body {
    line-height: 1.3333em;
}


.list
{
	margin: 1em;
	padding: 0;
}.list li {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	line-height: 1.4;
}.list li li {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	font-size: 0.875em;
}

.list-heading
{
	margin-top: 1em;
	font-size: 1.2em;
    line-height: 1.4;
}

.list-unstyled li { list-style: none !important; }
.list-decimal li  { list-style-type: decimal !important; }
.list-disc li     { list-style-type: disc !important; }
.list-square li   { list-style-type: square !important; }