JSFiddle - React, Tailwind, and code Playground

by amptwig91

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//cdn.bootcss.com/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
       <div class="profile-navbar">
        <div class="content-container">
            <div class="content-nav">
                <ul class="content-list2">
                    <li class="profile-cog">
                        <div class="btn-group btn-container" dropdown is-open="status.isopen">
                            <button type="button" class="btn btn-plain dropdown-toggle profile-btn" dropdown-toggle ng-disabled="disabled">
                                <span class="glyphicon glyphicon-cog" style="font-size: 15px; padding-right: 5px;"></span>
                                <span class="caret"></span>
                            </button>
                            <ol class="dropdown-menu dropdown-menu-right" role="menu">
                                <li><a href="#">Edit Account</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Something Else</a></li>
                            </ol>
                        </div>
                    </li>
                </ul>
                <ul class="content-list">
                    <li class="profile-name">
                        <div>
                            <h4 class="title">
                                <a class="profile-card-name a-correct-underline a-black">Austin Perez</a>
                            </h4>
                            <h6 class="profile-card-location thin">
                                Somewhere, United States
                            </h6>
                        </div>
                    </li>
                </ul>
                <ul class="content-list3">
                     <li class="profile-links">
                   ...

CSS

.page-container {
    padding-top: 62px;
    position: relative;
}

.profile-banner {
    @include transition(height .5s);
}

.profile-nav {
    padding-bottom: 65px;
}

.profile-banner-large, .profile-banner-jum {
    height: 350px;
}

.profile-banner-inner {
    position: relative;
    width: 100%;
    z-index: 4;
    border-bottom-color: $primary-grey;
    @include boxShadow($resonance-shadow);
}

.profile-banner-pic {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.profile-banner-pic img {
    position: absolute;
    left: 0;
    right: 0;
    top: -9999px;
    bottom: -9999px;
    margin: auto 0;
    width: 100%;
    min-height: 350px;
}


.top-container {
    height: 100%;
    position: relative;
}

.profile-avatar-box {
    transition: .5s;
    bottom: -70px;
    left: calc(50% - 77.5px);
    position: absolute;
    transition: bottom .3s;
    z-index: 3;
}

.profile-avatar-tag {
    outline: 0 none;
    cursor: pointer;
    @include boxShadow($resonance-shadow);
}

.block {
    display: block !important;
}

.profile-avatar-image {
    border-radius: 50%;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.profile-avatar {
    transition: .5s;
    background: #fff;
    border: 5px solid #fff;
    border-radius: 50%;
    @include boxShadow($resonance-shadow);
    height: 150px;
    position: relative;
    width: 150px;
}

@media (max-width: 768px) {
    .profile-avatar {
        transition: .5s;
        height: 100px !important;
        width: 100px !important;
    }
    .profile-avatar-box {
        transition: .5s;
        left: 5% !important;
    }
}

.profile-navbar {
    background-color: #fff;
    height: 60px;
    max-height: 60px;
    border-bottom-color: $primary-grey;
    @include boxShadow($resonance-shadow);
}

.content-container {
    max-width: 95%;
    display: block;
    font-size: 0;
    text-align: left;
}

.btn-plain {
    background-color: #fff;
 ...