JSFiddle - React, Tailwind, and code Playground

by mrjordy

HTML

<a href="#" class="linkNoStyle">
  <div class="folderContainer">
    <div class="folderIcon"></div>
    <div class="folderText">Application Hosting</div>
  </div>
</a>
<a href="#" class="linkNoStyle">
  <div class="folderContainer">
    <div class="folderIcon"></div>
    <div class="folderText">Authentication and Authorization</div>
  </div>
</a>
<a href="#" class="linkNoStyle">
  <div class="folderContainer">
    <div class="folderIcon"></div>
    <div class="folderText">BAN and LAN</div>
  </div>
</a>
<a href="#" class="linkNoStyle">
  <div class="folderContainer">
    <div class="folderIcon"></div>
    <div class="folderText">Boundary, DMZ, and COI</div>
  </div>
</a>
<a href="#" class="linkNoStyle">
  <div class="folderContainer">
    <div class="folderIcon"></div>
    <div class="folderText">Collaboration Services</div>
  </div>
</a>
<a href="#" class="linkNoStyle">
  <div class="folderContainer">
    <div class="folderIcon"></div>
    <div class="folderText">Commercial off the Shelf Catalog HW and SW</div>
  </div>
</a>
<a href="#" class="linkNoStyle">
  <div class="folderContainer">
    <div class="folderIcon"></div>
    <div class="folderText">COOP, Disaster Recovery, and Business Continuity Planning</div>
  </div>
</a>
<a href="#" class="linkNoStyle">
  <div class="folderContainer">
    <div class="folderIcon"></div>
    <div class="folderText">Cross Domain Security</div>
  </div>
</a>
<a href="#" class="linkNoStyle">
  <div class="folderContainer">
    <div class="folderIcon"></div>
    <div class="folderText">Data Storage</div>
  </div>
</a>
<a href="#" class="linkNoStyle">
  <div class="folderContainer">
    <div class="folderIcon"></div>
    <div class="folderText">Desk Side Support</div>
  </div>
</a>
<a href="#" class="linkNoStyle">
  <div class="folderContainer">
    <div class="folderIcon"></div>
    <div class="folderText">Directory Services</div>
  </div>
</a>
<a href="#" class="linkNoStyle">
  <div class="folderContainer">
    <div...

CSS

.linkNoStyle {
  color: #222;
  text-decoration: none;
}

.folderContainer {
  width: 100px;
  display: inline-block;
  vertical-align: top;
  font-family: sans-serif;
}

.folderContainer:hover .folderIcon {
  background: linear-gradient(#e3be79, #c8ab76);
}

.folderContainer:hover .folderText {
  color: black;
}

.folderText {
  text-align: center;
  margin-top: 7px;
}

.folderIcon {
  width: 50px;
  height: 35px;
  margin: 0 auto;
  margin-top: 20px;
  position: relative;
  background: linear-gradient(#d5c5aa, #c8ab76);
  border-radius: 0 3px 3px 3px;
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.30);
}

.folderIcon:before {
  content: '';
  width: 40%;
  height: 4px;
  border-radius: 0 5px 0 0;
  background-color: #ac9366;
  position: absolute;
  top: -4px;
  left: 0px;
}