JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="col-sm-9" style="display:inline-block">
            </div>
            <div class="row">
                <div class="panel panel-default col-xs-2 lp-centerNav-panel" style="position: relative;" >
                    <div class="tipText">
                        <p>
                            <span data-toggle="tooltip" title="Hooray!" class="glyphicon glyphicon-question-sign">
                            </span>
                        </p>
                    </div>
                    <div class="panel-body">
                        <strong>Accounting</strong>
                    </div>
                </div>
            </div>
        </div>

CSS

/* Landing Page Styles */

.lp-leftNav-lg {
    background: #eeeeee;
}

    .lp-leftNav-lg img {
        height: 20px;
        width: 20px;
    }


.lp-centerNav-panel {
    height: 155px;
    width: 140px;
    background-image: -webkit-linear-gradient(#ffffff, #eeeeee 50%, #e4e4e4);
    background-image: -o-linear-gradient(#ffffff, #eeeeee 50%, #e4e4e4);
    background-image: linear-gradient(#ffffff, #eeeeee 50%, #e4e4e4);
    background-repeat: no-repeat;
    margin: 15px;
    top: 0;
    -webkit-transition: top 0.3s ease-out;
    -moz-transition: top 0.3s ease-out;
    -o-transition: top 0.3s ease-out;
    transition: top 0.3s ease-out;
    text-align: center;
    box-shadow: 7px 3px 7px rgba(0, 0, 0, 0.50);
}

    .lp-centerNav-panel img {
        padding-top: 3px;
        width: 100%;
        height: 100%;
    }

    .lp-centerNav-panel:hover {
        top: -4px;
        cursor: pointer;
    }
    
    .tipText {
    float: right;
    display:inline-grid;
    margin-top: 130px;
}