JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<ul>
    <li class="item" id="turf">
        <h2>Turf Irrigation</h2>
        <p>AMC is proud to offer our customers the best products from the irrigation industry for installation, repair, and maintenance.</p>
    </li>

    <li class="item" id="golf">
        <h2>Golf Irrigation</h2>
        <p>As the exclusive Rain Bird Golf distributor in west and southern Texas and Oklahoma, AMC can provide the equipment needed for any golf installation.</p>
    </li>
        
    <li class="item" id="ext">
        <h2>Exterior Enhancements</h2>
        <p>With hundreds of products to choose from, AMC can help you find the perfect lighting and pond products for your customer.</p>  
    </li>
        
    <li class="item" id="water">
        <h2>Water Systems</h2>
        <p>With the top lines of water well and water systems equipment (pumps, pipe, casing, wire, etc.), AMC can fulfill all of your water system needs.</p>
    </li>
</ul>

CSS

ul { width:350px; background-color:#DEEBE4; list-style-type:none; padding:10px; }
.item { margin-bottom: 20px; background-position: left top; background-repeat: no-repeat; font-family: Arial,Helvetica,sans-serif; font-size: 14px; padding-left: 50px; }
.item h2 { font-size: 14px; margin:0px; }
.item p { margin:0px; }

#turf { background-image: url(http://rkassoc.net/AMC/images/icon_turf.gif); }
#golf { background-image: url(http://rkassoc.net/AMC/images/icon_golf.gif); }
#ext { background-image: url(http://rkassoc.net/AMC/images/icon_light.gif); }
#water { background-image: url(http://rkassoc.net/AMC/images/icon_water.gif); }