JSFiddle - React, Tailwind, and code Playground

by nate

HTML

<script src="http://cdn.pombs.com/js/jquery/jquery.easing.1.3.js"></script>
<div class="window">
    <div class="shade"></div>
    <div class="content">Hi!</div>
    <div class="sill"></div>
</div>

<div class="window">
    <div class="shade"></div>
    <div class="content">Hi!</div>
    <div class="sill"></div>
</div>

<div class="window">
    <div class="shade"></div>
    <div class="content">Hi!</div>
    <div class="sill"></div>
</div>

<div class="window">
    <div class="shade"></div>
    <div class="content">Hi!</div>
    <div class="sill"></div>
</div>

<div class="window">
    <div class="shade"></div>
    <div class="content">Hi!</div>
    <div class="sill"></div>
</div>

CSS

.window {
    background-color: hsl( 0, 50%, 50% );
    border-radius: 50px 50px 0 0;
    display: inline-block;
    height: 150px;
    margin: 10px;
    position: relative;
    width: 100px;
}

.window .shade {
    background-color: hsl( 0, 50%, 70% );
    height: 100px;
    left: 2px;
    position: absolute;
    top: 50px;
    width: 96px;
}

.window .sill {   
    border-bottom: 10px solid brown;
    bottom: 0;
    left: -5px;
    position: absolute;
    right: -5px;
}

.window .content {
    font-family: Arial, sans-serif;
    margin: 100px auto 0;
    text-align: center;
}

JavaScript

var speed = 500;

$( document ).on( 'mouseenter', '.window', function( event ) {
    var $window = $( event.currentTarget ),
        $shade = $window.find( '.shade' );

    $shade.stop().animate({
        height: 0
    }, {
        duration: speed,
        easing: 'easeOutBounce'
    });
});

$( document ).on( 'mouseleave', '.window', function( event ) {
    var $window = $( event.currentTarget ),
        $shade = $window.find( '.shade' );

    $shade.stop().animate({
        height: 100
    }, {
        duration: speed,
        easing: 'easeOutBounce'
    });
});