JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sidebar">
            
            
            <ul>
    <li>
        <h2>Наши газоны</h2>
        <ul>
                <li><span>90 руб.</span><a href="/catalogs/zheltyi-gazon">Желтый газон</a></li>
                <li><span>100 руб.</span><a href="/catalogs/zelenyi-gazon-klassa-elit">Зеленый газон класса "Элит"</a></li>
        </ul>
</li></ul>

            
        </div>

CSS

/* Sidebar */

#sidebar {
    float: right;
    width: 273px;
    padding: 0px;
    color: #787878;
}

#sidebar ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#sidebar ul.points {
    margin-left: 16px;
    padding-bottom: 20px;
    list-style: disc;
}

#sidebar li {
    margin: 0;
    padding: 0;
}

#sidebar li ul {
    margin: 0px 0px;
    padding-bottom: 20px;
}

#sidebar li li {
    line-height: 20px;
    margin: 0px;
    padding: 2px 0px;
    border-left: none;
    overflow:hidden;
}

#sidebar li li span {
    height: 20px;
    width: 50px;
    float:left;
    margin-right: 16px;
    padding: 4px 12px;
    background: #3D2A0B url(img12.jpg) repeat-x left top;
    font-size: 12px;
    color: #FFFFFF;
    text-align: right;
}
#sidebar li li a {
    float:left;
    width:183px;
    padding-top:4px;
    
}

#sidebar li li span a {
    color: #FFFFFF;
}

#sidebar h2 {
    height: 65px;
    background: url(img09.jpg) no-repeat left bottom;
    letter-spacing: -.5px;
    font-size: 28px;
    color: #493E2B;
}

#sidebar p {
    margin: 0 0px;
    padding: 0px 0px 30px 0px;
    text-align: justify;
}

#sidebar p strong {
    color: #4A3E29;
}

#sidebar a {
    border: none;
}

#sidebar a:hover {
}