JSFiddle - React, Tailwind, and code Playground

by jacobdubail

HTML

<div id="dropbox">
  <img width="228" height="128" src="http://rtf.wpengine.com/wp-content/uploads/2011/10/dropbox.jpg">       
    
  <div>
      <p><span>Name: </span>PayPal</p>
      <p><span>Partnered: </span>2007, Series A</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque viverra tincidunt velit</p>
      <p><a href="http://google.com" target="_blank" class="button">learn more</a></p>
   </div>
</div>

CSS

a { color: purple; background: rgba(255,255,255,0.7); padding: 4px; }
a:hover { color: orange; }
#dropbox div        { display: none; padding: 9px; width: 210px; height: 110px; font-size: 13px; z-index: 50; position: relative; }

#dropbox div p      { margin: 0 0 6px; line-height: 1.3; }
#dropbox div span   { text-transform: uppercase; color: #ccc; font-weight: bold; }
#dropbox img        { position: absolute; top: 0; left: 0; }


#dropbox.active  {
-webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
     -o-transform: rotateY(180deg);
        transform: rotateY(180deg);
}
#dropbox.active img,
#dropbox.active div { display: block; color: #fff;
-webkit-transform: rotateY(-180deg);
   -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
     -o-transform: rotateY(-180deg);
        transform: rotateY(-180deg);

}
#dropbox.active div {
    background-image: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0.65)), to(rgba(0,0,0,0.65)));
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.75), rgba(0,0,0,0.65));
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0.75), rgba(0,0,0,0.65));
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0.75), rgba(0,0,0,0.65));
    background-image:         linear-gradient(left, rgba(0,0,0,0.75), rgba(0,0,0,0.65));
}

JavaScript

$('#dropbox').click( function() {
    $(this).addClass('active');
});