JSFiddle - React, Tailwind, and code Playground

by alekskorovin

HTML

<ul class="list widget-list">
    <li>
        <a href="#link">Some interesting news</a>
        <span class="date wl-date">25.07.2012</span>
    </li>
    <li>
        <a href="#link">Some other interesting news</a>
        <span class="date wl-date">24.07.2012</span>
    </li>
    <li>
        <a href="#link">Upcoming events</a>
        <span class="date wl-date">23.07.2012</span>
    </li>
</ul>
<ul class="list widget-list-alt">
    <li>
        Lorem Ipsum <a href="#link">read something new</a>
        <span class="date wla-date">17:05 | 25.07.2012</span>
    </li>
    <li>
        Don't miss <a href="#link">your chance!</a>
        <span class="date wla-date">15:50 | 24.07.2012</span>
    </li>
    <li>
        Summer proposal <a href="#link">special for you!</a>
        <span class="date wla-date">19:15 | 23.07.2012</span>
    </li>
</ul>

CSS

.list {
    font: 1.0em normal Arial, Helvetica, sans-serif;
    float: left;    
}
.list li:first-child {
    border: 0;   
}
.list li {
    border-top: solid 1px #ccc;
    padding: 5px;
}
.widget-list li:before {
    content: '◈';   
}
.date { 
    font-size: 0.7em;   
}
.list a {
    color: #00c;
    text-decoration: none;    
}
.list a:hover {
    color: #000;   
}
.widget-list-alt {
    margin-left: 1em;    
}
.wla-date {
    display: block;    
}