<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>