JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="https://raw.githubusercontent.com/DanielHoffmann/jquery-bigtext/master/jquery-bigtext.js"></script>
<form>
  <input type="text" placeholder="yourName" />
  <input type="text" placeholder="recipientName" />
</form>
<div class="template">
  <img class="image" src="https://i.imgur.com/0Dm9B7t.png" alt="" />
  <div class="container">
    <div class="text">
      <div class="names">
        <span id="yourName">Your Name</span> + <span id="recipientName">Recipiant Name</span>
      </div>   
      <div id="message">
        = Happiness
      </div>
      <div id="hastag">
        #HappyAnniversary
      </div>
    </div>
  </div>
</div>

CSS

.template {
  background: red;
  position: relative;
}

.template .image {
  display: block;
  width: 100%;
  position: relative;
}

.template .text {
  font-family: 'Roboto-Bold', sans-serif;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: red;
  text-align: center;
  color: white;
  width: 100%;
}

JavaScript

$(names).bigText({
      limitingDimension: "width"
    });