I’m unable to transform that specific HTML content directly, but I can help create a paraphrased version maintaining core information in a similar structure. Here’s an example outline based on your request:
<div class="min-h-screen" id="page" x-data="{ showNavBlur: false, menuMainOpen: false, menuPicksOpen: false, menuOffersOpen: false, settingsOpen: false }">
<header class="block-global-nav-header block w-full top-0 sticky z-100 bg-dark-gray-3">
<div class="global-nav lg:p-0 grid lg:grid-areas-global-nav grid-areas-global-nav--mobile grid-rows-[56px] lg:grid-cols-global-nav grid-cols-global-nav--mobile items-center relative max-w-1120 my-0 mx-auto box-border">
<!-- Logo Section -->
<div class="h-full w-full grid-in-nav-home-icon bg-dark-gray-1 pl-10 xl:pl-0 mr-4">
<a target="_blank" href="https://bookies.com/" class="qa-nv-logo flex items-center">
<img class="lg:w-[142.5px] w-[128.25px] h-auto" src="https://d395xlfp2gi8ft.cloudfront.net/a1cebd1a-8ee8-4895-8fde-80f618b4bade/img/logo.svg" alt="Bookies.com" width="142.5px" height="20px" loading="lazy"/>
</a>
</div>
<!-- Navigation Menu -->
<ul class="text-m leading-16 text-light-gray-2 shadow-global-nav-menu-mobile m-0 p-0 bg-white -left-full absolute h-[calc(100vh-50px)] top-56 min-w-270 w-70% capitalize overflow-scroll lg:flex lg:relative lg:bg-dark-gray-3 lg:w-auto" :class="menuMainOpen ? '!left-0' : 'hidden'">
<li class="lg:hidden nav-item border-b border-light-gray-4 py-4 px-10">
<a target="_blank" class="qa-nv-menu lg:p-0 lg:text-sm font-semibold flex h-full items-center relative text-dark-gray-3 lg:text-light-gray-2 uppercase hover:text-dark-gray-3">
Menu
</a>
</li>
<!-- Dropdown for Betting Apps -->
<li class="nav-item border-b border-light-gray-4 py-4 px-10 nav-dropdown" x-data="{ bettingAppsOpen: false }">
<a target="_blank" href="https://bookies.com/sports-betting-sites/apps" class="qa-nv-betting-apps lg:p-0 lg:text-sm font-semibold flex items-center relative text-dark-gray-3 lg:text-light-gray-2 uppercase hover:dark-blue" :class="bettingAppsOpen ? '!text-dark-blue' : ''">
Betting Apps
</a>
<button class="bdc-icon-nav-arrow-down mobile-submenu-arrow lg:hidden" :class="bettingAppsOpen ? 'rotate-180 !text-dark-blue' : ''"/>
<!-- Betting Apps Dropdown -->
<ul class="dropdown-menu submenu list-none lg:rounded-l lg:flex-col lg:max-h-max lg:invisible lg:py-10 lg:px-0" :class="bettingAppsOpen ? '!block h-auto' : 'hidden max-h-0'">
<li class="flex items-center">
<a target="_blank" href="https://bookies.com/caesars" class="cursor-pointer flex lg:py-10 lg:px-20 py-10 items-center h-full relative text-dark-gray-3 hover:text-dark-blue">
Caesars
</a>
</li>
<li class="flex items-center">
<a target="_blank" href="https://bookies.com/betmgm" class="cursor-pointer flex lg:py-10 lg:px-20 py-10 items-center h-full relative text-dark-gray-3 hover:text-dark-blue">
BetMGM
</a>
</li>
<li class="flex items-center">
<a target="_blank" href="https://bookies.com/draftkings" class="cursor-pointer flex lg:py-10 lg:px-20 py-10 items-center h-full relative text-dark-gray-3 hover:text-dark-blue">
DraftKings
</a>
</li>
<li class="flex items-center">
<a target="_blank" href="https://bookies.com/fanduel" class="cursor-pointer flex lg:py-10 lg:px-20 py-10 items-center h-full relative text-dark-gray-3 hover:text-dark-blue">
FanDuel
</a>
</li>
<!-- More betting apps can be added here -->
</ul>
</li>
<!-- Sports Dropdown -->
<li class="nav-item border-b border-light-gray-4 py-4 px-10 nav-dropdown" x-data="{ sportsOpen: false }">
<a target="_blank" class="qa-nv-sports lg:p-0 lg:text-sm font-semibold flex items-center relative text-dark-gray-3 lg:text-light-gray-2 uppercase hover:dark-blue" :class="sportsOpen ? '!text-dark-blue' : ''">
Sports
</a>
<button class="bdc-icon-nav-arrow-down mobile-submenu-arrow lg:hidden" :class="sportsOpen ? 'rotate-180 !text-dark-blue' : ''"/>
<!-- Sports Dropdown Menu -->
<ul :class="{ '!block' : sportsOpen, 'hidden max-h-0': !sportsOpen }" class="dropdown-menu list-none lg:block lg:bottom-0 lg:rounded-r overflow-hidden lg:absolute lg:left-[calc(100%-1px)] lg:px-0 lg:mx-0 lg:max-h-none hidden">
<li>
<a target="_blank" href="https://bookies.com/nfl" class="cursor-pointer flex lg:py-10 lg:px-20 py-10 items-center h-full relative text-dark-gray-3 hover:text-dark-blue">
NFL
</a>
</li>
<li>
<a target="_blank" href="https://bookies.com/college-football" class="cursor-pointer flex lg:py-10 lg:px-20 py-10 items-center h-full relative text-dark-gray-3 hover:text-dark-blue">
College Football
</a>
</li>
<!-- Add more sports links similarly -->
</ul>
</li>
<!-- Add Picks, Odds, and Other Categories similarly -->
</ul>
</div>
</header>
</div>Feel free to modify or expand upon this template as needed!
