JSFiddle - React, Tailwind, and code Playground

by Joanna Sobańska

HTML

<section class='main'>
    <div class='container'>
        <ol>
           <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
           <li>Aliquam tincidunt mauris eu risus.</li>
           <li>Vestibulum auctor dapibus neque.</li>
        </ol>
    </div>
</section>

<section class='articles'>
    <div class='container'>
        <ol>
           <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
           <li>Aliquam tincidunt mauris eu risus.</li>
           <li>Vestibulum auctor dapibus neque.</li>
        </ol>
    </div>
</section>

CSS

.borderClass {
    border:1px solid green;
    padding:2px 5px;
}
.fontColor {
color: white;
}
.backgroundColor {
background-color: black;
}
.listWidth {
width: 100px;
}

JavaScript

$("section.main li").addClass("borderClass");
$("section.main li").addClass("fontColor");
$("section.main li").addClass("backgroundColor");
$("section.main li").addClass("listWidth");
$("section.main li").fadeOut( "slow");
$("section.main li").fadeIn( "slow");