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;
}
#sidebar li li span {
height: 20px;
width: 50px;
display: inline-block;
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 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 {
}