JSFiddle - React, Tailwind, and code Playground

Portal layout Download

by Hugo Carneiro

HTML

<div class="viewport-content scroll">
  <div class="content-main container-fluid">
    <div class="row">
      <div class="col-xs-12 col-md-8 col-md-offset-2">

        <div class="list list-default">
          <ul>
            <li class="linked download">
              <div class="list-image"></div>
              <div class="list-desc">
                <p class="list-title">Registration &amp; Information</p>
              </div>
              <span class="buttonControl"></span>
            </li>
            <li class="linked swipe">
              <div class="list-swipe-wrapper action-swipe-left">


                <div class="list-image"></div>
                <div class="list-desc">
                  <p class="list-title">Structured Networking</p>
                </div>
                <span class="buttonControl"></span>
                <div class="swipe-action swipe-action-left">Delete</div>
              </div>
            </li>
            <li class="linked download">
              <div class="list-image"></div>
              <div class="list-desc">
                <p class="list-title">Riverbed Welcome Reception</p>
              </div>
              <span class="buttonControl"></span>
            </li>
            <li class="linked">
              <div class="list-image"></div>
              <div class="list-desc">
                <p class="list-title">General Session</p>
              </div>
              <span class="buttonControl"></span>
            </li>
            <li class="linked">
              <div class="list-image"></div>
              <div class="list-desc">
                <p class="list-title">Breakout Session 1</p>
              </div>
              <span class="buttonControl"></span>
            </li>
          </ul>
        </div>

      </div>
    </div>
  </div>
</div>

CSS

body {
  background: #e8e8e8;
  color: #333;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.viewport-content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.scroll {
  overflow: auto !important;
}

.content-main {
  padding-top: 70px;
}

.list.list-default ul {
  padding: 0;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  overflow: hidden;
}

.together.list.list-default ul {
  font-size: 1em;
  line-height: 1.25;
}

.list.list-default ul > li {
  list-style: none;
  border-bottom: 1px solid rgba(51, 51, 51, 0.2);
  padding: 15px 10px 15px 0px;
  position: relative;
}

.list.list-default ul > li.linked {
  padding-right: 44px;
}

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

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

.list.list-default ul > li p {
  margin: 0;
}

.list.list-default ul > li .list-title + p {
  margin-top: .5em;
}

.list.list-default ul > li .buttonControl {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  text-indent: -9999px;
  cursor: pointer;
  transition: all .5s ease;
}

.list.list-default ul > li .buttonControl:after {
  content: '';
  display: block;
  position: absolute;
  width: 44px;
  height: 44px;
  top: 50%;
  right: 0;
  margin-top: -22px;
  background-color: #333;
  -webkit-mask: url(http://i.imgur.com/KPsk5LX.png);
  -moz-mask: url(http://i.imgur.com/KPsk5LX.png);
  -ms-mask: url(http://i.imgur.com/KPsk5LX.png);
  mask: url(http://i.imgur.com/KPsk5LX.png);
  -webkit-mask-size: cover;
  -moz-mask-size: cover;
  -ms-mask-size: cover;
  mask-size: cover;
  transition: all .5s ease;
}

.list.list-default ul > li.download .buttonControl:after {
  -webkit-mask: url(http://i.imgur.com/AuYYIF4.png);
  -moz-mask: url(http://i.imgur.com/AuYYIF4.png);
  -ms-mask:...

JavaScript

$('li .buttonControl').on('click', function() {
  var _this = $(this);

  if (_this.parents('li').hasClass('download')) {
  	_this.parents('li').removeClass('download');
  }
});