JSFiddle - React, Tailwind, and code Playground

HTML

<div id="dTop10Wrapper" class="Top10Wrapper">
                                    <div class="Top10Heading">
                                        <a id="MainContent_hylTop10Viewed" class="Top10Heading" href="Archive-Most-Viewed.aspx?Language=en-US&amp;PageID=21">TOP 10 ARTICLES</a>
                                    </div>

                                     <div class="Top10ArticleWrapper">    
                                        <table id="MainContent_dlTop10" style="border-collapse:collapse;" cellspacing="0">
    <tbody><tr>
        <td>
                                            <div class="Top10ArticleBox">  
                                                    <div id="Top10Bullet" class="Top10Bullet">
                                                        <span id="MainContent_dlTop10_lblSnNo_0">1</span>
                                                    </div>
                                                     <div class="Top10Titles">
                                                           <a id="MainContent_dlTop10_hylTopTen_0" href="ArticleDetails.aspx?Language=en-US&amp;PageID=19&amp;ArticleID=4" style="display:inline-block;border-width:0px;text-decoration:none;">
                                                                    <div id="dTop10ArticleHeading" class="Top10ArticleHeading">
                                                                         <span id="MainContent_dlTop10_lblTopFourTitle_0" class="Top10ArticleHeading">This is the first article...</span>
                                                                    </div>
                                                            </a>
                                                     </div>
                                               </div>
                                            </td>
    </tr><tr>
        <td>
                                            <div class="Top10ArticleBox">  
                                                    <div...

CSS

.Top10Container
{
    float:right;
    height:250px;
    width:206px;
    background-color:#E9E9EA;
    vertical-align:top;
    text-align:center;
    margin:0px 0px 0px 0px;
}
.Top10Wrapper
{
    float:right;
    height:250px;
    width:196px;
    background-color:#E9E9EA;
    vertical-align:top;
    text-align:center;
    padding:5px 5px 5px 5px;
}
.Top10Heading
{
   height:30px;
   font-family:‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
   font-size:24;
   font-weight:196px;
   letter-spacing: 1.5px;
   text-align:center;
   color:Black;
   text-decoration:none;
   font-weight:bold;
}
.Top10ArticleWrapper
{
padding-left:5px;
}
.Top10ArticleBox
{
    height:20px;
}
.Top10Titles
{
    float:left;
    padding-left:5px;
    text-align:justify;
}
.Top10ArticleHeading
{
    font-family:Tahoma, Geneva, sans-serif;  
    font-size:11px; 
    text-align:justify;
    word-spacing: 1px;
    height:16px;
    color:black;
    width:160px;
    padding-top:2px;
}
.Top10Bullet
{
    float:left;
    height:16px;
    width:16px;
    text-align:center;
    vertical-align:middle;
    background-image:url('../images/Top10Bullet16x17.png');
    background-repeat:no-repeat;
    font-size:10px; 
    font-family:Tahoma, Geneva, sans-serif; 
    font-weight:bold; 
    color:#000;
    padding-top:2px;
    border:0px;
    padding-bottom:2px;   
}