JSFiddle - React, Tailwind, and code Playground

by vanduzled

HTML

<article class="tooltip item">
    <img src="images/events/flag-1.jpg">
     <h6>Some header 01</h6>

    <p>Some Texts</p>
</article>
<section class="flyme hidme">
    <img src='images/events/IMTEC-logo.gif' />
     <h5>Some Header</h5>

    <p>Lorem ipsum est sed elit dolor eiusmod do reprehenderit labore dolor enim
        exercitation Duis sunt proident non ut nulla in eiusmod Duis cillum id
        ullamco Excepteur in ut velit minim dolore irure laboris et aliquip occaecat
        qui et cupidatat aute sit mollit ut enim adipisicing sunt fugiat et adipisicing
        dolore nostrud Excepteur est consequat cillum ea eu dolor fugiat dolor
        laborum aliquip laborum sit ex cillum consequat laborum nostrud consequat
        id occaecat sed eiusmod consectetur pariatur proident laborum ullamco dolore
        dolore ullamco ea cupidatat Excepteur consequat adipisicing ex laboris
        aliquip nostrud ut in nostrud qui incididunt est dolor officia fugiat officia
        ex proident sed deserunt eiusmod labore id sint dolor do deserunt anim
        laboris exercitation minim voluptate aute dolor commodo ea Excepteur minim
        Ut velit enim Ut enim Duis in dolor dolor ex elit aliquip nisi in amet
        fugiat in in adipisicing voluptate labore Excepteur pariatur proident adipisicing
        enim Excepteur reprehenderit deserunt adipisicing ut consectetur dolore
        commodo sunt aute sed dolore sunt ad in pariatur cillum aliqua incididunt
        in occaecat cupidatat fugiat ut labore Ut aliqua pariatur anim ad ad pariatur
        do cupidatat ea est ut sunt qui Duis irure cillum pariatur non labore nulla
        amet occaecat sed sed commodo aliquip laboris eiusmod cupidatat et amet
        nostrud incididunt laboris ut aliquip tempor reprehenderit labore consectetur
        proident deserunt anim esse nostrud deserunt minim consectetur elit ut
        et officia eu est eiusmod veniam et adipisicing dolore sit laborum voluptate
        non eu esse...

CSS

.flyme {
    position:absolute;
    width:100%;
    max-width: 420px;
    max-height:450px;
    overflow: hidden;
    z-index:10000;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

article{
    background: gray;
}

.flyme img {
    float: left;
    margin-right: 10px;
}
.flyme h5 {
    color: white;
}
.hidme {
    display:none;
}

JavaScript

$(".tooltip").hover(function () {
    $('.flyme').slideToggle();
});