JSFiddle - React, Tailwind, and code Playground

by dmethvin

HTML

<div id="results">
        <p>There are 2 <em>sections</em> with 7 total <em>children</em>, 5 of which are <em>paragraphs</em></p>
    </div>
    <section class="first">
        <h3>I am A Section!</h3>
        <p>Child 1</p>
        <p>Child 2</p>
        <p>Child 3</p>
    </section>

    <section>
        <h3>Me too!</h3>
        <p>Child 2</p>
        <p>Child 3</p>
    </section>

CSS

section{
        display: block;
        border: 1px solid #ddd;
        margin: 20px;}
        
    #results{
        background: #eee;
        padding: 10px;
        border: 1px solid #ddd;}

JavaScript

var sections = $('section').length;
        var children = $('section *').length;
        var paragraph= $('section p').length;
        
        $('<p/>').html('jQuery reports that there are '+sections+' <em>sections</em> with '+children+' total <em>children</em>, '+paragraph+' of which are <em>paragraphs</em>').appendTo('#results');