JSFiddle - React, Tailwind, and code Playground

by Lucaskazama

HTML

<input type="text" class="global-headings" placeholder="Headings">
<input type="text" class="global-paragraphs" placeholder="Paragraphs">
<input type="text" class="global-buttons" placeholder="Buttons">

<button id="updateBtn">
Atualizar
</button>

<div class="vertical-flex">
  <h1 class="heading">
  Testando
  </h1>
  <p class="description">
  Amigos de la choce hoy
  </p>
  <a class="btn">
  Botão Exemplo
  </a>
</div>

<div class="vertical-flex">
  <h1 class="heading">
  Testando
  </h1>
  <p class="description">
  Amigos de la choce hoy
  </p>
  <a class="btn">
  Botão Exemplo
  </a>
</div>

CSS

.vertical-flex{
  display: flex;
  flex-flow: column;
  max-width: 200px;
}

JavaScript

var headings = $(".global-headings");
var paragraph = $(".global-paragraphs");
var button = $(".global-buttons");

$("#updateBtn").click(function(){
	$(".heading").text(headings.val());
  $(".description").text(paragraph.val());
  $(".btn").text(button.val());
});