JSFiddle - React, Tailwind, and code Playground

by the_archer

HTML

<head>
    <title>JQuery Demo 1</title>
</head>

<body>
    <div id="box">some text</div>
    <a class="slide" href="#">Click Me!</a>
    
    <ul>
        <li>Item 1</li>
        <li><a href="#" title="not title">Item 2</a></li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li><a href="#" title="title">Item 5</a></li>
        <li>Item 6</li>
        <li>Item 7</li>
    </ul>
</body>

CSS

#box
{
    background-color:red;
    margin-top:30px;
    postion:relative;
}

.alert
{
    color:red;
}

JavaScript

$(function() {
    $('a').click(function() {
        $('#box').animate({
            "margin-top": '200px'
        }, 2000);
    });

    $('a').click(function() {
        $('#box').animate({
            "height": '150px'
        }, 2000);
    });
    
    //Different Types Of List Styling
    //$('li:first').addClass('alert');
    //$('li:last').addClass('alert');
    //$('li:even').addClass('alert');
    $('li:nth-child(4)').addClass('alert'); //literal position in list
        $('li:eq(2)').addClass('alert'); //Takes 0 into account >> selecting third item
        $('li a[title=title]').addClass('alert');
});