JSFiddle - React, Tailwind, and code Playground

by Toshi Takeuchi

HTML

<div class="" id="ad">
      <div id="bg" class="asset"><img /></div>
      <div id="logo" class="asset"><img /></div>
      <div id="textblock">
        <span id="headline"></span><br />
        <span id="subHeadline"></span></div>
      <div id="cta"></div>
    </div>

CSS

#headline {
  font-size: 16px;
  font-weight: bold;
  text-transform: none;
}

#subHeadline {
  font-size: 14px;
  font-weight: normal;
  text-transform: none;
}

body {
  margin: 0;
  padding: 0;
  user-select: none;
}

#ad {
  position: relative;
  width: 300px;
  height: 250px;
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
}

#ad>div {
  position: absolute;
}

.asset img {
  max-width: 100%;
  max-height: 100%;
  position: relative;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#cta {
  background-color: #d78825;
  width: 230px;
  top: 165px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 5px;
  text-align: center;
  font-size: 13px;
}

#cta:hover {
  background-color: #cb6015;
}

#bg.asset {
  top: 0px;
  left: 0px;
  width: inherit;
  height: inherit;
}

#logo.asset {
  top: 215px;
  left: 95px;
  right: 150px;
  width: 106px;
  height: 23px;
}

#textblock {
  top: 115px;
  left: 25px;
  right: 25px;
  width: 258px;
  text-align: center;
  color: #ffffff;
}

JavaScript

var adcopy = {
        headline: 'Machine Learning with MATLAB',
        subHeadline: 'Explore the frontier of AI',
        ctaText: 'Download Free eBook'
      };
      var images = {
        logoImage: 'images/mathworks-logo-white.png',
        backgroundImage: 'images/machinelearning-A-300x250.jpg'
      };
      document.getElementById("bg").getElementsByTagName("img")[0].src = images.backgroundImage;
      document.getElementById("logo").getElementsByTagName("img")[0].src = images.logoImage;
      document.getElementById('headline').innerHTML = adcopy.headline;
      document.getElementById('subHeadline').innerHTML = adcopy.subHeadline;
      document.getElementById('cta').innerHTML = adcopy.ctaText;