JSFiddle - React, Tailwind, and code Playground

by justinwinter

HTML

<div class="m-linkitem">
<a href="#">Health Plan</a><br>
<a href="#">Flexible Benefits</a><br>
<a href="#">Life and AD&amp;D Insurance</a><br>
<a href="#">Additional Programs and Services</a><br>
<a href="#">Qualifying Life Events</a><br>
<a href="#">Did You Know?</a><br>
<a href="#">Forms</a><br>
<a href="#">Document Library</a><br>
<a href="#">Annual Notices</a><br>
<a href="#">Contact Us</a><br>
<a href="#">Give Us Feedback or Report a Website Issue</a>

</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Muli');
body {
  margin: 0;
  padding: 0;
  width: 100vw;
  font-family: Muli, sans-serif;
  }

h1, h2, h3, h4 {
  font-family: Muli, sans-serif;
  font-weight: 900;
  color: #000;
}

p {
  font-size: 18px;
  line-height: 15px;
}

.m-linkitem {
  position: absolute;
 top: 50%;
 left: 32%;
 
  -webkit-transform: translate(-51%, -50%);
  -moz-transform: translate(-51%, -50%);
  -ms-transform: translate(-51%, -50%);
  -o-transform: translate(-51%, -50%);
  transform: translate(-51%, -50%);
  max-width: 500px;
  width: 100%;
  transform-origin: center;
 }
.m-linkitem a {
  transition: all .2s linear;
  font-size: 22px;
  line-height: 30px;
  color: #000;
  text-decoration: none;
  padding-bottom: 5px;
  background: linear-gradient(to right, #005c99 0%, #33adff 90%);
  background-size: 0px 2px;
  background-repeat: no-repeat;
  background-position: left 85%;
  text-shadow: 0;
}
.m-linkitem a:hover {
  background-size: 100% 2px;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}