JSFiddle - React, Tailwind, and code Playground

by Mehmet Alp

HTML

<div class="table">
<p class="yellow first">Country-1 -> *(it will be yellow)* </p>
<p class="yellow second">ParentData -> *(it will be yellow)*</p>           
    <p class="red thirty"><input type="checkbox" attr="notChecked">ChildData*(red)*</p>
    <p class="red thirty"><input type="checkbox" attr="notChecked">  ChildData*(red)* </p> 
    <p class="green thirty"><input type="checkbox" attr="checkThis"> ChildData*(green)* </p>   
    <p class="red thirty"><input type="checkbox" attr="notChecked">ChildData*(red)*</p>

    <p class="green second">ParentData -> *(it will be green)*</p>   
    <p class="green thirty"><input type="checkbox" attr="checkThis"> ChildData*(green)* </p>   
    <p class="green thirty"><input type="checkbox" attr="checkThis"> ChildData*(green)* </p>   
    <p class="green thirty"><input type="checkbox" attr="checkThis"> ChildData*(green)* </p>   
    <p class="green thirty"><input type="checkbox" attr="checkThis"> ChildData*(green)* </p>   

    <p class="yellow first">Country-2 -> *(it will be yellow)* </p>
    <p class="green second">ParentData -> *(it will be green)*</p>   
    <p class="green second">ParentData -> *(it will be green)*</p>   
    <p class="green second">ParentData -> *(it will be green)*</p>   
    <p class="red second">ParentData -> *(it will be red Because It has to Red property)*</p> 
   
      <p class="green first">Country-3 -> *(it will be green Because The All property has to green)* </p>
            <p class="green second">ParentData -> *(it will be green)*</p>   

            <p class="green second">ParentData -> *(it will be green)*</p>   
    <p class="green second">ParentData -> *(it will be green)*</p>   
    <p class="green second">ParentData -> *(it will be green)*</p>   
    <p class="green second">ParentData -> *(it will be green)*</p>   


</div>

CSS

.table{float:lefT;}
.yellow{background-color:yellow;}
.red{background-color:red;}
.green{background-color:green;}
.first{float:left;width:100%;}
.second{float:left; margin: 3px 0 0 10px;width:100%;}
.thirty{float:left; margin: 3px 0 0 20px;width:100%;}