JSFiddle - React, Tailwind, and code Playground
by Kofod
JavaScript
<!-- Don't put this in VP -->
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<!-- Everything from here on in VP -->
<!-- HTML -->
<div class="layoutContainer flexBox" style="position: relative; width: 960px; height: 1032px; background: #9378B4 url(https://i.imgur.com/KtwDa3X.png);">
<!--
Text box above
rgba(255, 255, 255, 0.8) for the BG colour of the box
#252525 for the colour of the text
-->
<div class="textBox" style="position: absolute; overflow: auto; width: 714px; height: 150px; top: 100px; background: rgba(110, 84, 141, 1); padding: 40px 50px 10px 50px; border-radius: 8px; text-align: justify; text-align-last: center; color: #FFFFFF;">
<div style="position: relative; z-index: 1;">
<!-- Message in text box above -->
December har finally arrived, and yet another year the teams are launching the traditional christmas calendar! Are you excited to see what the VP advent calendar 2022 will bring? <br>
From today and until the 25th of December you will be able to open a new door everyday, and each door is hiding a surprise for you. So come back daily to see what fun we have for you! <br> <br>
Happy December everyone and merry Christmas! 🎄 <br> <br>
And for everyone who has taken part in making this possible, an extra big thank you! If it was not for our incredible teams on Vp this would not be possible! ✨
</div>
</div>
<div class="doorContainer flexBox" style="position: absolute; width: 860px; top: 260px;"></div>
<!-- Image for the title of the Advent Calendar -->
<img style="position: absolute; pointer-events: none; top: 0px;" src="https://i.imgur.com/lzdps4u.png">
<!-- The wait message you see when you click a door that you can't open yet -->
<div class="waitMessage flexBox" style="display: none; position: fixed; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 2;">
<!-- rgba(30, 30, 30, 0.8) is the colour of the half see through...