JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<!--<div class="c">
    <div class="row">
        <div class="placeholder"></div>
        <span class="text">One<br />1</span>
        <div class="row">
            <div class="placeholder"></div>
            <span class="text">Two</span>
            <div class="row">
                <div class="placeholder"></div>
                <span class="text">Three</span>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="placeholder"></div>
        <span class="text">One</span>
        <div class="row">
            
            <div class="text"><div class="placeholder"></div>Two</div>
            <div class="row">
                <div class="placeholder"></div>
                <span class="text">Three</span>
            </div>
        </div>
    </div>
</div>
-->

<div id="c">
<ul>
    <li>
        <div class="row"><div class="placeholder"></div><div class="text" space=" dd" >One</div></div>
        <div class="row">
        <ul>
            <li>
                <div class="row"><div class="placeholder"></div><div class="text">Two<br />Two.2</div></div>
                        
                <div class="row">
                <ul>
                    <li>
                        <div class="row"><div class="placeholder"></div><div class="text">Three<br />Three.3</div></div>
                        
                <div class="row">
                <ul>
                    <li>
                        <div class="row"><div class="placeholder"></div><div class="text">Three<br />Three.3</div></div>
                        
                <div class="row">
                <ul>
                    <li>
                        <div class="row"><div class="placeholder"></div><div class="text">Three<br />Three.3</div></div>
                        
                <div class="row">
                <ul>
                    <li>
                        <div class="row"><div class="placeholder"></div><div class="text">Three<br...

CSS

ul, li { margin: 0; padding:0;}
/*
.c { position:relative;}
.row {
    padding-left: 1ch;
}
.text {
    display:block;
}

.placeholder {
    position:absolute;
    left: 0;
    right: 0;
    background: #fee;
    height: 100%;
    display: block;
    z-index: -1;
}
.placeholder.over {
    background: red;
}
*/
#c  {
    mfargin-left: -1000em;
}
li {
    padding-left: 1010px;
    margin-left: -1000px;
}
.row { position: relative; }
.row:before { position:absolute; left: 0; right:0; top: 0; bottom: 0; background: red; }
li:hover {
    background:red;
}
li:hover ul {
    background: white;
}
li:hover ul:before {
    content: "";
    position:absolute;
    left:-1000px;
    right:0;
    height: 100%;
    background: green;
    z-index: -1;
}

/*
li {
    font-size: 1.001em;
}

.text {
    font-size: 1rem;
}

.placeholder {
    width: 1000em;
    max-width: calc(1000em + 10px);
    background: red;
}

.row > * {
    display: table-cell;
}
.row {
    display: table;
}*/

JavaScript

/*[].forEach.call(document.querySelectorAll(".placeholder"), function(r) {
    r.addEventListener("mouseover", function(e) {
        this.classList.add("over");
        e.stopPropagation();
    }, false);
    r.addEventListener("mouseout", function(e) {
        this.classList.remove("over");
       e.stopPropagation();
    }, false);
});*/