JSFiddle - React, Tailwind, and code Playground

by Reusablecode

HTML

<script src="http://dl.dropbox.com/u/40036711/jquery.hovercard.min.js"></script>
<div class="highlight">Hover over the name in red, to see the custom card.</div>
This demo was prepared by <label id="profile">Prashant Chaudhary</label>.<br/>
Born and raised in Meerut, India. Studied computers at Purdue, IN. Now a web developer and an entrepreneur in making. Currently located in Indianapolis + Chicago.<br/>


Skilled C#, HTML, CSS3, jQuery Dev. Work full time and after hours, not a freelancer. Follow 37signals, Seth Godin, Zen Habits to name a few. Minimalist.

CSS

body
{
    font-family:Sans-serif;
    font-size:13px;
    padding:20px;    
}
.hc-name, a{ color: #932121}
.highlight{padding:5px; background:#ffffaa;margin-bottom:10px;font-weight:bold;}

JavaScript

var aboutPC = {
    name: "Prashant Chaudhary",
    link: "http://designwithpc.com/", 
    bio: "Prashant Chaudhary (or PC for short!) is a Web Developer (.net) with strong interest in UI. He loves to talk about CSS3, HTML5, jQuery. Entrepreneur in making! He run a design blog at http://designwithpc.com",
    image: "http://30.media.tumblr.com/avatar_d3eadb3e29f8_128.png",
    website: "http://designwithpc.com", 
    email: "[email protected]"
};

$('#profile').hovercard({
    showCustomCard: true, 
    customCardJSON: aboutPC
});