JSFiddle - React, Tailwind, and code Playground

by stchangg

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div class="nav-wrapper">
            <ul class="nav nav-list">
                <li class="nav-header">Howdy</li>
                <li>
                    <div class="circle"></div>
                    <a href="">Hello there</a>
                </li>
                <li>
                    <div class="circle"></div>
                    <a href="">Hello there</a>
                </li>
                <li>
                    <div class="circle"></div>
                    <a href="">Hello there</a>
                </li>
                <li>
                    <div class="circle"></div>
                    <a href="">Hello there</a>
                </li>
                <li>
                    <div class="circle"></div>
                    <a href="">Hello there</a>
                </li>
            </ul>
        </div>

CSS

li {
    height: 20px;
    margin-bottom: 15px;
    position: relative;
}

ul.nav-list li a {
    position: absolute;
    top: 0;
    left: 25px;
    font-size: 15px;
    font-family: "Helvetica Neue", Arial;
    height: 100%;
}

.circle {
    height: 24px;
    width: 12px;
    border-radius: 10px;
    border-width: 2px;
    border-style: solid;
    background: white;
    border-color: #96B9D1;
    position: absolute;
    top: 0;
    left: 0;
}