JSFiddle - React, Tailwind, and code Playground

by kevinjazzmaster

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container">
   <div class="row">
      <a href="About.html" title="About the site and Author">
         <div class="col-md-4" id='div1'>
            <h3>About</h3>
         </div>
      </a>
      <a href="Articles.html" title="Original Articles and Content">
         <div class="col-md-4" id='div2'>
            <h3>Articles</h3>
         </div>
      </a>
      <a href="CodingCorner.html" title="Coding Corner - Code for a Variety of Projects">
         <div class="col-md-4" id="div3">
            <h3>Coding Corner</h3>
         </div>
      </a>
   </div>
   <div class="row">
      <a href="Contact-Social.html" title="Contact The Floodplains & The FloodShark">
         <div class="col-md-4" id="div4">
            <h3>Contact & Social</h3>
         </div>
      </a>
      <a href="TheFloodSharkMain.html" title="The FloodShark Music and Media">
         <div class="col-md-4" id="div5">
            <h3>
               The FloodShark
               Music
            </h3>
         </div>
      </a>
      <a href="FloodplainProductions.html" title="Floodplain Productions - virtual record label">
         <div class="col-md-4" id="div6">
            <h3>Floodplain Productions</h3>
         </div>
      </a>
   </div>
   <div class="row">
      <a href="ClassicalCorner.html" title="Classical Corner - A nook dedicated to sharing and categorizing classical music">
         <div class="col-md-4" id="div7">
            <h3>Classical Corner</h3>
         </div>
      </a>
      <a href="Gallery.html" title="Images, Photographs, and Album Art">
         <div class="col-md-4" id="div8">
            <h3>Gallery</h3>
         </div>
      </a>
      <a href="Contribute-Support.html" title="Contribute to The Floodplains!">
         <div class="col-md-4" id="div9">
            <h3>Contribute / Support</h3>
         </div>
      </a>
   </div>
</div>

CSS

.col-md-4 {
    color:#00A5D1;
    height:300px;
}

.col-md-3 {
    color:#00A5D1;
    height:300px;
    box-shadow: 2 2px 3px rgba(0, 0, 0.1, 0.1);
    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.col-md-4:hover {
    background-color: #FFE097;
}
.col-md-3:hover {
    -webkit-transform: scale(1.25, 1.25);
    transform: scale(1.25, 1.25);
    }

.col-md-4 h3 {
    position: relative;
    top: 40%;
    transform: translateY(5%);
    color:black;
}

.col-md-4 {
    color:#00A5D1;
    height:300px;
    border: 1px solid #FF8B6F;
    position: relative;
}

.col-md-3 {
    height:300px;
    position: relative;
}

.col-md-4:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: block;
  background: #FFE097;
  opacity: 0;
}

.col-md-3:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;    
  left: 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
  -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.col-md-4:hover:after {
  opacity: .5;
}

.col-md-3:hover:after {
  opacity: 1;
}

.col-md-4 h3 {
    position: relative;
    z-index: 1;
    top: 40%;
    transform: translateY(-50%);
}
h3 {
        font-size:36px;
        font-style: bold;
        text-align:center;
        font-family:'Buernard', Garamond, "Buenard", "EB Garamond",'EB Garamond';
    }
    img {
        max-width: 100%;
        max-height: 100%;   
    }
    #div1 {
            background-image: url('AboutIcon.png');
            background-position: center center; //center the image in the div
            background-size: cover; //cover the entire div
            background-repeat: no-repeat;
            background-size: 100%;
    }
    #div2 {
            background-image: url('ArticlesIcon.png');
            background-position: center center; //center the...