JSFiddle - React, Tailwind, and code Playground

by Wentz Wu

HTML

<div>
    <p>Line one</p>
    <p>Line two</p>
    <div>
        <p>Line #one</p>
        <p>Line #two</p>
        <p>Line #three</p>
    </div>
    <p>Line three</p>
</div>

CSS

p:first-child {
    border: 1px solid red;
}

JavaScript

//$("p:first-child").animate({opacity:0});
//$("p:first-child").fadeOut(3000);
//$("p:first-child").fadeIn(1000);

$( "p:first-child" ).animate({
    opacity: 0.25,
    //left: "+=50",
    height: "toggle"
  }, 5000, function() {
    // Animation complete.
  });
/*
 $( "p:first-child" ).animate({
    width: [ "toggle", "swing" ],
    height: [ "toggle", "swing" ],
    opacity: "toggle"
  }, 5000, "linear", function() {
    //$( this ).after( "<div>Animation complete.</div>" );
  });
*/