JSFiddle - React, Tailwind, and code Playground

by Wentz Wu

HTML

<div class="tabbed-area">
    <ul class="tabs group">
        <li><a href="#box-one">Tab 1</a>
        </li>
        <li><a href="#box-two">Tab 2</a>
        </li>
        <li><a href="#box-three">Tab 3</a>
        </li>
        <li><a href="#box-four">Tab 4</a>
        </li>
    </ul>
    <div class="box-wrap">
        <div id="box-one">
             <h1>Heading 1</h1>

            <p>This is paragraph 1</p>
             <h2>Heading2</h2>

            <p>This is paragraph 2</p>
            <p>This is paragraph 3</p>
        </div>
        <div id="box-two">
             <h1>box two content</h1>

        </div>
        <div id="box-three">
             <h1>box three content</h1>

        </div>
        <div id="box-four">
             <h1>box four content</h1>

        </div>
    </div>
</div>

CSS

#box-one ~ div {
     border: 1px solid red;
 }
 /* the immediate div sibling */
 /* #box-one的二弟 */
 #box-one + div {
     color: red;
 }
 /* the other immediate siblings of #box-tow, excluded */
 /* #box-one的二弟的其它兄弟 */
 #box-one + div ~ div {
     color: blue;
 }
 /* the p children of #box-tow */
 #box-one > p {
     text-decoration: underline;
 }
 /* nth-child的index操作是考慮全部的children,要注意!!!!! */
 /* 本例:first-child是取到H1, 但限定是P, 所以沒反應 */
 #box-one > p:first-child {
     border: 1px solid red;
 }
 /* nth-child的index操作是考慮全部的children,要注意!!!!! */
 /* 本例:nth-child(1)相當於:first-child */
 #box-one > p:nth-child(1) {
     border: 1px solid red;
 }
 /* nth-child的index操作是考慮全部的children,要注意!!!!! */
 /* 本例index=4, 可取到取到第4個子節點, 也符合P的元素要求 */
 #box-one > p:nth-child(4) {
     border: 1px solid red;
 }