JSFiddle - React, Tailwind, and code Playground

by mohammadAdil

HTML

<script src="http://www.catchmyfame.com/jquery/dropcaptions/jquery.dropcaptions.js"></script>
<script src="http://www.catchmyfame.com/jquery/jquery.easing.1.3.js"></script>
<img src='http://placehold.it/300' class='bottom' />

CSS

.caption {
    background: #333;
    border-right: 1px solid #666;
    border-bottom: 1px solid #666;
    border-left: 1px solid #666;
    border-top: 1px solid #666;
    font-family: Verdana;
    font-size: 11px;
    padding: 4px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    color: #eee;
}

JavaScript

$('.bottom').dropCaptions({
    showSpeed: 2000,
    hideSpeed: 1000,
    showOpacity: 1,
    hideOpacity: 0,
    showEasing: 'easeOutElastic',
    hideEasing: 'easeInQuint',
    hideDelay: 2000
});