JSFiddle - React, Tailwind, and code Playground

by Caleb Wong

HTML

<ul class="link-list" id="UL_1">
	<li id="LI_2">
		 <a href="http://www.smh.com.au/business/banking-and-finance/qbe-takes-4b-hit-on-profit-downgrade-chairs-exit-20131209-2yzyi.html" id="A_3">Fairfax takes $4b hit on profit unlucky: QBE says sorry</a>
	</li>
	<li id="LI_4">
		 <span class="kicker" id="SPAN_5">Adele Ferguson</span> <a href="http://www.smh.com.au/business/comment-and-analysis/third-time-unlucky-qbe-says-sorry-again-20131209-2z0td.html" id="A_6">Third time unlucky: QBE says naperville engineer sorry </a>
	</li>
	<li id="LI_7">
		 <a href="http://news.smh.com.au/breaking-news-business/shareholders-vote-to-demerge-amcor-firms-20131209-2z08f.html" id="A_8">Shareholders vote to demerge Amcor institutes american</a>
	</li>
	<li id="LI_9">
		 <span class="kicker" id="SPAN_10">Housing</span> <a href="http://www.smh.com.au/business/world-business/new-zealand-house-prices-at-record-high-20131209-2z0oh.html" id="A_11">New Zealand house prices at record without blah</a>
	</li>
	<li id="LI_12">
		 <a href="http://news.smh.com.au/breaking-news-business/qbe-shares-plunge-nearly-20-20131209-2z016.html" id="A_13">QBE shares plunge nearly 20%</a>
	</li>
</ul>

CSS

#UL_1 {
    height: 138px;
    width: 300px;
    border-top: 1px dotted rgb(223, 225, 227);
    font: normal normal normal 12px/17px Arial, Helvetica, sans-serif;
    margin: 6px 0px 0px;
    padding: 0px;
}/*#UL_1*/

#LI_2, #LI_4, #LI_7, #LI_9 {
    height: 16px;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 286px;
    border-bottom: 1px dotted rgb(223, 225, 227);
    font: normal normal normal 12px/17px Arial, Helvetica, sans-serif;
    list-style: none outside none;
    overflow: hidden;
    padding: 6px 14px 6px 0px;
}/*#LI_2, #LI_4, #LI_7, #LI_9*/

#A_3, #A_6, #A_11, #A_13 {
    color: rgb(51, 51, 51);
    text-align: left;
    text-decoration: none solid rgb(51, 51, 51);
    white-space: nowrap;
    border: 0px none rgb(51, 51, 51);
    font: normal normal normal 12px/17px Arial, Helvetica, sans-serif;
    list-style: none outside none;
    outline: rgb(51, 51, 51) none 0px;
}/*#A_3, #A_6, #A_11, #A_13*/

#SPAN_5, #SPAN_10 {
    color: rgb(4, 111, 184);
    text-align: left;
    text-decoration: none solid rgb(4, 111, 184);
    white-space: nowrap;
    border: 0px none rgb(4, 111, 184);
    font: normal normal bold 12px/17px Arial, Helvetica, sans-serif;
    list-style: none outside none;
    margin: 0px 2px 0px 0px;
    outline: rgb(4, 111, 184) none 0px;
}/*#SPAN_5, #SPAN_10*/

#A_8 {
    color: rgb(51, 51, 51);
    text-align: left;
    text-decoration: none solid rgb(51, 51, 51);
    white-space: nowrap;
    border: 0px none rgb(51, 51, 51);
    font: normal normal normal 12px/17px Arial, Helvetica, sans-serif;
    list-style: none outside none;
    outline: rgb(51, 51, 51) none 0px;
}/*#A_8*/

#LI_12 {
    height: 16px;
    position: relative;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 286px;
    font: normal normal normal 12px/17px Arial, Helvetica, sans-serif;
    list-style: none outside none;
    overflow: hidden;
    padding: 6px 14px 0px 0px;
}/*#LI_12*/