isotope/sandbox/sandbox.css

* {
  box-sizing: border-box;
}

#container,
.container {
  background: #EEE;
  width: 50%;
  margin-bottom: 20px;
}

.item {
  width:  60px;
  height: 60px;
  float: left;
  border: 1px solid;
  background: #09F;
}

.item.w2 { width: 120px; }
.item.w3 { width: 180px; }

.item.h2 { height: 100px; }
.item.h3 { height: 160px; }
.item.h4 { height: 220px; }
.item.h5 { height: 280px; }

.stamp {
  background: red;
  opacity: 0.75;
  position: absolute;
  border: 1px solid;
}


/* element */

.element {
  width: 80px;
  height: 90px;
  margin: 5px;
  background: #DDD;
  float: left;
  position: relative;
  padding: 5px;
}

.element > * {
  margin: 0;
}

.element .number {
  right: 5px;
  top: 5px;
  position: absolute;
}

.element .symbol {
  font-size: 30px;
  left: 5px;
  top: 5px;
  color: white;
}

.element .name {
  font-size: 14px;
}

.element .weight {
  font-size: 14px;
}

.element.alkali          { background: #F00; background: hsl(   0, 100%, 50%); }
.element.alkaline-earth  { background: #F80; background: hsl(  36, 100%, 50%); }
.element.lanthanoid      { background: #FF0; background: hsl(  72, 100%, 50%); }
.element.actinoid        { background: #0F0; background: hsl( 108, 100%, 50%); }
.element.transition      { background: #0F8; background: hsl( 144, 100%, 50%); }
.element.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
.element.metalloid       { background: #08F; background: hsl( 216, 100%, 50%); }
.element.other.nonmetal  { background: #00F; background: hsl( 252, 100%, 50%); }
.element.halogen         { background: #F0F; background: hsl( 288, 100%, 50%); }
.element.noble-gas       { background: #F08; background: hsl( 324, 100%, 50%); }

/* stamps */

.stamp {
  position: absolute;
  background: hsla(0, 100%, 50%, 0.8);
  border: 1px solid;
}

.stamp1 {
  left: 10%;
  top: 20px;
  width: 20%;
  height: 200px;
}

.stamp2 {
  right: 200px;
  top: 100px;
  width: 100px;
  height: 100px;
}