JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<p><strong>Alternative to Unordered List</strong></p>

<p>Using div tag class and p tag styled with css</p>

<div class="ticklist floatLeft">
<p>Small juicy oranges</p>
<p>Large green apples</p>
<p>Organic bananas</p>
</div>

<div class="ticklist floatLeft">
<p>King Edward potatos</p>
<p>Fresh Welsh leeks</p>
<p>Red hot chillies</p>
</div>

<div class="ticklist floatLeft">
<p>Organic cucumber</p>
<p>Fresh green rocket</p>
<p>Ripe green avocado</p>
</div>

<div class="clear"></div>

<p>Note the float left css and clear div for basic responsive</p>

CSS

body {margin:20px;background-color:#fff;}
.ticklist {}
.ticklist p {margin:0 10px 5px 0;padding:1px 0 0 25px;
background:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAUCAMAAABVlYYBAAAAA3NCSVQICAjb4U/gAAAAwFBMVEU0hhnr6+vDw8OLy2BsuD2dxY3j4+P///+JtndPkjx2slzG7qPS0tL2/PKgzoZ3wkS+vr7n5+d0tk9ImCZcpjfz8/PV6M6y157K1sbb29uu53uCzEuFuHKU3Fb7+/tUoi3r9uXMzMyGsnU6iSCYvIuo0pHf79d/rHLG57KBwVnv7++M1FGVwn+n24C75JrX19ff39/39/eY3VxgrTXGxsbMzMyu2JE+jh/P3cna7sxKmSjJ6bGhz4h4uFTk8NuCwlvvje47AAAACXBIWXMAAAsSAAALEgHS3X78AAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAAQJJREFUGJVlkeFOwjAQgHdTW5DpcuopY3rbAoZYkK5sYcgU3/+tvI4tkPj9aNKv1+vdNdA97ATuN0HvWASTIT5bdsMNgM4Hp0DOJ7PZJNea0OvARzK32zdh2zKDEi1W5Gbl4bvVhl0CTiyTO6aeT92m6dGpkthb2sWeL30VxzuCCMQ6oo9rj85l+SVToBNrzENV3b986/eqqn4MFMpbgHWW+WKfsixbGzXY/eFw+6z1o7AH22VgABg1TfN6I8sIoO5eY1KIi3kgzBeIUd1VJimUUtPleLycItrQdl344ET1FGHUdywarZWDJAprO0zHayhtUdeFLc+TPHlUCuFy6v9+6A9EAiON9+eYYAAAAABJRU5ErkJggg==');
background-repeat:no-repeat;}

.floatLeft {float:left;}
.clear {clear:both;}