JSFiddle - React, Tailwind, and code Playground

HTML

<div class="book">
  <div class="book__background book-bg">
    <div class="book-bg__top">
      <div class="book-bg__left"></div>
      <div class="book-bg__right"></div>
      <div class="book-bg__center"></div>
    </div>
    <div class="book-bg__bottom">
      <div class="book-bg__left"></div>
      <div class="book-bg__right"></div>
      <div class="book-bg__center"></div>
    </div>
  </div>
  <div class="book__content">
    <h2>Metamorphosis, mankind, and hypnosis</h2>

    <p>Powerdrain at the moon was the friendship of faith, consumed to a chemical kahless.
      definition at the center was the history of starlight travel, eated to an ancient emitter.
      The planet is more crew now than proton. cold and impressively dead.
      The species is more ship now than cosmonaut. most unusual and quickly harmless.
      future at the cabin was the nuclear flux of hypnosis, deceived to a conscious astronaut.
      where is the sub-light ship.</p>

    <p>Sensor at the moon was the starlight travel of tragedy, influenced to a reliable particle.
      galaxy at the parallel universe was the alignment of assimilation, promised to a carnivorous spacecraft.
      the space is more captain now than creature. spheroid and unearthly strange.
      ancient, mysterious lieutenant commanders impressively open a reliable, evasive klingon.</p>

    <p>Hypnosis at the solar sphere was the death of mankind, lowered to a clear particle.
      Modification at the habitat oddlywildly, indeed was the honor of mystery, observed to a conscious sensor.
      Stigma at the habitat oddlyred alert was the attitude of x-ray vision, attacked to a post-apocalyptic girl.
      Shield at the moon was the procedure of mystery, empowered to a biological ship.
      The vogon is more sensor now than space suit. carnivorous and technically senior.
      the crewmate is bravely clear.</p>

    <img src="http://i.imgur.com/EtDcq9p.jpg" alt="">

    <p>Sonic shower at the universe was the death...

CSS

body {
  margin: 0;
  padding: 0;
}

.book {
  position: relative;

  min-width: 700px;
  min-height: 100vh;
  padding: 50px 150px 220px 200px;
  box-sizing: border-box;
}

.book__background {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.book-bg {
  height: 100%;
}

.book-bg__top {
  height: 50%;
}

.book-bg__bottom {
  height: 50%;
}

.book-bg__left {
  float: left;

  width: 300px;
  height: 100%;

  background-image: url(http://i.imgur.com/tp2XKJP.jpg);
}

.book-bg__bottom .book-bg__left {
  background-position: left bottom;
}

.book-bg__right {
  float: right;

  width: 249px;
  height: 100%;

  background-image: url(http://i.imgur.com/Ao2vUPO.jpg);
}

.book-bg__bottom .book-bg__right {
  background-position: right bottom;
}

.book-bg__center {
  height: 100%;
  overflow: hidden;

  background-image: url(http://i.imgur.com/K9T5ISb.jpg);
}

.book-bg__bottom .book-bg__center {
  background-position: bottom left;
}

.book__content {
  position: relative;
}

.book__content img {
  max-width: 100%;
}