JSFiddle - React, Tailwind, and code Playground

HTML

<div class="studio_news"> 
    <ul> 
        <li><div class="date">29 апреля 2012</div><a href="#">Новость Новость Новость Большое расстояние</a></li> 
        <li><div class="date">28 апреля 2012</div><a href="#">Новость Новость Новость Большое расстояние</a></li> 
        <li><div class="date">25 апреля 2012</div><a href="#">Новость Новость Новость Большое расстояние</a></li> 
        <li><div class="date">16 апреля 2012</div><a href="#">Новость Новость Новость Большое расстояние</a></li> 
        <li><div class="date">9 апреля 2012</div><a href="#">Новость Новость Новость Большое расстояние</a></li>
        <li><div class="all"><a href="#">Все новости</a></div></li> 
    </ul> 
</div>

CSS

.studio_news  
{ 
    background-color: #FFFFFF; 
    padding: 15px; 
    font-family: Verdana; 
    width: 180px; 
    border-radius: 6px; 
    -moz-border-radius: 6px; 
    box-shadow: 0 3px 10px #e1e5e8, 0 0 10px #F6F5F5 inset; 
    line-height: 25px; 
    margin-top: -5px;   
} 
.studio_news ul li a  
{ 
    color: #2e83c6; 
    font-size: 11px; 
    text-decoration: none; 
    border-bottom: 1px dotted; 
    font-weight: bold;    
} 

.studio_news ul li a:hover  
{ 
    color: #ff8400; 
    font-size: 11px; 
    font-weight: bold;
    
} 
.studio_news ul .all 
{ 
    float: right;  
} 

.studio_news ul .all a 
{ 
     color: #ff843b; 
     font-size: 11px; 
} 
.studio_news ul .all a:hover 
{ 
     color: #2e83c6; 
     font-size: 11px; 
     border-bottom: 0 dotted; 
} 

.studio_news ul  
{  
    text-decoration: none;  
    font-weight: bold; 
    list-style-type: none; 
    margin: 0 0 20px -40px;
} 

.date 
{ 
    font-family: Verdana; 
    font-weight: normal; 
    font-size: 11px; 
    color: #cd0f00; 
    margin: 0 0 -10px; 
}