JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<div id="wrap">
    <p class="motto">Awesome videos, curated just for you. <span title='Share what you like, click "Hit Me" to get a new video.'>[wtf?]</span></p>
    <h1>Hit.me</h1>
<iframe width="853" height="480" src="http://www.youtube.com/embed/ZJ8fMvDvhLc" frameborder="0" allowfullscreen></iframe>
<div id="actions">
    <button id="share">Share</button>
    <button id="next">Hit Me! &rarr;</button>
</div>
</div>

CSS

body, input, button {font-family: "Droid Sans", sans-serif; color: #333;}
h1 {font-size: 200%;}
.motto {float: right; font-style: italic; font-size: small; position: relative; top: 17px;}
.motto span {font-size: smaller; color: #555;}
iframe {margin: 0.5em 0;}
#wrap {margin: 0 auto; width: 853px;}
#actions button {
    font-size: 24px; font-weight: bold; background: #eaeaea; border: 2px solid #ddd;
    -webkit-box-shadow: 1px 1px 3px -1px rgba(50,50,50,0.5);
    -moz-box-shadow: 1px 1px 3px -1px rgba(50,50,50,0.5);
    box-shadow: 1px 1px 3px -1px rgba(50,50,50,0.5);
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

#actions button:hover {
    border-color: #ccc; background: #ebebeb;
    -webkit-box-shadow: 1px 1px 3px -1px rgba(50,50,50,0.8);
    -moz-box-shadow: 1px 1px 3px -1px rgba(50,50,50,0.8);
    box-shadow: 1px 1px 3px -1px rgba(50,50,50,0.8);
    color: #000;
}
#share {padding: 10px 20px; width: 200px; margin-right: 10px;}
#next {padding: 10px 20px; width: 639px;}