JSFiddle - React, Tailwind, and code Playground

by JordanBlount

HTML

<html>
    <head>
        <title>Stratus App CSS by Joe Barrett</title>
    </head>
    <body>
        <div id="yeeeeAH">
            <img src="http://grinnbarrett.net/samples/stratusapp-icon.png" alt="Stratus App Yo" />
            <div id="OHKayee">
                <a href="#">Watch the video</a>
                <span></span>
            </div>
            <div id="wwwHUT">
                <div id="yaBoyz">
                    <a href="http://twitter.com/_Kolin" id="kolin">Kolin Krewinkel</a>
                    <a href="http://twitter.com/brdrck" id="jeff">Jeff Broderick</a>
                </div>
                <span></span>
            </div>
        </div>
        <div id="getsome">
            <a href="#" title="Download Stratusapp">Download</a>
            <p>on your iphone & ipad</p>
            <a href="http://twitter.com/stratusapp" title="Follow Stratusapp on Twitter">Follow Stratusapp on Twitter</a>
        </div>
    </body>
</html>

CSS

/* ----------------------------------------------------------------------
    
    I'd like to say welcome to the code. I'm glad you're looking at this
    because it's one of my favorite things to do as well. I'm still 
    trying to learn the ins and outs of everything CSS, but I love 
    experimenting with new things as I go.
    
    A few notes as to how I wanted to attack this. I tried to keep as
    little markup as I could, and then using selectors along with as
    many ::before and ::after psuedo elements I could. If you're curious
    about the "triangle" skip to line 198. You can also check out this
    rounded triangle markup I made for another Dribbble CSS ask:
    http://jsfiddle.net/T4Jg4/6/
    
    I also used HSLa for coloring where I could, though I didn't code
    any fallbacks for IE. 
    
    I also code in single line format, but I've cleaned it all up
    and made some comments where necessary.
    
    Enjoy
    
---------------------------------------------------------------------- */    

/* --------------------------------------------
   RESET YOURSELF BEFORE YOU WRECK YOURSELF
-------------------------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

body {font-size: 62.5%; font-family: Helvetica, Comic Sans, Arial, sans-serif; background: url(http://grinnbarrett.net/samples/stratusapp_bg.png);}

a, #OHKayee, #wwwHUT, #yaBoyz {
    text-decoration: none;
    -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear;...