JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div id="target">
  An example test article title would end up here
</div>
<div id="fill">

</div>

CSS

@import url(https://fonts.googleapis.com/css?family=Playfair+Display:700);

body{
  background-color: #ffd400;
  margin: 15vw 0 0;
  padding: 0;
}

#fill{
  min-height: 100vmax;
  background-color: #fff;
}

#target{
  font-family: 'Playfair Display', sans-serif;
  font-size: 100px;
  //font-size: 9vw;
  //max-width: 600px;
  //width: 100%;
  position: relative;
  padding-bottom: 2vw;
  overflow: hidden;
  margin: 0 4vw;
}

.sfb-wrap{
  position: relative;
  color: #000;
  padding: 0 2vw;
}
.sfb-wrap:after{
  content: '';
  position: absolute;
  top: 60%;
  right: 0;
  bottom: -60%;
  left: 0;
  background-color: #fff;
  z-index: -1;
}

JavaScript

/**
 * Initialize bottomUpText shape processor and events
 * @param  {object} elem DOM object to shape
 * @return {object}
 */
var bottomUpText = function(elem){
  var _t = this;

  // Set up element
  _t.STAGE                  = elem;
  _t.STAGE.style.whiteSpace = 'nowrap';

  // Fetch text as array
  _t.text                  = _t.STAGE.textContent.trim().split(' ');

  // Run and bind
  _t.processText();
  window.addEventListener('resize', function(){ _t.processText(); });

  return _t;
}


/**
 * Process text shape
 */
bottomUpText.prototype.processText = function(){
  // Set up vars
  var _t = this,
      maxWidth,
      span,
      prevX;

  // Get max possible width
  maxWidth = _t.STAGE.offsetWidth;

  // Reset stage
  _t.STAGE.innerHTML = '';

  // Loop text array in reverse order
  for(var i = _t.text.length - 1, n = 0, x = maxWidth; i >= 0; i--){
    // Create new span if needed
    if(!span){
      span = _t.newSpan();
    }

    // Store current span width
    prevX = span.offsetWidth;

    // Prepend word to span
    span.innerHTML = (_t.text[i].trim() + ' ' + span.innerHTML).trim();

    // If additional word exceeds width cap
    if(span.offsetWidth >= x){
      // Prepend break tag before span
      _t.STAGE.insertBefore(document.createElement('br'), span);

      // Update max width for stepdown shape
      // Disable this line if text block shape is no issue
      x = prevX;

      // Remove last added word from current span, create a new span and transfer word
      span.innerHTML = span.innerHTML.replace(/^\w*\s/, '');
      span           = _t.newSpan();
      span.innerHTML = _t.text[i].trim();

      // Reset word count
      n = 0;
    }

    // Incremement span word count
    n++;
  }
}


/**
 * Prepend new span DOM element to stage
 * @return {object} Created DOM object
 */
bottomUpText.prototype.newSpan = function(){
  var _t = this,
      span;

  // Create element
  span           = document.createElement('span');
  span.className =...