JSFiddle - React, Tailwind, and code Playground
by Kofod
HTML
<div class="wordSearchLayout" style="position: relative; width: 688px; height: 500px; background: url(https://i.imgur.com/phrbCBC.png); display: flex; justify-content: center; opacity: 0;">
<div class="wordSearchContainer">
<div class="wordSearch">
<!-- Row 1 -->
<div class="wordBox"></div>
<div class="wordBox"></div>
<div class="wordBox"></div>
<div class="wordBox"></div>
<div class="wordBox">V</div>
<div class="wordBox">A</div>
<div class="wordBox">L</div>
<div class="wordBox">E</div>
<div class="wordBox">N</div>
<div class="wordBox">T</div>
<div class="wordBox">I</div>
<div class="wordBox">N</div>
<div class="wordBox">E</div>
<div class="wordBox"></div>
<div class="wordBox">D</div>
<div class="wordBox"></div>
<!-- Row 2 -->
<div class="wordBox"></div>
<div class="wordBox"></div>
<div class="wordBox"></div>
<div class="wordBox">C</div>
<div class="wordBox">H</div>
<div class="wordBox">O</div>
<div class="wordBox">C</div>
<div class="wordBox">O</div>
<div class="wordBox">L</div>
<div class="wordBox">A</div>
<div class="wordBox">T</div>
<div class="wordBox">E</div>
<div class="wordBox"></div>
<div class="wordBox"></div>
<div class="wordBox">A</div>
<div class="wordBox"></div>
<!-- Row 3 -->
<div class="wordBox"></div>
<div class="wordBox">B</div>
<div class="wordBox"></div>
<div class="wordBox"></div>
<div class="wordBox"></div>
<div class="wordBox"></div>
<div class="wordBox">R</div>
<div class="wordBox">O</div>
<div class="wordBox">M</div>
<div class="wordBox">A</div>
<div class="wordBox">N</div>
<div class="wordBox">C</div>
<div class="wordBox">E</div>
<div class="wordBox"></div>
<div class="wordBox">T</div>
<div class="wordBox"></div>
<!-- Row 4 -->
<div class="wordBox"></div>
<div class="wordBox"></div>
<div class="wordBox">O</div>
<div class="wordBox"></div>
<div...