JSFiddle - React, Tailwind, and code Playground

by aflynt

HTML

<div id="tools">
  <div class="tool">
    <img src="http://placehold.it/95x95"/>
      <div class="tool-text">
      <h3>Tableau</h3>
      <p>View graphical and tabular reports of JETS data and analysis.</p>
      </div>
      <div class="tools-learn-more">
        <a href="#overlay-tool-1" class="tools-learn-more-btn" >Learn More</a>
        <div id="overlay-tool-1">  
          <a class="close" href="#">×</a>
          <p>Hello, I am a pop-up!</p>
         </div>
         <div class="mask" >&nbsp;</div>
      </div>
  </div> <!-- end of tool -->
  <div class="tool">
   <img src="http://placehold.it/95x95"/>
      <div class="tool-text">
      <h3>Tableau</h3>
      <p>View graphical and tabular reports of JETS data and analysis.</p>
      </div>
      <div class="tools-learn-more">
        <a class="tools-learn-more-btn" href="#">Learn More</a>
      </div>
  </div>
  <div class="tool">
     <img src="http://placehold.it/95x95"/>
      <div class="tool-text">
      <h3>Tableau</h3>
      <p>View graphical and tabular reports of JETS data and analysis.</p>
      </div>
      <div class="tools-learn-more">
        <a class="tools-learn-more-btn" href="#">Learn More</a>
      </div>
  </div>
  <div class="tool">
     <img src="http://placehold.it/95x95"/>
      <div class="tool-text">
      <h3>Tableau</h3>
      <p>View graphical and tabular reports of JETS data and analysis.</p>
      </div>
      <div class="tools-learn-more">
        <a class="tools-learn-more-btn" href="#">Learn More</a>
      </div>
  </div>
  <div class="tool">
     <img src="http://placehold.it/95x95"/>
      <div class="tool-text">
      <h3>Tableau</h3>
      <p>View graphical and tabular reports of JETS data and analysis.</p>
      </div>
      <div class="tools-learn-more">
        <a class="tools-learn-more-btn" href="#">Learn More</a>
      </div>
  </div>
  <div class="tool">
     <img src="http://placehold.it/95x95"/>
      <div class="tool-text">
      <h3>Tableau</h3>
     ...

CSS

#tools {
  width:946px;
  /*height:1149px;*/
}

.tool {
  width:471px;
  float:left;
  border-top:1px solid #d9d9d9;
  border-left:1px solid #d9d9d9;
  border-right:1px solid #d9d9d9;
  border-bottom:1px solid #d9d9d9;
  display:table;
}

.tool img {
  float:left;
}

.tool img {
  margin-left:28px;
  margin-top:33px;
  margin-bottom:33px;
  margin-right:15px;
}

.tool-text {
  width:142px;
  float:left;
  margin-right:28px;
  margin-top:20px;
  
}

.tool-text p {
  font-size:10px;
}

.tool h3 {
  font-size:15px;
  margin-bottom:0px;
}

.tools-learn-more {
  float:left;
  margin-top:59px;
  
}

.tools-learn-more-btn {
  display:block;
  border:1px solid #3196b5;
  border-radius:5px;
  /*width:145px;
  height:54px;*/
  padding:13px 14px 18px 14px;
  text-transform:uppercase;
  text-decoration:none;
  color:#3196b5;
}

#overlay-tool-1 {
  background: white;
    border-radius: 10px;
    color: black;
    display: none;
    height: 600px;
    left: 24%;
    margin: 0 auto;
    moz-border-radius: 10px;
    o-border-radius: 10px;
    padding: 10px;
    position: absolute;
    top: 32%;
    webkit-border-radius: 10px;
    width: 856px;
    z-index: 1000;
}

.mask{ /* create are mask */
    position:fixed;
    top:0;
    left:0;
    background:rgba(0,0,0,0.6);
    z-index:500;
    width:100%;
    height:100%;
    display:none;
}
/* use :target to look for a link to the overlay then we find are mask */
#overlay-tool-1:target, #overlay-tool-1:target + .mask{
    display:block;
    opacity:1;
}

.close {
  background: red;
    border-radius: 40px;
    color: white!important;
    display: block;
    font-size: 35px;
    font-weight: bold;
    height: 40px;
    line-height: 31px;
    moz-border-radius: 40px;
    o-border-radius: 40px;
    position: absolute;
    right: -20px;
    text-align: center;
    text-decoration: none;
    top: -20px;
    webkit-border-radius: 40px;
    width: 40px;
}

JavaScript

//$(document).ready(function(){
	$('.mask').click(function(){
		document.location = '#';
     $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
	});
//});


/*window.onload = function() {
   
    var u = document.createElement('script');
    u.type = 'text/javascript';
    u.src = 'http://powerdelivery.southernco.com/apc/distribution/dts/iwov-resources/js/popup.js';
    var code = u;
    try {
    document.body.appendChild(u);
    } catch (e) {

    }
	
}*/