JSFiddle - React, Tailwind, and code Playground

by Donna Torr

HTML

<div class="cert">
    <p class="name">[nam]</p>
    <p class="level">[lvl]</p>
    <p class="expiry">[ren]</p>
</div>

CSS

html, body{
    height: 100%;
    width: 100%;
}
.cert {
    height: 100%;
    width: 100%;
    position: relative;
    background:url(https://crhnet.ca/wp-content/uploads/2024/08/Ideas-CRHNet-membership-cert-BH-1.png) no-repeat center center / cover;
}
.name {
    position: absolute;
    color: #000;
    margin:0;
    font-size:24px;
}
.level {
    position: absolute;
    color: #000;
    margin:0;
    font-weight:600;
}
.expiry {
    position: absolute;
    color: #000;
    margin:0;
    font-weight:600;
}

    @media (min-aspect-ratio: 2/1) {

        .name{
                bottom: 60%;
                left: 46.875%;
                margin-bottom: 1.25vw;
            }

        .level {
                bottom: 50%;
                left: 46.875%;
                margin-bottom: 1.25vw;
            }
         .expiry {
                bottom: 5%;
                left: 90%;
                margin-bottom: 0.25vw;
            }
    }
    @media (max-aspect-ratio: 2/1) {

        .name {
                bottom: 52.5%;
                left: 50%;
                margin-left: -6.25vh;
            }
        .level {
                bottom: 52.5%;
                left: 50%;
                margin-left: -6.25vh;
            }
             
            .expiry {
                bottom: 52.5%;
                left: 50%;
                margin-left: -6.25vh;
            }
    }