JSFiddle - React, Tailwind, and code Playground

Skills List

by Jennifer Perrin

HTML

<ul id="techList">
  <li class="html5">html5</li>
  <li class="css3">css3</li>
  <li class="javascript">javascript</li>
  <li class="jquery">jquery</li>
  <li class="wordpress">wordpress</li>
  <li class="webstandards">web standards</li>
  <li class="accessibility">accessibility</li>
  <li class="usability">usability</li>
  <li class="seo" title="Search Engine Optimization">seo</li>
  <li class="responsive">responsive layout</li>
  <li class="ajax">ajax</li>
  <li class="objectoriented">object oriented</li>
  <li class="crossbrowser">cross browser</li>
  <li class="c5" title="Concrete 5">c5</li>
  <li class="skills">skills</li>
</ul>

CSS

@import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300);

#techList {
    position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: 'Oswald', sans-serif;
  font-size: 100%;
  text-transform: uppercase;
  color: #666;
}

#techList li {
    position: absolute;
  top: 0;
  left: 0;
}

.html5 {
  color:#4b6f7e;
  font-weight: 700;
  letter-spacing: -.05em;
  -webkit-transform: 
          scale(7.5, 7.8)
             translate(1.18em, .68em);
  -moz-transform: 
        scale(7.5, 7.8)
             translate(1.18em, .68em);
}

.javascript {
  letter-spacing: -.04em;
  font-weight: 400;
  color:#789b2e;
    -webkit-transform: 
        scale(1.4)
        rotate(90deg)
        translate(3.88em, -13.25em);
  -moz-transform: 
        scale(1.4)
        rotate(90deg)
        translate(3.88em, -13.25em);
}

.accessibility {
  letter-spacing: -.05em;
  font-weight: 300;
  color:#bf4c24;
    -webkit-transform:
        scale(1.4, 1.33)
        rotate(90deg)
        translate(4.1em, -18.2em);
  -moz-transform: 
        scale(1.4, 1.33)
        rotate(90deg)
        translate(4.1em, -18.2em);
}

.responsive {
  font-weight: 300;
  letter-spacing: .01em;
  color:#d46a15;
  word-spacing: .3em;
  -webkit-transform: 
        scale(2)
        translate(2.35em, 5.14em);
  -moz-transform: 
        scale(2)
        translate(2.35em, 5.14em);
}

.usability {
  font-weight: 400;
  letter-spacing: -.04em;
  color:#993d1d;
  -webkit-transform: 
        scale(2.85, 3)
      translate(7.14em, 3.55em);
  -moz-transform: 
      scale(2.85, 3)
      translate(7.14em, 3.55em);
}

.ajax {
  letter-spacing: -0.01em;
  font-weight: 700;
  color:#789b2e;
    -webkit-transform: 
        scale(2.4, 2.3)
        rotate(90deg)
        translate(6em, -5.8em);
  -moz-transform: 
        scale(2.4, 2.3)
        rotate(90deg)
        translate(6em, -5.8em);
}

.css3 {
  letter-spacing: .01em;
  font-weight: 700;
  color:#d46a15;
    -webkit-transform: 
        scale(6.8,...