JSFiddle - React, Tailwind, and code Playground

by faltech

HTML

<div id="indention">
<ul>
<li><a href="#">test 1</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
<li><a href="#">tset 4</a></li>
</ul>

<div class="impressed">
sample content
</div>
<div class="depressed">
sample content
</div>

<img class="white" src="http://farm8.staticflickr.com/7058/6931819749_9b26a35c01_o.jpg" width="50" height="50"/>
<img class="black" src="http://farm4.staticflickr.com/3233/2925442983_ce5178b950_t.jpg" width="50" height="50"/>
</div>

CSS

#indention ul{
    margin: 20px 0; padding: 0;
    list-style: none;
}
#indention ul li {
    border-top: 1px solid #333;
    border-bottom: 1px solid #111;
}
#indention ul li:first-child {border-top: none;}
#indention ul li:last-child {border-bottom: none;}
#indention ul li a {
    padding: 10px;
    display: block;
    color: #fff;
    text-decoration: none;
}
#indention ul li a:hover {background: #111;}
body{background:#1b1b1b;}

.depressed {
    padding: 20px;
    border: 1px solid #f0f0f0;
    border-bottom: 2px solid #ccc;
    -webkit-border-radius: 5px; /* for chrome, safari*/
    -moz-border-radius: 5px; /*for mozilla*/
    border-radius: 5px;    /*  */
}

.impressed {
    color: #fff;
    padding: 20px;
    background: #111;
    border: 1px solid #000;
    border-right: 1px solid #353535;
    border-bottom: 1px solid #353535;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

img.white {
    outline: 1px solid #ddd;
    border-top: 1px solid #fff;
    padding: 10px;
    background: #f0f0f0;
}
img.black {
    outline: 1px solid #111;
    border-top: 1px solid #555;
    padding: 10px;
    background: #333;
}