JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<ul class="level-01">
    <li class="li-level-01">
        <div class="cont">item1
            <ul class="options">
                <li><a href="#">Editer</a></li>
                <li><a href="#">Supprimer</a></li>
            </ul>
        </div>
    </li>
    <li class="li-level-01">
        <div class="cont">item2
            <ul class="options">
                <li><a href="#">Editer</a></li>
                <li><a href="#">Supprimer</a></li>
            </ul>
        </div>
        <ul class="level-02">
            <li class="li-level-02">
                <div class="cont">item1
                    <ul class="options">
                <li><a href="#">Editer</a></li>
                <li><a href="#">Supprimer</a></li>
                    </ul>
                </div>
                <ul class="level-03">
                    <li class="li-level-03">
                        <div class="cont">item1
                            <ul class="options">
                        <li><a href="#">Editer</a></li>
                        <li><a href="#">Supprimer</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </li>
            <li class="li-level-02">
                <div class="cont">item2
                    <ul class="options">
                        <li><a href="#">Editer</a></li>        
                        <li><a href="#">Supprimer</a></li>
                    </ul>
                </div>
            </li>
            <li class="li-level-02">
                <div class="cont">item3
                    <ul class="options">
                <li><a href="#">Editer</a></li>
                <li><a href="#">Supprimer</a></li>
                    </ul>
                </div>
            </li>
        </ul>
    </li>
    <li class="li-level-01">
        <div class="cont">item3
            <ul class="options">
                <li><a href="#">Editer</a></li>
                <li><a...

CSS

body {font-size:12px; font-family:arial; color:#000; padding:10px;}
.options {float:right; font-size:0;}
.options li {display:inline; font-size:12px;}
.options a {display:inline-block; height:100%; padding:0 10px; border-left:1px solid black;}
.level-01 {border-bottom:1px solid #000; background:#999;}
.level-01 .li-level-01 > .cont {border:1px solid #000; border-bottom:none; padding:5px;}

.level-02 {background:#e8e8e8;}
.level-02 .li-level-02 > .cont {padding:5px; padding-left:20px; border:1px solid gray; border-bottom:none;}

.level-03 {background:#FDFDFD;}
.level-03 .li-level-03 > .cont {padding:5px; padding-left:40px; border:1px solid gray; border-bottom:none;}