JSFiddle - React, Tailwind, and code Playground

by mtkzz

HTML

<div id="sidebar-primary">
<div class="top-side">&nbsp;</div>
    <ul class="widget-container">
        <li class="widget widget_recent_comments" id="recent-comments-2">
            <h3 class="widgettitle">عنوان</h3><ul id="recentcomments">
            <li class="recentcomments">
                <a class="url" rel="external nofollow" href="http://wordpress.org/">آقای وردپرس</a> در <a href="http://localhost:8080/wp/?p=1#comment-1">سلام دنیا!</a>
            </li>
            </ul>
        </li>
    </ul>    
</div>

CSS

body{
      direction: rtl;
    text-align:right;
}
.widget-container {
    list-style-type: none;
    list-style: none;
    margin: 7px 0 0;
    padding: 0;
    color: #2E4444;
    font-size: 12px;
	background-color: #f7f7f7;
	border: 1px solid #b3b3b3;
	border-top: none;
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
	border-top-left-radius: 22px;
	 border-top-right-radius: 22px;

}
.top-side{
	background-image: url(http://up.iranblog.com/images/m3rb486uvgkmztpea8t.png);
	background-position:right;
	background-repeat:no-repeat;
	height: 43px;
	border: none;
	float:right;
	width:100%;
}
..widget-container{
    border-image: none;
    border-radius: 22px 22px 8px 8px;
    border-right: 1px solid #B3B3B3;
    border-style: none solid solid;
    border-width: medium 1px 1px;
    color: #2E4444;
    font-size: 12px;
    list-style: none outside none;
    margin: 7px 0 0;
}