JSFiddle - React, Tailwind, and code Playground

by BinaryAcid

HTML

<ul class="border_class">
    <li>CSS attr changed inline. Also notice 'border_class' removed from parent ul.</li>
</ul>

<p>Class 'important' added.</p>

<ol id="second_list">
    <li>First li in this ol</li>
    <li id="dynamic">Second li in this ol</li>
    <li>3rd li in this ol. Referenced with .eq() function.</li>
    <li>4th li in this ol. Example of .next() function.</li>
    
</ol>

CSS

.important {
 color: red;   
}
.ugly {
 color: brown;   
}

.border_class {
 border: 1px solid black;   
}

JavaScript

$('ul li').css('color', 'green');
$('p').addClass('important');
$('li:first-child').addClass('ugly');
$('#dynamic').text('Dynamicaly added with jQuery');
$('#second_list li').eq(2).css('background-color', 'yellow');
$('#second_list li').eq(2).next().css('background-color', 'green');
$('ul').removeClass('border_class');