JSFiddle - React, Tailwind, and code Playground

by omarjuvera

HTML

<script src="fonts.googleapis.com/css?family=Yanone+Kaffeesatz:regular,bold"></script>
<!--
CSS: word cloud
Thanks to: http://onwebdev.blogspot.com/2011/05/css-word-cloud.html
-->

<div id="word-cloud">

 <span class="word-1">css</span>
 <span class="word-2">xhtml</span>
 <span class="word-3">css</span>
 <span class="word-4">jquery</span>
 <span class="word-5">javascript</span>
 <span class="word-6">xml</span>
 <span class="word-7">html5</span>

</div>

CSS

#word-cloud {
 width: 900px;
 height: 300px;
 margin: 0 auto;
 padding: 2em 0;
 font: 100% 'Yanone Kaffeesatz', Arial, sans-serif;
 position: relative;
 border: 2px solid skyblue;
}

#word-cloud span {
 position: absolute;
}

#word-cloud .word-1 {
 top: 1em;
 left: 1.5em;
 font-size: 100px;
 color: #626262;
}

#word-cloud .word-2 {
 top: 0;
 left: 1em;
 font-size: 80px;
 color: #906060;
}

#word-cloud .word-3 {
 top: 1em;
 left: 1.5em;
 font-size: 60px;
 color: #c5c5c5;
}

#word-cloud .word-4 {
 top: 1em;
 left: 0;
 font-size: 40px;
 color: #511c1c;
 -moz-transform: rotate(-90deg);
 -webkit-transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
}

#word-cloud .word-5 {
 top: 1.5em;
 right: -0.3em;
 color: #666;
 font-size: 70px;
 -moz-transform: rotate(-90deg);
 -webkit-transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
}

#word-cloud .word-6 {
 bottom: 0;
 right: 1em;
 color: #5e0000;
 font-size: 120px;
}

#word-cloud .word-7 {
 bottom: 0.6em;
 left: 0;
 color: #6e6e6e;
 font-size: 90px;
 -moz-transform: rotate(-90deg);
 -webkit-transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
}