JSFiddle - React, Tailwind, and code Playground

by Senipah

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dom-to-image/2.6.0/dom-to-image.js"></script>
  <div class="container">
    <header>
      <div class="ident-wrapper">
        <h1 class="ident"><span class="logo">VBA</span></h1>
        <h1 class="ident"><span class="logo">Better Array</span></h1>
      </div>
    </header>
    <button onclick="takeScreenShot()">Download</button>
  </div>

CSS

@import url('https://fonts.googleapis.com/css?family=Varela+Round&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

header {
  margin-top: 10px;
  width: 1600px;
  height: 480px;
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  grid-template-rows: repeat(8, 1fr);
  /* border-radius: 10px; */
  overflow: hidden;
}


.ident-wrapper {
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translate(-50%, -50%);
  /* background-color: rgb(15, 123, 15); */
  /* background-color: #0f773e; */
  background-image: linear-gradient(#16844b, #0d6f37);
  -webkit-box-shadow: 5px 5px 5px 0px rgba(62, 62, 62, 0.9);
  -moz-box-shadow: 5px 5px 5px 0px rgba(62, 62, 62, 0.9);
  box-shadow: 5px 5px 5px 0px rgba(62, 62, 62, 0.9);
  border-radius: 10px;
}


.left-icon {
  position: absolute;
  left: 25%;
  top: 25%;
  transform: translate(-50%, -50%);
}

.right-icon {
  position: absolute;
  left: 75%;
  top: 25%;
  transform: translate(-50%, -50%);
}

.ident {
  padding: .5rem 2rem;
  font-size: 6rem;
  color: #fff;
  text-shadow: 2px 2px 2px #000;
  font-family: 'Varela Round', sans-serif;
  letter-spacing: 3px;
}

.reddit {
  color: #ff4500;
}

.logo {
  font-size: 1.5em;
  vertical-align: middle;
  font-family: Arial, Helvetica, sans-serif;
}

svg {
  transform: scale(3);
}

/* Download button style */
button {
  margin-top: 2em;
  padding: 10px 8px;
  border-radius: 8px;
  background-color: #4285f4;
  border: none;
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  outline: none;
}

JavaScript

const hdr = document.querySelector("header");
const colours = [
  '#185B37',
  '#19603A',
  '#1A653E',
  '#1B6A41',
  '#1D6F45',
  '#1E7448',
  '#1F794C',
  '#217E4F',
  '#228353',
  '#238856',
  '#248D5A',
  '#26925D',
  '#279761',
  '#289C64',
  '#2AA168',
  '#2BA66B',
  '#2CAB6F',
  '#2DB072',
  '#2FB576',
  '#30BA79',
  '#31BF7D',
  '#33C481'  
];
const rows = 8;
const columns = 16;

for (let i = rows; i > 0; i--) {
  for (let j = 0; j < columns; j++) {
    let tile = document.createElement("div");
    if (i === 1 && j === 0) {
      tile.style.background = colours[0];   
    } else {
      tile.style.background = colours[j + i - 2]; 
    }
    hdr.appendChild(tile);
  }
}

function takeScreenShot() {
  domtoimage.toPng(hdr)
  .then((dataUrl) => {
    saveAs(dataUrl, 'banner1600x480.png');
  })
  .catch((error) => {
      console.error('oops, something went wrong!', error);
  });
}

function saveAs(uri, filename) {
  let link = document.createElement('a');
  if (typeof link.download === 'string') {
      link.href = uri;
      link.download = filename;
      //Firefox requires the link to be in the body
      document.body.appendChild(link);
      //simulate click
      link.click();
      //remove the link when done
      document.body.removeChild(link);
  } else {
      window.open(uri);
  }
}