JSFiddle - React, Tailwind, and code Playground

List styles for clientResponse

by Jennifer Perrin

HTML

<div class="sidebarLists">
    <ul>
        <li><a class="sbLinks" href="#"><span>Payment Date:</span> 2012-12-21<br /><span>Amount:</span> 250.00</a></li>
        <li><a class="sbLinks" href="#"><span>Payment Date:</span> 2012-12-21<br /><span>Amount:</span> 250.00</a></li>
        <li><a class="sbLinks" href="#"><span>Payment Date:</span> 2012-12-21<br /><span>Amount:</span> 250.00</a></li>
    </ul>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Cuprum);
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 100%;
}

html,body { height: 100%; }

body {
    background: url(http://jenniferperrin.com/clients/images/body-bg.gif) 0 0 repeat;
    margin: 10px 20px;
    padding: 0;
}
a { text-decoration: none; }

.sbLinks {
    display: inline-block;
    width: 100%;
    padding: 6px 10px;
    margin-bottom: 2px;
    background-color: #F8F9FB;
}
.sbLinks:hover { background-color: #fff; }

.sbLinks span { 
    margin-right: 6px; 
    font-family: 'Cuprum', Arial, sans-serif; 
    font-size: 14px; 
}
.sidebarLists { padding: 6px 6px 6px 0; }

.sidebarLists a { color: #444; }
.sidebarLists a:hover { text-decoration: none; }

.sidebarLists ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
}
    .sidebarLists ul li { display: inline; }
    .sidebarLists ul li a:hover { opacity: 0.8; }