JSFiddle - React, Tailwind, and code Playground

by gravi2

HTML

<div class="bottom-brainflex-wrapper">
    <div class="bottom-brainflex">
        <div class="bottom-brainflex-title right">X</div>
        <div class="bottom-brainflex-msg brainflex-maximize">Prevent the summer slide with CK-12 BrainFlex!</div>
        <div class="bottom-brainflex-lower">
            <div class="bottom-brainflex-link"> <a href="/summer">Learn More</a>

            </div>
            <div class="bottom-brainflex-brain">
                <img title="BrainFlex" src="//frodo.ck12.org/media/images/brain-slideup.svg" />
            </div>
        </div>
    </div>
</div>
<a id="me">click</a>

CSS

.bottom-brainflex-wrapper {
    position:fixed;
    overflow:hidden;
    width:115px;
    bottom:0;
}
.bottom-brainflex {
    position:relative;
    background:#dce8a7;
    border-radius:10px 10px 0 0;
    background-size:100%;
    background-position: top;
    padding:0 15px 0 15px;
    -webkit-animation: bottom-brainflex-slideup 2s forwards;
    animation: bottom-brainflex-slideup 2s forwards;
    transition-timing-function: ease;
    -webkit-transition-timing-function: ease;
    -webkit-animation-delay: 1s;
    /* Chrome, Safari, Opera */
    animation-delay: 1s;
}
.bottom-brainflex-title {
    float:right;
    text-align:right;
    height:10px;
    width:100%;
    padding:10px 0 0 0;
}
.bottom-brainflex-msg {
    text-align:left;
    font-size:14px;
    line-height: 17px;
    position:relative;
    z-index:0;
    transition: all ease;
    max-height:100px;
    -webkit-transition: all 1s;
}
.bottom-brainflex-lower {
    position:relative;
    z-index:10;
    background:#dce8a7;
}
.bottom-brainflex-brain img {
    height:70px;
    width:84px;
}
.bottom-brainflex-link a {
    padding:10px 0 10px 0;
    display:block;
    font-size:16px;
    font-weight:bold;
    color:#1aaba3;
}
@keyframes bottom-brainflex-slideup {
    0% {
        top: 195px;
    }
    100% {
        top: 0;
    }
}
@-webkit-keyframes bottom-brainflex-slideup {
    0% {
        top: 195px;
    }
    100% {
        top: 0;
    }
}
.brainflex-minimize {
    max-height:0px;
}
.brainflex-maximize {
    max-height:100px;
}

JavaScript

$(document).ready(function () {
    $('#me').live('click', function () {
        $('.bottom-brainflex-msg').toggleClass('brainflex-minimize').toggleClass('brainflex-maximize');
    });
});