JSFiddle - React, Tailwind, and code Playground

by bluesweater

HTML

<!-- Met onderstaande code kun je een tekstvak toevoegen. Hiervoor moet je de breedte (width), hoogte (heigth), bovenste grens (top) en linker grens (left) nodig. Deze waardes kun je vervolgens invullen achter de juiste plek. -->


<div align="left">
<div style="overflow: auto; position: absolute; width: 380px; height: 152px; top: 230px; left: 56px; color: white">Het is vandaag Pizza Party Dag. Een goed excuus om lekker pizza te gaan eten, want die zijn altijd lekker. Je hebt natuurlijk enorm veel verschillende pizza's. Met weinig beleg of juist met veel! Hieronder staat een woordzoeker waarbij je <b>11</b> soorten beleg pizza beleg gaat zoeken! Denk aan vlees, groente of kaas! <br><br>

<b>Wat kun je winnen?</b><br>
Als je alle woorden hebt gevonden, verschijnt er een berichtje in beeld met een code! Deze code is komende 7 dagen te claimen <b>tot en met 23 mei 23.59 uur</b>. Wanneer je de code claimt, krijg je items van de hiernaast getoonde set! <br><br>

Veel succes. Eventuele vragen kun je hieronder stellen! <br>
Liefs, Anouk
</div>
<img src="https://i.imgur.com/p4noBRP.png" alt="" > </div>
<div style="overflow: hidden; width: 688px; height: 500px"><iframe style="overflow: hidden; margin-top: -58px; margin-left: -8px;" src="//jsfiddle.net/bluesweater/c5grqLha/56//embedded/result" frameborder="0" width="700" height="1100"></iframe></div>

<!-- met onderstaande code kun je een scrollbalk leuke kleurtjes geven. Hiervoor verander je de #E4F2FF,#AAC8EB en #BDD6F2. -->

<script type="text/javascript">// <![CDATA[
var css = document.createElement("style");
css.type = "text/css";
css.innerHTML = "::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #F5BA5E; } ::-webkit-scrollbar-thumb { background: #DB894C; } ::-webkit-scrollbar-thumb:hover { background: #D77E19; }";
document.body.appendChild(css);
// ]]></script>

CSS

* {
  font-family: Arial, sans-serif;
  font-size: 12.5px;
}