JSFiddle - React, Tailwind, and code Playground
HTML
<blockquote>
<p>loading quote..</p>
</blockquote>
CSS
media="screen" html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hr {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
vertical-align: baseline;
}
blockquote:before, blockquote:after, q:before, q:after {
content:"";
}
blockquote:before {
position: absolute;
display: block;
left: 0px;
top: 0px;
color: #c4c8cc;
font-size: 90px;
content:"\201C";
}
blockquote, q {
quotes:"""";
}
blockquote {
position: relative;
margin: 1em 3em 1em 3em;
border: 1px dotted #8cacbb;
background: #dee7ec;
padding: 1em 2em 0.5em 2em;
font-family:Arial;
}
JavaScript
// [[<URL>|<TEXT>]] -> <a href='<URL>'><TEXT></a>
// [[<URL>]] -> <a href='<URL>'><URL></a>
var quotes = [
["I was flying around in my U.F.O. with a load of fuel in my inventory searching the deserts for pyramids. – The interesting part is: I found the pyramid half-buried in the sand!", "[[https://forum.minetest.net/viewtopic.php?pid=111724#p111724|Wuzzy]], [[https://forum.minetest.net/viewtopic.php?id=7063|Mod: Pyramids]]"],
["Some other quote", "someone"],
["Add as many as you'd like", "someone else"]
];
// Do not touch -- especially not the regexes in 's2html'
function s2html(txt) {
var r = [
[/\[\[([^|]*)\|([^\]]*)\]\]/, "<a href='$1' class='urlextern' title='$1' rel='nofollow'>$2</a>"],
[/\[\[([^\]]*)\]\]/, "<a href='$1' class='urlextern' title='$1' rel='nofollow'>$1</a>"]
];
for(var i = 0; i < r.length; i++) {
while(r[i][0].exec(txt) !== null)
txt = txt.replace(r[i][0], r[i][1]);
}
return txt;
}
var random = Math.floor((Math.random()*quotes.length));
jQuery('blockquote > p').html(s2html(quotes[random][0]) + "<cite>" + s2html(quotes[random][1]) + "</cite>");