JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div class="box" id="myBox"></div>

CSS

body {
  padding: 3rem;
}

.box {
  height: 10rem;
  width: 16rem;
  border-radius: 8px;
}

@layer one, three, two;



@layer one {
   .box {
     background-color: red;
     outline: 6px dotted red;
     outline-offset: 12px;
   }
}

@layer two {
 #myBox.box {
     background-color: blue;
     outline: 6px solid blue;
     outline-offset: 20px;
   }
}

@layer three {
  .box {
     background-color: green;
     outline: 6px dashed green;
     outline-offset: 4px;
     border-radius: 0;
   }
}


/* WITHOUT LAYERS */

/*

.box {
  background-color: red;
  outline: 6px dotted red;
  outline-offset: 12px;
}

 #myBox.box {
   background-color: blue;
   outline: 6px solid blue;
   outline-offset: 20px;
}

.box {
  background-color: green;
  outline: 6px dashed green;
  outline-offset: 4px;
  border-radius: 0;
}

*/