JSFiddle - React, Tailwind, and code Playground

by tsdexter

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/cupertino/jquery-ui.css">
<div id="menu">
    <h3><span class="text">View Products by Brand</span></h3>
        <div>
            <p>Asden</p>   
            <p>Delta 1</p>   
            <p>Gossen</p>   
            <p>Hoodman</p>   
            <p>Kaiser</p>         
            <p>Asden</p>   
            <p>Delta 1</p>   
            <p>Gossen</p>   
            <p>Hoodman</p>   
            <p>Kaiser</p>          
        </div>
    <h3><span class="text">Products</span></h3>
        <div>
            <p>Lighting Kits</p>   
            <p>LED Lights</p>   
            <p>Flourescent Lights</p>   
            <p>Video Lights</p>   
            <p>Studio Accessories</p>
            <p>Lighting Kits</p>   
            <p>LED Lights</p>   
            <p>Flourescent Lights</p>   
            <p>Video Lights</p>   
            <p>Studio Accessories</p>   
        </div>
</div>

CSS

h3 {
    padding: 10px 20px !important;
}
#menu {
    width: 290px;
}
span.text {
    margin-left: 20px
}

JavaScript

$('#menu').accordion({
    event: 'mouseover',
    active: 1
});