JSFiddle - React, Tailwind, and code Playground

Agenda Mockup Riverbed

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 together">
          <ul>
            <li class="linked">
              <div class="list-image"></div>
              <div class="list-desc">
                <div class="agenda-label to-complete"><span class="glyphicon glyphicon-bell"></span> Complete survey</div>
                <p class="list-title">Registration &amp; Information</p>
                <p>11:00am - 6:00pm
                  <br> Arizona Foyer</p>
              </div>
              <span class="buttonControl"></span>
            </li>
            <li class="linked">
              <div class="list-image"></div>
              <div class="list-desc">
                <div class="agenda-label completed"><span class="glyphicon glyphicon-ok"></span> Survey submitted</div>
                <p class="list-title">Structured Networking</p>
                <p>1:00pm-5:00pm
                  <br> Arizona AB
                  <br>
                  <i>Tap for more information</i></p>
              </div>
              <span class="buttonControl"></span>
            </li>
            <li class="linked">
              <div class="list-image"></div>
              <div class="list-desc">
                <div class="agenda-label to-complete"><span class="glyphicon glyphicon-bell"></span> Complete survey</div>
                <p class="list-title">Riverbed Welcome Reception</p>
                <p>6:00pm-8:00pm
                  <br> North Garden</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>
                <p>8:30am - 9:45am
                  <br> Arizona F, G, H, I</p>
              </div>
              <span...

CSS

body {
  background: #e8e8e8;
}

.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;
}

.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;
}

.together.list.list-default ul > li {
  padding: 10px 10px 10px 0px;
}

.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;
}

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

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

.list.list-default ul > li .buttonControl:after {
  content: "\e080";
  display: block;
  position: absolute;
  width: 26px;
  height: 26px;
  top: 50%;
  right: 0;
  margin-top: -13px;
  font-size: 18px;
  text-align: center;
}

.agenda-label {
  display: inline-block;
  font-size: 12px;
  color: #FFF;
  padding: 5px 12px;
  margin-bottom: 5px;
}

.together .agenda-label {
  margin-bottom: .3em;
}

.to-complete {
  background-color: #D40000;
}

.completed {
  background-color: #1BAF20;
}

</style> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <style>