JSFiddle - React, Tailwind, and code Playground

by justinwinter

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="container">
  <div class="panel-quote">
    <div class="quote-progress"></div>
    <div>
      <blockquote>
              <p class="quote"></p>
        <p class="author">- <span class="author-name"></span></p>
      </blockquote>
      <div class="quote-nav">
        <button class="previous">
          <i class="fa fa-long-arrow-left" aria-hidden="true"></i>
        </button>
        <button class="next">
          <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
        </button>
      </div>
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

html {
  height: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}

body {
  color: #333;
  font-family: "Open Sans", sans-serif;
}

button {
  background-color: inherit;
  color: #333;
  border: none;
  opacity: .3;
}

button:hover {
  opacity: 1;
}

a {
  text-decoration: none;
  opacity: .3;
}

a:hover {
  opacity: 1;
}

.container {
  margin: 0 auto;
}

.panel-quote {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 400px;
  margin: auto;
  box-sizing: border-box;
  background-color: #fff;
}

.quote-progress {
  width: 0;
  height: 3px;
  background-color: #333;
}

blockquote {
  padding: 30px;
  font-size: 1.4em;
}

.quote {
  font-family: "Open Sans", sans-serif;
}

.author {
  font-size: 1em;
  font-weight: bold;
  text-align: left;
}

/* Quote Navigation */
.quote-nav {
  display: flex;
  align-items: stretch;
  width: 100%;
  padding-bottom: 30px;
}

.previous {
  margin: auto;
}

.next {
  margin: auto;
}

/* Media Queries */
@media screen and (max-width: 460px) {
  .panel-quote {
    min-width: 100%;
  }
  
  blockquote {
    font-size: 1.1em;
  }
}

JavaScript

var listQuotes = [
    {quote: "Do not dwell in the past, do not dream of the future, concentrate the mind on the present moment.", author: "Buddha"},
    {quote: "Two things are infinite: the universe and human stupidity; and I'm not sure about the universe.", author: "Albert Einstein"},
    {quote: "Be who you are and say what you feel, because those who mind don't matter, and those who matter don't mind.", author: "Bernard M. Baruch"},
    {quote: "A room without books is like a body without a soul.", author: "Marcus Tullius Cicero"},
    {quote: "You only live once, but if you do it right, once is enough.", author: "Mae West"},
    {quote: "Be the change that you wish to see in the world.", author: "Mahatma Gandhi"},
    {quote: "If you want to know what a man's like, take a good look at how he treats his inferiors, not his equals.", author: "J.K. Rowling, Harry Potter and the Goblet of Fire"},
    {quote: "No one can make you feel inferior without your consent.", author: "Eleanor Roosevelt, This is My Story"},
    {quote: "If you tell the truth, you don't have to remember anything.", author: "Mark Twain"},
    {quote: "You've gotta dance like there's nobody watching, Love like you'll never be hurt, Sing like there's nobody listening, And live like it's heaven on earth.", author: "William W. Purkey"},
    {quote: "Be yourself; everyone else is already taken.", author: "Oscar Wilde"}
];

var currentQuote = 0;
var progress = setInterval(timerProgress, 40);
var progressWidth = 0;

// var timeDisplayed = 10000;
// var timer = setInterval(changeQuote, timeDisplayed);

function timerProgress() {
  $(".quote-progress").width(progressWidth + "%");
  if(progressWidth < 100) {
    progressWidth += 0.1;
  } else {
    changeQuote();
    progressWidth = 0;
  }
}

function setQuote() {
  $(".quote").html('"' + listQuotes[currentQuote].quote + '"');
  $(".author-name").html(listQuotes[currentQuote].author);
  tweetQuote();
}

function getRandomQuote() {
  currentQuote =...