JSFiddle - React, Tailwind, and code Playground

by Alexus fox

HTML

<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300' rel='stylesheet' type='text/css'>

<!--GRID-->

<div class="hatimages">
</div>
<div class="hatimages2">
</div>
<div class="hatimages3">
</div>
<div class="hatimages4">
</div>
<div class="hatimages5">
</div>
<div class="hatimages6">
</div>
<div class="hatimages7">
</div>
<div class="hatimages8">
</div>
<div class="hatimages9">
</div>
<div class="hatimages10">
</div>
<div class="hatimages11">
</div>
<div class="hatimages12">
</div>
<div class="hatimages13">
</div>
<div class="hatimages14">
</div>
<div class="hatimages15">
</div>
<div class="hatimages16">
</div>
<div class="hatimages17">
</div>
<div class="hatimages18">
</div>
<div class="hatimages19">
</div>
<div class="hatimages20">
</div>
<div class="hatimages21">
</div>
<div class="hatimages22">
</div>
<div class="hatimages23">
</div>
<div class="hatimages24">
</div>
<div class="hatimages25">
</div>
<div class="hatimages26">
</div>



<div class="mario">
  <div>
    <figure>
      <img src="http://alexusdfox.com/interaction_2/images/mario.jpg" /></figure>
    <span> Someone who loves racing their friends but hates to lose so they throw bananas and shells to win.</span>
  </div>
  <div>
  
  <div class="cowboy">
  <div>
    <figure2>
      <img src="http://alexusdfox.com/interaction_2/images/cowboy.jpg" /></figure2>
    <span> Someone who needs a way to block the sun out of their eyes when there ridding there nobel steed.</span>
  </div>
  <div>
  
    <div class="ash">
  <div>
    <figure3>
      <img src="http://alexusdfox.com/interaction_2/images/ash.jpg" /></figure3>
    <span> Someone who wants be the very best
Like no one ever was.To catch them is my real test.To train them is my cause.</span>
  </div>
  <div>
  
     <div class="pimp">
  <div>
    <figure4>
      <img src="http://alexusdfox.com/interaction_2/images/pimp.jpg" /></figure4>
    <span>Someone who like marketing and sales.</span>
  </div>
  <div>
  
   <div...

CSS

backgound{color: black;}


.fixedcap {
  color: white;
  font-family: "helvetica";
  font-size: 280px;
  position: fixed;
  bottom: 0;
  top: 0px;
  left: 50px;
  right: 0;
  height: 280px;
  text-align: center;
  border: 3px solid #73AD21;
}

#content {
  color: white;
  font-family: "helvetica";
  position: absolute;
  top: 280px;
  bottom: 20px;
  width: 180px;
  background-color: black;
  overflow: auto;
}


/*
.mario{
    color:deeppink;
font-family: 'Open Sans Condensed', sans-serif;
    font-size: 22px;
    position:absolute;
    left:240px;
    top:76px;
    width: 200px;
    text-transform: uppercase;
    z-index: 0;
}*/


/*tuttorial help*/

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300);
body {
  color: #333;
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight: 300;
}

h1,
h1+p {
  margin: 30px 15px 0;
  font-weight: 300;
}

h1+p a {
  color: #333;
}

h1+p a:hover {
  text-decoration: none;
}

h2 {
  margin: 60px 15px 0;
  padding: 0;
  font-weight: 300;
}

h2 span {
  margin-left: 1em;
  color: #aaa;
  font-size: 85%;
}

.mario {
  margin: 0px 0px 0;
  padding: 0;
}

.mario:last-child {
  padding-bottom: 60px;
}

.mario::after {
  content: '';
  clear: both;
  display: block;
}

.mario div {
  position: relative;
  float: left;
  width: 300px;
  height: 180px;
  margin: 0 0 0 15px;
  padding: 0;
}

.column div:first-child {
  margin-left: 0;
}

.mario div span {
  position: absolute;
  top: 90px;
  left: 210px;
  z-index: -1;
  display: block;
  width: 180px;
  margin: 0;
  padding: 0;
  color: #7F47DD;
  text-transform: uppercase;
  font-size: 20px;
  text-decoration: none;
  text-align: left;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  opacity: 0;
}

figure {
  position: absolute;
  bottom: 0px;
  top: 90px;
  width: 200px;
  height: 180px;
  margin: 0;
  padding: 0;
  background: #fff;
  overflow: hidden;
}

figure:hover+span {
  bottom: -36px;
  opacity: 1;
}

/*COWBOY*/

.cowboy{
 ...