JSFiddle - React, Tailwind, and code Playground
by Artem Pryanishnikov
HTML
<div class="line_3">
<ul itemscope itemtype="https://schema.org/BreadcrumbList" class="breadcrumb">
<li class="active">
<span class="divider icon-location"></span>
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="/index.php" class="pathway">
<span itemprop="name">Главная
</span>
</a>
<span class="divider">
<img src="/media/system/images/arrow.png" alt="" /> </span>
<meta itemprop="position" content="1">
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="/index.php/kassovoe-oborudovanie" class="pathway">
<span itemprop="name">Кассовое оборудование</span>
</a>
<span class="divider">
<img src="/media/system/images/arrow.png" alt="" /> </span>
<meta itemprop="position" content="2">
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="/index.php/kassovoe-oborudovanie/onlajn-kassy" class="pathway">
<span itemprop="name">Онлайн кассы</span>
</a>
<span class="divider">
<img src="/media/system/images/arrow.png" alt="" /> </span>
<meta itemprop="position" content="3">
</li>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" class="active">
<span itemprop="name">
касса 1</span>
<meta itemprop="position" content="4">
</li>
</ul>
</div>
CSS
ul.breadcrumb {
margin:0;
background:#08437d;
min-width: 1200px;
max-width: 1920px;
margin:0 auto;
padding:10px 0;
height:32px;
}
ul.breadcrumb li{
float:left;
display:block;
height:28px;
margin:1px 1px 0 0;
padding:0 10px;
line-height:28px;
border:1px #1f5c99 solid;
background:#1f5c99;
color:#b8dcff;
text-decoration: none;
}
ul.breadcrumb li span{
color: #b8dcff;
}
ul.breadcrumb>li.active span.divider{
display:none;
}
ul.breadcrumb>li.active span.icon-location{
display:none;
}