JSFiddle - React, Tailwind, and code Playground

Simple Container Examlpes

by nilloc

HTML

<div id='app' class='container stack' style='background:#eee;'>
  
  <div class='container horizontal clearfix' style='background:#ddd'>
    <div class='container' style='background:#bada55; height:40px; width:40px;'>1</div>
    <div class='container' style='background:#bada55; height:40px; width:40px;'>2</div>
    <div class='container' style='background:#bada55; height:40px; width:40px;'>3</div>
  </div>
  
  <div class='container vertical' style="background:#ddd; margin-top:10px;">
    <div class='container' style='background:#bada55; height:40px; width:40px;'>1</div>
    <div class='container' style='background:#bada55; height:40px; width:40px;'>2</div>
    <div class='container' style='background:#bada55; height:40px; width:40px;'>3</div>
  </div>
</div>

SCSS

#app{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}
.container{
  .stack{
    &>div{ //Auto align children per stack rules
      position:absolute;
      top:0;
      left:0;
    }
  }

  .horizontal{
    &>div{ //Auto align children horizontally
      position:relative;
      /* display:inline-block; */ //Spaces make whitespace issues
      float:left;
    }
  }
  
  .vertical{
    &>div{ //Auto align children horizontally
      position:relative;
      display:block;
    
    }
  }
  
  &:after { //Clearfix all the things
    content: "";
    display: table;
    clear: both;
  }
}