JSFiddle - React, Tailwind, and code Playground

Fliplet Intro Layout

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container-fluid">
  <div class="panel-overlay">
    <div class="panel-body scroll" data-anchor="bottom">
      <section data-fl-edit="">
        <h2>Maecenas faucibus mollis interdum.</h2>
        <p>Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum
          massa justo sit amet risus.</p>
      </section>
    </div>
  </div>
</div>

CSS

html,
body {
  height: 100%;
}

body {
  margin: 0 !important;
}

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

.container-fluid {
  position: relative;
  height: 100%;
  background-color: #00abd2;
}

.panel-overlay {
  background: none;
  position: absolute;
  margin: 0;
  border-radius: 0;
  top: 15px;
  right: 15px;
  bottom: 15px;
  left: 15px;
}

.scroll {
  overflow: auto !important;
}

.panel-overlay > .panel-body {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  position: absolute;
  top: 0;
  bottom: auto;
  right: 0;
  left: 0;
}

.panel-overlay > .panel-body[data-anchor=bottom] {
  bottom: 0;
  top: auto;
  max-height: 100%;
}

.panel-overlay > .panel-body[data-anchor=top] {
  bottom: auto;
  top: 0;
  max-height: 100%;
}

@media screen and (min-width: 640px) {
  .panel-overlay {
    position: absolute;
    bottom: 25px;
    top: 25px;
    right: 7.5%;
    left: 7.5%;
  }
  .panel-overlay > .panel-body {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    position: absolute;
    top: 0;
    bottom: auto;
    right: 0;
    left: 0;
  }
}

@media screen and (min-width: 768px) {
  .panel-overlay {
    right: 12.5%;
    left: 12.5%;
  }
}