JSFiddle - React, Tailwind, and code Playground

by zerolfc

HTML

<div id="wp">
    <div class = "mguide">
        <div class = "measure">
            <div class="panel">
                <img src = "images/measure.jpg"/>
            </div>
            <p class="flip">Measuring Guide</p>
            
        </div>
    </div>
    
    <div class = "mguide">
        <div class = "measure">
            <div class="panel">
                <img src = "images/measure.jpg"/>
            </div>
            <p class="flip">Measuring Guide</p>
            
        </div>
    </div>
</div>

CSS

.mguide {float: left; width: 200px;padding: 0 20px;}


div.panel,p.flip
{
    width: 100%;
    margin:0px;
    padding:5px 0;
    text-align:center;
    background:#A2A7B6;
    
}
div.panel
{
    height:428px;
    display:none;
}
p.flip {
    float: left;
    border: solid 1px;
    float:left;
    margin: 0  !important;
}

JavaScript

$("#wp .flip").hover(function() {
        $(this).prev().slideToggle("slow");
    });