<div class="space-y-4">
  <div class="breadcrumb tiny">
    <a href="#"><i class="icon house"></i> Home</a>
    <i class="icon chevron-right"></i>
    <a href="#">Products</a>
    <i class="icon chevron-right"></i>
    <div>Tiny</div>
  </div>
  <div class="breadcrumb small">
    <a href="#"><i class="icon house"></i> Home</a>
    <i class="icon chevron-right"></i>
    <a href="#">Products</a>
    <i class="icon chevron-right"></i>
    <div>Small</div>
  </div>
  <div class="breadcrumb">
    <a href="#"><i class="icon house"></i> Home</a>
    <i class="icon chevron-right"></i>
    <a href="#">Products</a>
    <i class="icon chevron-right"></i>
    <div>Default</div>
  </div>
  <div class="breadcrumb large">
    <a href="#"><i class="icon house"></i> Home</a>
    <i class="icon chevron-right"></i>
    <a href="#">Products</a>
    <i class="icon chevron-right"></i>
    <div>Large</div>
  </div>
  <div class="breadcrumb big">
    <a href="#"><i class="icon house"></i> Home</a>
    <i class="icon chevron-right"></i>
    <a href="#">Products</a>
    <i class="icon chevron-right"></i>
    <div>Big</div>
  </div>
</div>

<div class="breadcrumb">
  <a href="#"><i class="icon house h-4 w-4"></i></a>
  <i class="icon chevron-right"></i>
  <a href="#">Products</a>
  <i class="icon chevron-right"></i>
  <div>Electronics</div>
</div>

<div class="breadcrumb">
  <a href="#">
    <i class="icon settings"></i>
    Settings
  </a>
  <i class="icon chevron-right"></i>
  <a href="#">
    <i class="icon bell"></i>
    Notifications
  </a>
  <i class="icon chevron-right"></i>
  <div>
    <i class="icon mail"></i>
    Email Notifications
  </div>
</div>

<div class="breadcrumb">
  <a href="#">Home</a>
  <i class="icon chevron-right"></i>
  <a href="#">Blog</a>
  <i class="icon chevron-right"></i>
  <div>The Power of Minimalism in Design</div>
</div>

<div class="breadcrumb">
  <a href="#">Home</a>
  <div class="separator">/</div>
  <a href="#">Products</a>
  <div class="separator">/</div>
  <div>Electronics</div>
</div>

<div class="space-y-4">
  <div class="breadcrumb primary">
    <a href="#"><i class="icon house"></i> Home</a>
    <i class="icon chevron-right"></i>
    <a href="#">Products</a>
    <i class="icon chevron-right"></i>
    <div>Primary</div>
  </div>
  <div class="breadcrumb positive">
    <a href="#"><i class="icon house"></i> Home</a>
    <i class="icon chevron-right"></i>
    <a href="#">Products</a>
    <i class="icon chevron-right"></i>
    <div>Positive</div>
  </div>
  <div class="breadcrumb negative">
    <a href="#"><i class="icon house"></i> Home</a>
    <i class="icon chevron-right"></i>
    <a href="#">Products</a>
    <i class="icon chevron-right"></i>
    <div>Negative</div>
  </div>
  <div class="breadcrumb warning">
    <a href="#"><i class="icon house"></i> Home</a>
    <i class="icon chevron-right"></i>
    <a href="#">Products</a>
    <i class="icon chevron-right"></i>
    <div>Warning</div>
  </div>
  <div class="breadcrumb purple">
    <a href="#"><i class="icon house"></i> Home</a>
    <i class="icon chevron-right"></i>
    <a href="#">Products</a>
    <i class="icon chevron-right"></i>
    <div>Purple</div>
  </div>
  <div class="breadcrumb teal">
    <a href="#"><i class="icon house"></i> Home</a>
    <i class="icon chevron-right"></i>
    <a href="#">Products</a>
    <i class="icon chevron-right"></i>
    <div>Teal</div>
  </div>
</div>