JSFiddle - React, Tailwind, and code Playground

by pradeep

HTML

<div class="divclass">Hi this is some text.
    <p>testing test</p>
    <p></p>
    <p><a href="#" rel="nofollow">Testing text2</a>
    </p>
</div>

CSS

* {
    margin: 0px;
    padding: 0px;
}
body {
    background-color: rgb(248, 248, 248)
}
#nav {
    list-style:none;
}
#nav li {
    float:left;
    display:block;
    width:100px;
    position:relative;
    z-index:500;
}
/* this is the parent menu */
 #nav li a {
    display:block;
    padding:15px;
    color:#000;
    border: 1px solid transparent;
}
#nav li a:hover {
    border: 1px solid black;
}
#nav a.open {
    color:#fff;
    background-color: pink;
}
#nav ul {
    position:absolute;
    display:none;
    padding:0;
    list-style:none;
}
#nav ul li {
    width:100px;
    float:left;
}
#nav ul a {
    display:block;
    height:15px;
    padding: 15px;
    color:#666;
}
#nav ul a:hover {
    text-decoration:underline;
}
.active {
    background-color: pink;
}

JavaScript

debugger;
 $('div p').contents().unwrapAll();