JSFiddle - React, Tailwind, and code Playground

by Reusablecode

HTML

<script src="http://dl.dropbox.com/u/40036711/jquery.hovercard.min.js"></script>
<h2>The Obvious, the Easy, and the Possible</h2>
    <label data-hovercard="jasonfried" class="hover-twitter"> Jason F.</label>
<div class="highlight">Demo 1. Hover over Jason' name in red for a regular Twitter card</div>
<p>
    Much of the tension in product development and interface design comes from trying to balance the obvious, the easy, and the possible. Figuring out which things go in which bucket is critical to fully understanding how to make something useful.
    </p>
    <p>
Shouldn’t everything be obvious? Unless you’re making a product that just does one thing – like a paperclip, for example – everything won’t be obvious. You have to make tough calls about what needs to be obvious, what should be easy, and what should be possible. The more things something (a product, a feature, a screen, etc) does, the more calls you have to make.
    </p>
<div id="author-credit">Read complete blog post on <a href="http://37signals.com/svn/posts/3047-the-obvious-the-easy-and-the-possible" id="about37blog"> Signal Vs Noise</a> blog
<div class="highlight">
    Demo 2. Hovercard auto adjusting itself to open on left.</div>
</div>

<div id="stay-at-bottom">
    <p>By Jason Fried from <label id="about37">37signals</label>.</p>
<div class="highlight">
    Demo 3. Hovercard auto adjusting itself to open on top.</div>
</div>

CSS

body
{
    font-family:Sans-serif;
    padding:20px;
    font-size:13px;
}
p
{
    margin-top:10px;
    color:#888;
}
h2
{
    font-weight:bold;
    font-size:18px;
}
.hc-name
{
    color:#BA0000;
}
.highlight
{    
    padding:5px;
    margin:5px 0;    
    font-family:Georgia;
    background:#ffffcc;
}
#stay-at-bottom
{
    position:absolute;
    bottom:20px;
    left:20px;
}
#author-credit
{
    border-top:dashed 1px #ccc;
    padding-top:10px;
    margin-top:10px;
    text-align:right;
}

JavaScript

var about37blog = "A weblog by 37signals about design, business, experience, simplicity, the web, culture, and more. Established 1999 in Chicago.<br/> ";

var about37 = '37signals is a privately held web application company based in Chicago, Illinois. The firm was co-founded in 1999 by Jason Fried, Carlos Segura, and Ernest Kim as a web design company. Segura left in 2000 and Kim left in 2003, leaving Fried as the only remaining founder.<br/>37 signals leadership team includes Jason Fried, David Heinemeier Hansson, and Jeff Bezos (CEO, Amazon)'

$('#about37').hovercard({
    detailsHTML: about37    
});

$('#about37blog').hovercard({
    detailsHTML: about37blog
});

$('.hover-twitter').hovercard({ 
    showTwitterCard: true
});