JSFiddle - React, Tailwind, and code Playground

by Liam Talbot

HTML

<div class ="post_foot">
                    <div class="comment_links">
                        <a href="<?php the_permalink(); ?>">View Comments / Leave a Comment</a>
                    </div>
                    <div class="social_shares">
                        Share this article with your frenz!
                        <ul class="share_links">
                            <li><a class="fb_share_link" target="_blank" href="#"></a></li>
                            <li><a class="twitter_share_link" target="_blank" href="#"></a></li>
                            <li><a class="google_share_link" target="_blank" href="#"></a></li>
                            <li><a class="reddit_share_link" target="_blank" href="#"></a></li>
                            <li><a class="pin_share_link" target="_blank" href="#"></a></li>
                            <li><a class="linkedin_share_link" target="_blank" href="#"></a></li>
                            <li><a class="mail_share_link" target="_blank" href="#"></a></li>
                        </ul>
                    </div>
                    <div class="clear"></div>
                </div>

CSS

.comment_links{
    width: 50%;
    color: #808080;
    font-size: 12px;float: left;
}

.comment_links a{
    color: #808080;
    text-decoration: none;
    font-size: 12px;
}

.comment_links a:hover{
    color: #0CFF0E;
    cursor: pointer;
}

.social_shares{
    width: 50%;
    color: #808080;
    font-size: 12px;
    float: left;
    text-align: right;
}

.share_links{
    height: 24px;
    width: 168px;
    margin: 0 !important;
    display: inline-flex;
}

.share_links li{
    margin-left: 5px;
    border: 1px solid red;
    list-style: none;
}

.share_links li a{
    display: block;
    background-position: bottom;
    width: 24px;
    height: 24px;
}

.share_links li a:hover{
    background-position: top;
}