JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div class="quote-carousel">
            <blockquote class="quote-carousel__item">
                <i>“ONE Quote from customer goes here. Can be gathered through SEs, #newgearday posts, order feedback, Sweetwater customer feedback form, or third party site (I believe).”</i>
                <div class="blockquote-author">
                - John D., Anyplace, United States (?)
                </div>
            </blockquote>
            <blockquote class="quote-carousel__item">
                <i>“TWO Quote from customer goes here. Can be gathered through SEs, #newgearday posts, order feedback, Sweetwater customer feedback form, or third party site (I believe).”</i>
                <div class="blockquote-author">
                - John D., Anyplace, United States (?)
                </div>
            </blockquote>
            <blockquote class="quote-carousel__item">
                <i>“THREE Quote from customer goes here. Can be gathered through SEs, #newgearday posts, order feedback, Sweetwater customer feedback form, or third party site (I believe).”</i>
                <div class="blockquote-author">
                - John D., Anyplace, United States (?)
                </div>
            </blockquote>
            <blockquote class="quote-carousel__item">
                <i>“FOUR Quote from customer goes here. Can be gathered through SEs, #newgearday posts, order feedback, Sweetwater customer feedback form, or third party site (I believe).”</i>
                <div class="blockquote-author">
                - John D., Anyplace, United States (?)
                </div>
            </blockquote>
        </div>

CSS

.quote-carousel__item {
  display: none;
}

.quote-carousel__active {
  display: block;
}

JavaScript

function randomizer() {
  const quotes = document.querySelectorAll('.quote-carousel__item'),
  			max = quotes.length,
  			i = Math.floor(Math.random() * max),
  			selected = quotes[i];
  selected.classList.add('quote-carousel__active');
}
randomizer();