JSFiddle - React, Tailwind, and code Playground

by japaneselanguagefriend

HTML

<div class="container">
            <div class="row">
            <ul class="thumbnails">
                
                <div class="span3">
               
                  <div class="thumbnail">
                    <div class="ex">
                        <img src="http://placekitten.com/200/200" alt="product 2">
                </div>
                    <div class="row" >
                    <div  class ="span6" style="float:left">
                    
                    <a  herf=""></a>
                    
                    </div>
                    <div class = "span6" style="float:right">
                    <a href="#"></a>
                    
                    </div>
                     <div style="overflow: hidden; text-align:center;">
                    
                    <ul style="margin-top: 5px;" class="tools group">
                <li class="fav">
                <a href="#" title="See fans of this screenshot">0</a>
                </li>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container{
    margin:25px;
}
 .ex img {
    <!--margin: 25px;-->
    margin-bottom:25px;
    opacity: 0.8;
    border: 1px solid #eee;
 
    /*Transition*/
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
 
    /*Reflection*/
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,.5)));
    

}
 
 
.ex img:hover {  
   opacity: 1;
 
   /*Reflection*/
  -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(.7, transparent), to(rgba(0,0,0,1)));
 
   /*Glow*/
  -webkit-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  -moz-box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
  box-shadow: 0px 0px 20px rgba(255,255,255,0.8);
}

.ex{
    padding-bottom:30px;
}