JSFiddle - React, Tailwind, and code Playground

HTML

<div class="widget-content">
	            <h6 class="title">Top Contributors</h6>	
                <ol>
                	<li>
                  
                    <span><a href="#">Abraham Lavrick</a></span> 
                    </li>
                    <li>
                  
                    <span><a href="#">Andy Addoquaye</a></span>
                    </li>
                    <li class="actGreen">
                  
                    <span><a href="#">Assefa Samrawit</a></span>
                    </li>
                    <li>
                   
                    <span><a href="#">Alexander Banner</a></span>
                    </li>
                    <li>
                  
                    <span><a href="#">Natasha Lalji</a></span>
                    </li>
                    
                </ol>
              
               
            </div>

CSS

.widget-content ol {
  counter-reset: item; 
  margin: 0 0 15px 0; 
  padding-left: 0
 }

.widget-content li {
  display: block; 
  margin-bottom: .5em; 
  margin-left: 2em; 
  color:#999; 
  font-size:12px; 
  font-weight:bold
}

.widget-content li:before {
  background:red; 
  color: #FFFFFF; 
  content: counter(item, decimal) " "; 
  counter-increment: item; 
  display: inline-block; 
  font-size:9px; 
  font-weight: bold;  
  line-height: 18px;  
  margin-left: -29px;  
  padding: 0 0 0 10px;  
  width: 2em
 }

.widget-content li a { 
  color:#999; 
  font-weight:bold
 }

.widget-content li:hover { 
  border:red solid 1px; 
  background: green;
 }

.widget-content li span.commentsCont, 
.widget-content li span.heartCont {
  width:25px; margin-left:0; text-align:right; color:#3b3b3b
 }

.widget-content li span.heartCont { 
  margin-right:5px
 }