JSFiddle - React, Tailwind, and code Playground

by boulabiar

HTML

<div class="outer">
<div class="middle">
<div class="inner">

<div class="quoteText">
    if at first the idea is not absurd then there is no hope for it.
    <div class="author">
        Albert Einstein
    </div>
</div>

</div>
</div>
</div>

CSS

.outer {
    display: table;
    position: absolute;
    height: 100%;
    width: 100%;
}

.middle {
    display: table-cell;
    vertical-align: middle;
}

.inner {
    margin-left: auto;
    margin-right: auto; 
    width: /*whatever width you want*/;
}

div.fullText {
    display: table;
    position: absolute;
}

div.quoteText {
    margin: auto;
    display: table;
    width: 90%;
    vertical-align: middle;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    font-size : 500%;
    color: rgba(0, 0, 0, 0.6);
    text-align: center;
    background:rgba(10,10,200,.05);
    display: table-cell;
    vertical-align: middle;
}

div.author {
    font-family: 'Indie Flower', cursive;
    font-size : 80%;
    text-align: right;
    color: rgba(0, 0, 0, 0.6);
}

JavaScript

WebFontConfig = {
    google: { families: [ 'Yanone+Kaffeesatz::latin' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })();

$(.author).text="aaa"