JSFiddle - React, Tailwind, and code Playground

Panels UI

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-xs-12">
  <h2>New design</h2>
  <hr>
  <div class="list-panels three-columns new">
    <ul>
      <li class="panels " style="display: inline-block;">
        <div class="list-image" style="background-color: #f44336;"></div>
        <div class="list-desc">
          <p class="list-title">List item 1</p>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
        </div>
      </li>
      <li class="panels " style="display: inline-block;">
        <div class="list-image" style="background-color: #8bc34a"></div>
        <div class="list-desc">
          <p class="list-title">List item 2</p>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
        </div>
      </li>
      <li class="panels " style="display: inline-block;">
        <div class="list-image" style="background-color: #00bcd4;"></div>
        <div class="list-desc">
          <p class="list-title">List item 3</p>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
        </div>
      </li>
      <li class="panel-gap"></li>
      <li class="panel-gap"></li>
    </ul>
  </div>
</div>
<div class="col-xs-12">
  <h2>New design 2</h2>
  <hr>
  <div class="list-panels two-columns new-two">
    <ul>
      <li class="panels " style="display: inline-block;">
        <div class="list-image" style="background-color: #8bc34a"></div>
        <div class="list-desc">
          <p class="list-title">List item 2</p>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
        </div>
      </li>
      <li class="panels " style="display: inline-block;">
        <div class="list-image" style="background-color: #00bcd4;"></div>
        <div class="list-desc">
          <p class="list-title">List item 3</p>
          <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
        </div>
     ...

CSS

.list-panels ul {
  text-align: justify;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0;
}

.list-panels .panels {
  position: relative;
  font-size: 16px;
}

.list-panels.new ul > li {
  -webkit-box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.25);
}

.three-columns .panels,
.two-columns .panels,
.one-column .panels {
  width: 100%;
  padding-top: 50%;
  margin-bottom: 10px;
}

.new.three-columns .panels {
  padding-top: 0;
  border-radius: 6px;
}

.new-two.two-columns .panels {
  position: relative;
  width: 100%;
  box-shadow: 0px 0px 6px rgba(0,0,0,0.35);
  margin-bottom: 20px;
  padding-top: 0;
}

.panel-gap {
  display: inline-block;
  position: relative;
}

.three-columns .panel-gap,
.two-columns .panel-gap,
.one-column .panel-gap {
  width: 100%;
}

.list-panels ul > li .list-image {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.list-panels.new ul > li .list-image {
  position: relative;
  width: 100%;
  padding-top: 50%;
  border-radius: 6px 6px 0 0;
}

.list-panels.new-two ul > li .list-image {
  position: relative;
  width: 100%;
  padding-top: 50%;
}

.list-panels ul > li .list-desc {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px;
  background: rgba(255, 255, 255, 0.8);
  max-height: 100%;
  overflow: hidden;
  text-align: left;
}

.list-panels.new ul > li .list-desc {
  position: relative;
  background: #FFF;
  padding: 30px 20px 30px 20px;
  border-radius: 0 0 6px 6px;
}

.list-panels.new-two ul > li .list-desc {
  padding: 15px 15px 15px 15px;
  position: relative;
}

.list-panels .list-desc .list-title {
  font-size: 1em;
  font-weight: bold;
  margin: 0;
}

.list-panels .list-desc .list-title + p {
  font-size: 0.9em;
  margin: .5em 0 0;
}

.list-panels.new .list-desc .list-title + p,
.list-panels.new-two .list-desc .list-title + p {
  font-size: 0.9em;
  color: #999;
  margin: .5em 0 0;
  font-weight: 200;
}

@media (min-width:...