JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<ul id="breadcrumbs-zero">
            <li><a href="#">Home</a></li>
            <li><a href="#">Level #1</a></li>
            <li><a href="#">Level #1-1</a></li>
            <li><a href="#">Level #1-1-1</a></li>
            <li class="current">Current Level</li>
        </ul>
    
        <ul id="breadcrumbs-one">
            <li><a href="#">Home</a></li>
            <li><a href="#">Level #1</a></li>
            <li><a href="#">Level #1-1</a></li>
            <li><a href="#">Level #1-1-1</a></li>
            <li>Current Level</li>
        </ul>
        
        <ul id="breadcrumbs-two">
            <li><a href="#">Home</a></li>
            <li><a href="#">Level #1</a></li>
            <li><a href="#">Level #1-1</a></li>
            <li><a href="#">Level #1-1-1</a></li>
            <li>Current Level</li>
        </ul>
        
        <ul id="breadcrumbs-three">
            <li><a href="#">Home</a></li>
            <li><a href="#">Level #1</a></li>
            <li><a href="#">Level #1-1</a></li>
            <li><a href="#">Level #1-1-1</a></li>
            <li>Current Level</li>
        </ul>
        
        <ul id="breadcrumbs-four">
            <li><a href="#">Home</a></li>
            <li><a href="#">Level #1</a></li>
            <li><a href="#">Level #1-1</a></li>
            <li><a href="#">Level #1-1-1</a></li>
            <li>Current Level</li>
        </ul>
        
        <ul id="breadcrumbs-five">
            <li><a href="#">Home</a></li>
            <li><a href="#">Level #1</a></li>
            <li><a href="#">Level #1-1</a></li>
            <li><a href="#">Level #1-1-1</a></li>
            <li>Current Level</li>
        </ul>
        
        <ul id="breadcrumbs-six">
            <li><a href="#">Home</a></li>
            <li><a href="#">Level #1</a></li>
            <li><a href="#">Level #1-1</a></li>
            <li><a href="#">Level #1-1-1</a></li>
            <li>Current Level</li>
        </ul>
        
        <ul id="breadcrumbs-seven">
      ...

CSS

*{
            margin: 0;
            padding:0;
        }
        
        body {
            font:14px Arial,Helvetica;
            color: #444;
            margin: 50px auto;
            padding: 50px;
            width: 80%;
        }
        
        ul {
            list-style:none outside none;
            margin-bottom: 15px;
        }
        
        ul li {
            float: left;
            display: inline;
        }
        
        ul a {
            text-decoration: none;
        }
        
        /*Breadcrumbs Zero*/
        #breadcrumbs-zero {
            overflow: hidden;
            border: 1px solid #c9c9c9;
            width: 70%;
        }    
        #breadcrumbs-zero li {
            float: left;
            color: #777;
            padding-left: 1em;
        }
        
        #breadcrumbs-zero a {
            background: url("http://www.w3cplus.com/sites/default/files/breadcrums.jpg") no-repeat right center;
            float: left;
            padding: 1em 1.5em 1em 0; 
            color: #777;
        }
        
        #breadcrumbs-zero a:hover {
            color: #222;
        }
        #breadcrumbs-zero li.current {
            padding: 1em 1.5em 1em 1em;
            font-weight: bold;
            color: #222;
        }
        /*Breadcrumbs one*/
        #breadcrumbs-one {
            background-color: #eee;
            border: 1px solid #ccc;
            border-color: #f5f5f5 #e5e5e5 #ccc;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            -moz-box-shadow: 0 0 2px rgba(0,0,0,0.2);
            -webkit-border-radius: 5px;
            border-radius: 5px;
            overflow: hidden;
            width: 70%;
        }
        
        #breadcrumbs-one a,
        #breadcrumbs-one li:last-child    {
            padding: 0.7em 1em 0.7em 2em;
            float: left;
            color: #444;
            position: relative;
            text-shadow: 0 1px 0...