JSFiddle - React, Tailwind, and code Playground

by boushley

HTML

<div class="tabs">
    <ul>
        <li class="selected">
            <h3>Some Tab</h3>
            <div>
                <h4>This is my tab content</h4>
                <p>Some more content</p>
            </div>
        </li>
        <li>
            <h3>Some Other Tab</h3>
            <div>
                <h4>This is my other tab contents</h4>
                <p>Some more other content</p>
            </div>
        </li>
        <li>
            <h4>Some Other Tab 2</h4>
            <div>
                <h5>This is my other tab 2 contents</h5>
                <p>Some more other content</p>
            </div>
        </li>
        <li>
            <h3>Some Other Tab 3</h3>
            <div>
                <h4>This is my other tab 3 contents</h4>
                <p>Some more other content</p>
            </div>
        </li>
    </ul>
</div>

JavaScript

var container = $('.tabs');

container.css({'position': 'relative'});



console.log(container.css('position'));

container.css({'position': 'relative'});

var ul = container.children('ul');
var tabs = ul.children('li');

tabs.children('h1, h2, h3, h4, h5, h6').css({'background-color':'red'});