JSFiddle - React, Tailwind, and code Playground

by Sampath_Madhuranga

HTML

<section class="banner">
  <div class="banner__btn">
    <button id="btn">
      Generate Quote
    </button>
  </div>
  <div class="banner__quote">
    <blockquote>
      <sup class="quote-mark">“</sup>
      <span id="quote"></span>
    </blockquote>
  </div>
  <div class="banner__info">
    <p id="info">
    qazwwsx
    </p>
  </div>
</section>

CSS

.banner {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 15px 20px;
  background-color: #cccccc;
}

.banner .banner__btn button {
  background-color: #eeeeee;
  border: none;
  font-size: 14px;
  color: #111111;
  padding: 5px 8px;
}

.banner .banner__quote blockquote {
  background-color: #ffffff;
  padding: 5px 10px;
  border-left: 10px solid #111111;
  border-radius: 2px;
}

.banner .banner__quote sup {
  font-size: 18px;
  margin-top: -5px;
}

.banner .banner_info p {
  
}

JavaScript

document.getElementById("btn").addEventListener("click", ()=> {
	const obj = {
  	quote: 'qwerty',
    subject: ['text1', 'text2']
  }
  
  document.getElementById("quote").innerHTML = obj.quote;
  document.getElementById("info").innerHTML = obj.subject.join('');
});