JSFiddle - React, Tailwind, and code Playground

Sales Plays Main Menu

by Hugo Carneiro

HTML

<div class="background-img">
  <div class="overlay">
    <img src="http://www2.purestorage.com/_media/riverbed.png">
    <h1>Sales Plays</h1>

    <div class="list list-default  ">
      <ul id="list_1318951762">
        <li class="linked ">
          <div class="list-image"></div>
          <div class="list-desc">
            <p class="list-title" style="
    /* color: #c9302c; */
">Application Performance Assurance</p>
          </div><span class="buttonControl link link-action-screen  "></span>
        </li>
        <li class="linked ">
          <div class="list-image"></div>
          <div class="list-desc">
            <p class="list-title">Branch Transformation</p>
          </div><span class="buttonControl link link-action-screen  "></span></li>
        <li class="linked ">
          <div class="list-image"></div>
          <div class="list-desc">
            <p class="list-title">Data Center Transformation</p>
          </div><span class="buttonControl link link-action-screen  "></span>
        </li>
        <li class="linked ">
          <div class="list-image"></div>
          <div class="list-desc">
            <p class="list-title">Microsoft EcoSystem Assurance</p>
          </div><span class="buttonControl link link-action-screen  "></span>
        </li>
        <li class="linked ">
          <div class="list-image"></div>
          <div class="list-desc">
            <p class="list-title">Network Excellence</p>
          </div><span class="buttonControl link link-action-screen  "></span>
        </li>
        <li class="linked ">
          <div class="list-image"></div>
          <div class="list-desc">
            <p class="list-title">Professional Services </p>
          </div><span class="buttonControl link link-action-screen  "></span>
        </li>
      </ul>
    </div>

  </div>
</div>

CSS

body,
html {
  width: 100%;
  height: 100%;
  font-family: helvetica;
  -webkit-font-smoothing: antialiased;
}

img {
  width: 300px;
  max-width: 100%;
  height: auto;
}

.background-img {
  width: 100%;
  height: 100%;
  background: url(http://cdn.allwallpaper.in/wallpapers/2400x1350/3209/eiffel-tower-paris-city-lights-skyline-2400x1350-wallpaper.jpg);
  background-position: center center;
  background-size: cover;
}

.overlay {
  position: absolute;
  bottom: 25px;
  right: 10%;
  left: 10%;
  padding: 25px;
  text-align: center;
  background: rgba(0, 0, 0, 0.25);
  color: #FFF;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.8);
}

.list.list-default ul {
  padding: 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 200;
  text-align: left;
}

.list-default ul > li {
  list-style: none;
  border-bottom: 1px solid rgba(252, 103, 25, 1);
  padding: 10px 10px 10px 0px;
  padding-right: 44px;
  padding-left: 10px;
  position: relative;
  background-color: rgba(0, 0, 0, 0.5);
  margin-bottom: 4px;
}

.list-default ul > li:last-child {
  margin-bottom: 0px;
}

.list.list-default ul > li .list-image {
  display: none;
}

.list.list-default ul > li .list-title {
  font-size: 1.1em;
  font-weight: 600;
  margin: 0;
}

.list.list-default ul > li .buttonControl {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  font-family: 'Glyphicons Halflings';
}

.list-default ul > li .buttonControl:after {
  content: "\e080";
  display: block;
  position: absolute;
  width: 44px;
  height: 44px;
  top: 50%;
  right: 0;
  margin-top: -22px;
  font-size: 22px;
  line-height: 44px;
}