JSFiddle - React, Tailwind, and code Playground

HTML

<div id='postcapsule-2174117'  class=flipper style='padding:0px 10px;'><div style='float:left;'>  <a href="http://twitter.com/imex99/statuses/21932465530" target=_new><img src="/buzzient/images/twitter.png "style="position:relative;top:2px;z-index:0" border=0 width="16px" ></a>&nbsp;<span id="authortext-2174117" style="font-size:14px;">User<b><a href="/buzzient/getolposts?uid=740023&csource=4488623&brand=gamehouse"> imex99 (imex99) </a></b> &nbsp;<img src='/buzzient/images/globe.gif' width=15px;> Pre: 40.0267928,-82.445070<br><span id='demographline' style='font-size:13px;'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Influence Score: 2.1 | Total Posts: 1 | Pref.Brand: Gamehouse </span></span></div><div style='clear:both;'></div><hr><div style='clear:both;'></div><div id='postleft' style='width:650px;float:left;'> <span style='font-size:12px;color:#000000;' >Posted on August 23, 2010 at 06:07 PM<br><span style='font-size:12px;' > Sentiment: <img src='/buzzient/images/neut.gif'> 0.0</span></span><br>
<div id="posttext-2174117" style="margin-left:10px;"><p>#Doodle jump for # android RT @<span style="font-weight:bold">GameHouse</span>: @imex99 We are currently working very hard with all involved parties (cont) <a target="_new" href="http://tl.gd/3a2pah">http://tl.gd/3a2pah</a></strike></strike></s></s></em></i></i></strong></code></blockquote></b></b></del></p></div></div><div id='postright' style='width:100px;float:right;'> <div align=left class=flipdiv ><a tooltip="Email Post" style="font-size:11px" href="javascript:sendPost(2174117)"><img src="/buzzient/images/emailP.gif" width=15px> Share</a><br><a tooltip="Bookmark Post" style="font-size:11px" id="2174117" href="javascript:addPostBookmark(2174117,31722,4488623)"><img src="/buzzient/images/gray_star.gif"> Bookmark</a><br></div></div>

<div style='clear:both;'></div><div id='cleansedef-2174117'> </div><hr color=#0054a4 noshade size=4></div>

CSS

div.flipper {background-color: #FFFFFF;border:1px solid #336;padding:0px 10px;}
div.flipperhover {background-color: #F8FBFE;border:1px solid #336;}

div.flipdiv {display:none;border:1px solid #366;}
div.flipdivhover {background-color: #F8FBFE;display:inline;border:1px solid #366;}


a.flipper-link:hover {font-size:12px;text-decoration: none;background-image:url('/buzzient/images/edit-pencil.png');background-repeat:no-repeat;background-position:right;}
a.flipper-link {font-size:12px;text-decoration: none;}

JavaScript

$(function() {
                                 $("div.flipper").hover( 
                                     function() { $(this).addClass("flipperhover"); },
                                     function() { $(this).removeClass("flipperhover"); } 
                                 );     $("div.flipper").hover( 
                                     function() { $(this).find("div.flipdiv").addClass("flipdivhover"); }, 
                                     function() { $(this).find("div.flipdiv").removeClass("flipdivhover"); }
                                 );
                            });