JSFiddle - React, Tailwind, and code Playground

by Gopinath Kaliappan

HTML

<div class="parent">
    <div class="child">
          
          <p>child One Immediate</p>
    </div>  
    <div class="new-child">
           <p>child One Another</p>
           <p>child One Another</p>
    </div>  
    <div target="win" class="new-child">
           <p>child One Another</p>
           <p>child One Another</p>
    </div>  
 
    
</div>
<fieldset>
  <legend>Favorite season</legend>

  <input type="radio" name="season" id="spring">
  <label for="spring">Spring</label>

  <input type="radio" name="season" id="summer" checked>
  <label for="summer">Summer</label>

  <input type="radio" name="season" id="fall">
  <label for="fall">Fall</label>

  <input type="radio" name="season" id="winter">
  <label for="winter">Winter</label>
</fieldset>

CSS

.parent {
 background-color: pink;
}

.child  + .new-child {
  background-color: orange;
}
.new-child[target="win"] {
  color: blue;
}

input ~ label {
  color: brown;
}

input:default {
  box-shadow: 0 0 2px 1px coral;
}

input:default + label {
  color: lime;
}

input:checked ~label {
  color: orange;
}