JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/eqcss/1.7.0/EQCSS.min.js"></script>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat hic quia nostrum assumenda quis, ea nesciunt laboriosam laborum ipsa nam aspernatur voluptatum veritatis molestias reprehenderit corporis qui dolore sunt dolores.</p>
  <aside>
    <i class=ion-android-chat></i>
    <i class=ion-medkit></i>
    <i class=ion-android-chat></i>
    <i class=ion-medkit></i>
    
    
  </aside>
</div>

CSS

@element input and (min-children: 1) {
  $this {
    border-color: red;
  }
  $parent {
    background: pink;
  }
}

div {
  display: block;
  overflow: auto;
  border-radius: 3px;
  padding: 30px 30px 15px 30px;
  color: #555;
  font-size: 12pt;
  background: ivory;
  border: 1px solid rgba(0,0,0,.05);
  box-shadow: inset rgba(0,0,0,.075) 0 -3px 10px, inset rgba(255,255,255,.3) 0 1px 1px, rgba(0,0,0,.075) 0 1px .5px, rgba(0,0,0,.05) 1px 3px 5px;
}
@element 'aside' and (min-children: 1) {
  $parent { padding-right: calc(30pt + .5em) }
}
@element 'aside' and (min-children: 2) {
  $parent { padding-right: calc(60pt + 1em) }
}
@element 'aside' and (min-children: 3) {
  $parent { padding-right: calc(90pt + 1.5em) }
}
@element 'aside' and (min-children: 4) {
  $parent { padding-right: calc(120pt + 2em) }
}