JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col-lg-3">
    <div class="menu-item blue">
        <div class="panel-heading text-center">
            <a href="#feature-modal" data-toggle="modal">
                <i class="fa fa-magic"></i>
                <p>Test</p>
            </a>
        </div>
        <hr />
        <div class="panel-body"> 
            <p><i class="glyphicon glyphicon-credit-card"></i><a href="http://www.google.com">Test Tab</a></p>
        </div>
    </div>
</div>

CSS

.menu-item {
        color: #fff;
        /*padding-top: 45px;
        padding-bottom: 45px;
        margin-bottom: 30px;*/
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        border: 5px solid transparent;
    
    }

 .menu-item a {
            color: red;
            font-size: 15px;
            /*display: block;*/
            -webkit-transition: all 0.3s;
            transition: all 0.3s;
             
     
        }

.panel-body 
{
    float:right;
    margin-top:-100px;
}