JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css">
<div class="container-fluid">
    <div class="row-fluid">
        <div class="span3">
            <div class="well">sidebar</div><!--/.well -->            
        </div><!--/span-->
        <div class="span9">
            <div class="well">
                <ul class="navpoint-sort">
                    <li>Point 1</li>
                    <li>Point 2
                        <ul class="navpoint-sort">
                            <li>Point 2.1</li>
                            <li>Point 2.2</li>
                        </ul>
                    </li>
                    <li>Point 3</li>
                    <li>Point 4</li>
                    <li>Point 5
                        <ul class="navpoint-sort">
                            <li>Point 5.1</li>
                            <li>Point 5.2</li>
                        </ul>
                    </li>
                </ul>
            </div><!--/.well -->
        </div><!--/span-->
    </div><!--/row-->
</div>

CSS

ul.navpoint-sort {
    position: relative;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul.navpoint-sort > li {  
    position: relative;
    height: 65px;
    margin: 0 0 5px 0;
    padding: 0;
    background-color: #f9f9f9;
    border: 1px solid #DED8D8;
    border-radius: 4px;
    clear: both;
}

ul.navpoint-sort ul.navpoint-sort {   /* nested list */
    position: relative;
    list-style-type: none;
    margin: 5px 0;
    padding: 0;
}
ul.navpoint-sort > li:hover {
    background-color: #F5F5F5;
}