JSFiddle - React, Tailwind, and code Playground

by Donna Torr

HTML

<div class="container certificate">
  <div class="cert-content">
    <div class="cert-fields">
      <span class="ct-name">name</span>
      <span class="ct-level">Level</span>
      <span class="ct-date">date</span>
    </div>    
  </div>
</div>

CSS

.certificate {
  background: url(https://crhnet.ca/wp-content/uploads/2024/08/Ideas-CRHNet-membership-cert-BH-1.png) no-repeat center center cover;
    height: 100%;
    width: 100%;
}
.cert-content {
  display: flex;
  align-items: center;
  justify-content: center;
  position:absolute;
}
.cert-fields {
  position:relative;
  left:50%;
  top:42%;
  background-color:transparent;
}
.ct-name {
  position:relative;
  top:40%;
}
.ct-date {
  position:relative;
  left:61%;
  top:89%;
  background-color:transparent;
}