JSFiddle - React, Tailwind, and code Playground

by Puddster

HTML

<div id="elements">
    <h1>Selecting by Element</h1>
    <section>This is a section</section>
    <div>This is a span</div>
    <section>This is another section</section>
    <div>This is another span</div>
    <section>
        This is the final section
        <div>A wild div appears!</div>
        There is a little more text afterwards.
    </section>
</div>

<div id="classes">
    <h1>Selecting by Class</h1>
    <div class="redBackground">This has a red background</div>
    <div class="blueText">This has blue text</div>
    <div class="greenBorder">This has a green border</div>
    <div class="redBackground blueText">This has a red background and blue text</div>
    <div class="redBackground blueText greenBorder">This has a red background, green border and blue text in the centre!</div>
</div>

<div id="ids">
    <h1>Selecting by ID</h1>
    <div id="divOne">This is called divOne and has a red background</div>
    <div id="divTwo">This is called divTwo and has a green background</div>
    <div id="divThree">This is called divThree and has a blue background</div>
</div>

CSS

/* Selecting by Elements */
#elements div {
    background-color: red;
    padding: 5px;
}

#elements section {
    background-color: green;
    padding: 5px;
}

/* Selecting by Class Names */
#classes .redBackground {
    background-color: red;
}

#classes .blueText {
    color: blue;
}

#classes .greenBorder {
    border: green solid 2px;
}

/* Selecting by ID's */
#ids #divOne {
    background-color: red;
}

#ids #divTwo {
    background-color: green;
}

#ids #divThree {
    background-color: blue;
}

/* Overall styling, can be ignored */
body > div {
    border-radius: 25px;
    border: #333333 solid 2px;
    padding-bottom: 25px;
    background-color: #EEEEEE;
    margin: 25px;
    padding: 15px;
}
body > div > * {
    margin: 5px;
}
body > div > *:not(h1)::before {
    content: "Example: ";
    color: black;
    opacity: 0.5;
}
body > div > h1:first-child {
    font-size: 1.2em;
    border-radius: 15px;
    padding: 15px;
    margin: 0px;
    border: #333333 solid 1px;
    border-left-color: #FFFFFF;
    border-top-color: #FFFFFF;
}

JavaScript

$("body").children("div").children("*:not('h1')").mouseenter(function() {
    $(this).parents("div").children("*:not('h1')").stop(true, false).animate({ marginTop: "5px", marginBottom: "5px", opacity: "0.5" });
    $(this).stop(true, false).animate({ marginTop: "25px", marginBottom: "25px", opacity: 1});
}).end().mouseleave(function() {
    $(this).children("*:not('h1')").stop(true, false).animate({ marginTop: "5px", marginBottom: "5px", opacity: "1"});
});