JSFiddle - React, Tailwind, and code Playground

by Rich Costello

HTML

<div class="portfolio-bar">
		
			
				    	<div class="portfolio-thumb">
						<span>
							<b>Quad Crush</b><br>
							<p>A Refreshing Twist on Poker</p>
								<br>
							<a href="portfolio/quad-crush/index.html" class="button radius">View</a>
								</span>
							<img src="http://www.rastermedia.com/wp-content/uploads/2013/08/qc-featured.png">					
						</div>
				        <div class="portfolio-thumb">
						<span>
							<b>The Spirit Project</b><br>
							<p>Connecting Those That Hurt with Those That Help</p>
								<br>
							<a href="portfolio/spirit/index.html" class="button radius">View</a>
						</span>
						<img src="http://www.rastermedia.com/wp-content/uploads/2013/06/spirit-thumb1.jpg">					
						</div>
				                						
				        <div class="portfolio-thumb">
						<span>
							<b>Vegas.com</b><br>
							<p>The Official Vegas Travel Site</p>
							<br>
							<a href="portfolio/vegas-com/index.html" class="button radius">View</a>
						</span>
						<img src="http://www.rastermedia.com/wp-content/uploads/2013/10/vegascom-featured.png">					
						</div>
				       
				    <div class="portfolio-thumb">
							<span>
								<b>TacticalNav</b><br>
								<p>Combat Tested. Military Grade.</p>
								<br>
								<a href="portfolio/tacticalnav/index.html" class="button radius">View</a>
							</span>
						<img src="http://www.rastermedia.com/wp-content/uploads/2013/10/tactnav-featured.png">					
						</div>    
                            				

	</div>

CSS

.portfolio-bar {
  /*-webkit-background-size: 50%;*/
  background-size: 100%;
  margin:0 auto;
  width: 100%;
  height: 190px;
  overflow: hidden;
  padding: 200px 0 50px 0;
  text-align: center;
  vertical-align: middle;
}

.portfolio-thumb {
	height: 190px;
	width: 245px;
	border: 5px solid #fff;
	box-shadow: 2px 2px 10px rgba(0,0,0,0.6);
	margin-right: 10px;
	float: left;
	overflow: hidden;
	transition: .15s linear;
	background: #000;
}
.portfolio-thumb:hover {
	height: 190px;
	margin-top: -5px;
	transition: .15s ease-out;	
}
.portfolio-thumb img {
	opacity: 1;
	transition: .15s ease-in;
}
.portfolio-thumb:hover img {
	opacity: .3;
	transition: .15s ease-out;	
}
.portfolio-thumb span {
    color: white;
	font-size: small;
    display: block;
	position: absolute;
	z-index:99;
    opacity: 0;
    padding: 10px;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
    width: 245px;
	height: 190px;
	margin-top: 10px;
	transition: .15s linear;
	cursor: default;
}
.portfolio-thumb:hover span {
    opacity: 1;
	height: 190px;
	transition: .15s linear .15s;
}
.portfolio-thumb span b { 
	font-size: medium;
}


ul.portfolio-thumb li.thumb:nth-child(2) {
  margin:0 10px;
}


/* -----------------------------------------
 button area
----------------------------------------- */
button, .button {
    background-color: #84b02d;
    border-color: #759d26;
}
button:hover, .button:hover {
	background-color: #668b1c;	
}

.button:hover, .button:focus {
color: #fff;
}

button.large, .button.large {
	padding: 1.25em 1em !important;	
}
.dark-grey {
	background: #333;
	border-color: #000;	
}
.dark-grey:hover {
	background-color: #1b1b1b;	
}

.button.radius {
-webkit-border-radius: 3px;
border-radius: 3px;
}

.button {
display: inline-block;
}

p {
display: block;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
}

.button {
-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
box-shadow: 0 1px 0 rgba(255,255,255,0.5)...