JSFiddle - React, Tailwind, and code Playground

by ncapito

HTML

<div id="test" >
    <hr>
    <p>Remember that there is no code faster than no code.</p>
    <p align="right"><cite>-- Taligent's Guide to Designing Programs</cite>

    </p>
    <hr>
    <p>Simplicity is the soul of efficiency.</p>
    <p align="right"><cite>-- Austin Freeman,</cite> "The Eye of Osiris"</p>
    <hr>
    <p>...it is simplicity that is difficult to make.</p>
    <p align="right"><cite>-- Bertholdt Brecht</cite> 
    </p>
    <hr>
    <p>Less is more.</p>
    <p align="right"><cite>-- Mies van der Rohe</cite> 
    </p>
    <hr>
    <p>The <i>inherent</i> complexity of a software system is related to the problem it is trying to solve. The <i>actual</i> complexity is related to the size and structure of the software system as actually built. The difference is a measure of the inability to match the solution to the problem.</p>
    <p align="right">-- <i>Kevlin Henney</i>, "For the sake of simplicity" (1999)</p>
    <hr>
    <p>The minimum could be defined as the perfection that an artefact achieves when it is no longer possible to improve it by subtraction. This is the quality that an object has when every component, every detail, and every junction has been reduced or condensed to the essentials. It is the result of the omission of the inessentials.</p>
    <p align="right"><cite>-- <i>John Pawson</i>, "Minimum" (1998)</cite>
    </p>
    <hr>
    <p>More good code has been written in languages denounced as "bad" than in languages proclaimed "wonderful'' -- much more.</p>
    <p align="right"><cite>-- Bjarne Stroustrup</cite>, "The Design and Evolution of C++" <em>(1994)</em>

    </p>
    <hr>
    <p>I have yet to see any problem, however complicated, which, when you looked at it in the right way, did not become still more complicated.</p>
    <p align="right"><cite>-- Poul Anderson</cite> 
    </p>
    <hr>
    <p>Simple things should be simple and complex things should be possible.</p>
    <p align="right"><cite>-- Alan Kay</cite> 
    </p>
   ...

CSS

#test{
    width: 900px;
}
.row{
    margin-bottom: 10px;
    width: 400px;
    float left;
    display: inline-block;
}
/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}

cite{
   float: right; 
   margin-top: 4px;
    width: 100%;
   text-align: right;
}
blockquote {
    page-break-inside: avoid;
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote p {
  display: inline;
}

JavaScript

var root = $('#test');
root.children("hr").remove();
root.children().last().remove();


var items = [];

$.each(root.children(), function (idx, elm) {
    if (idx % 2 === 0) {
        var $elem = $(elm);
        var temp = {
            author: $elem.next().find('cite').html(),
            quote: $elem.html()
        };

        if (!temp.author) {
            temp.author = $elem.next().html();
        }
        temp.author.replace('-- ', '');

        items.push(temp)
    }
});
root.children().remove();


$.each(items, function(idx, item){
   root.append('<div class=" row"><blockquote class="cf">' + item.quote + '<cite>'+  item.author +'</cite></blockquote></div>');
});