JSFiddle - React, Tailwind, and code Playground

HTML

<a href="http://google.com" target="_blank">

<div class="detail padding-lg full-width like-on-post">
        <div class="avtar round  pull-left">
            <span class="user-personal-pic default-user-avtar border circle             avtar user-image you-menu ">
               <g:if test="${usrHeader?.avatarUrl?.indexOf('no-avatar')    ==-1 || usrHeader?.avatarUrl?.length() == 0 || usrHeader?.avatarUrl == null}">
              <img src="${usrHeader?.avatarUrl}" width="34" height="34" alt="Avatar" />
                 </g:if>

             </span>
            </div>
         <div class="detail-container">
                <p class="name">${usrHeader?.fullName()}</p>
               <p class="footer mouse-over"><g:link controller="connection" action="details">View profile</g:link></p>
                                </div>
                        </div>
</a>

CSS

a {
    display:block;
    background-color:yellow;
    text-decoration:none;
}
a span {
    display:block;
    background-color:red;
    color:#fff;
}