JSFiddle - React, Tailwind, and code Playground

by wookiehangover

HTML

<script type="text/wat" id="user">
<li>
  <ul class="subList">
    <li class="name"><a target="_blank" href="<%=imgUrl%>"><img src="<%=imgUrl%>"></a><%=name%></li>
    <li class="irc">IRC nick: <%=irc%></li>
    <li class="twitter">Twitter: <a target="_blank" href="http://twitter.com/<%=twitter%>">@<%=twitter%></a></li>
    <li class="github">GitHub: <a target="_blank" href="http://github.com/<%=github%>"><%=github%></a></li>
    <li class="location">Location: <%=location%><a title="Show it on big map" target="_blank" href="http://maps.google.com/maps?&amp;q=<%=(coords|location)%>"><img src="http://maps.google.com/maps/api/staticmap?center=<%=(coords|location)%>&amp;zoom=14&amp;size=175x175&amp;maptype=roadmap&amp;sensor=false"></a></li>
    <li class="occupation">Occupation: <%=occupation%></li>
    <li class="occupation">Birthday: <%=birthday%></li>
  </ul>
</li>
</script>
<link href='http://fonts.googleapis.com/css?family=Cabin+Sketch:bold' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Cabin' rel='stylesheet' type='text/css'>

<h1>jQuery-ot</h1>
<p>Fork/Update/?tell nimbupani &lt;fork-url> &lt;what changed></p>
<ul></ul>

CSS

html { height: 100%; }
body {
    font-family: 'Cabin', arial, serif;
    margin: 20px 0;
    background-color: #444444;
    background-image: -moz-linear-gradient(top, #444444, #222222); /* FF3.6 */
    background-image: -ms-linear-gradient(top, #444444, #222222); /* IE10 */
    background-image: -o-linear-gradient(top, #444444, #222222); /* Opera 11.10+ */
    background-image: -webkit-linear-gradient(top, #444444, #222222); /* Chrome 10+, Saf5.1+ */
    background-image: linear-gradient(top, #444444, #222222);
    background-attachment: fixed;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,.8);
}
h1 {
    font-family: 'Cabin Sketch';
    padding-bottom:10px;
    margin-bottom:10px;
    font-size:72px;
    text-align:center;
    text-shadow: 0 1px 0 #ccc, 
        0 2px 0 #bbb,
        0 3px 0 #aaa,
        0 4px 0 #333,
        0 6px 1px rgba(0,0,0,.1),
        0 0 5px rgba(0,0,0,.1),
        0 1px 3px rgba(0,0,0,.3),
        0 3px 5px rgba(0,0,0,.2),
        0 5px 10px rgba(0,0,0,.25),
        0 10px 10px rgba(0,0,0,.2),
        0 20px 20px rgba(0,0,0,.15);
}
ul  { margin-left:20px; list-style:none }
body > ul > li {
    position:relative;
    display:inline-block;
    width:500px;
    min-height:130px;
    padding:20px;
    margin:20px;
    vertical-align: top;
    border-radius: 4px;
    box-shadow: inset 0 0 2px rgba(0,0,0,.8), 0 1px 0 rgba(255,255,255,.2);
    -moz-transition: all 0.8s ease-out;  /* FF4+ */
    -o-transition: all 0.8s ease-out;  /* Opera 10.5+ */
    -webkit-transition: all 0.8s ease-out;  /* Saf3.2+, Chrome */
    -ms-transition: all 0.8s ease-out;  /* IE10? */
    transition: all 0.8s ease-out;      
}
body > ul > li:hover {
    background-color: rgba(255,255,255,0.05);
    -moz-transition-duration: 0.2s;  /* FF4+ */
    -o-transition-duration: 0.2s;  /* Opera 10.5+ */
    -webkit-transition-duration: 0.2s;  /* Saf3.2+, Chrome */
    -ms-transition-duration: 0.2s;  /* IE10? */
    transition-duration: 0.2s;      
}
.subList li...

JavaScript

var users = [
{
    irc: "gnarf",
    twitter: "gnarf37",
    github: "gnarf37",
    location: "Rockford, IL",
    name: "Corey Frang",
    imgUrl : "http://a1.twimg.com/profile_images/1158131746/41424_560729700_146_q.jpg"
},
{
    irc: "miketaylr",
    twitter: "miketaylr",
    github: "miketaylr",
    location: "Brooklyn, NY",
    name: "Mike Taylor",
    birthday: "October 10, 1980",
    imgUrl : "http://a2.twimg.com/profile_images/1042621997/mikeyyyy.png"
},
{
    irc: 'gf3',
    twitter: 'gf3',
    github: 'gf3',
    location: 'Toronto, Canada',
    name: 'Gianni Chiappetta',
    birthday: "March 27, 1988",
    imgUrl: "http://a2.twimg.com/profile_images/1305899303/Handlebars_Square_reasonably_small.png"
},
{
    irc: "eddiemonge",
    twitter: "eddiemonge",
    location: "almost everywhere now",
    name: "AKA eTiger13",
    imgUrl : "http://a1.twimg.com/profile_images/1250831839/Photo_on_2011-02-21_at_12.52__2.jpg"
},
{
    irc: "benschwarz",
    twitter: "benschwarz",
    github: "benschwarz",
    location: "Melbourne, Australia (currently in PDX/SF)",
    name: "Ben Schwarz",
    occupation: "Independent web guy",
    imgUrl : "http://a2.twimg.com/profile_images/280124623/Photo-69.png"
},
{
    irc: "Peter`",
    twitter: "beverloo",
    location: "Amsterdam, the Netherlands",
    name: "Peter Beverloo",
    occupation: "Freelance front-end engineer. Soon to be Noogler",
    birthday: "June 9, 1989",
    imgUrl : "http://a0.twimg.com/profile_images/1021016589/twitter_reasonably_small.jpg"
},
{
    irc: "paul_irish",
    twitter: "paul_irish",
    location: "SF, CA",
    name: "Paul Irish",
    occupation: "Google Chrome Developer Relations",
    birthday: "July 23, 1982",
    imgUrl : "http://a1.twimg.com/profile_images/1326877605/greenavatar_crop.jpg"
},
 {
    irc: 'matjas',
    twitter: 'mathias',
    github: 'mathiasbynens',
    name: 'Mathias Bynens',
    location: 'Belgium',
    occupation: 'Freelance front-end developer',
    birthday: "May 24,...