I'm currently navigating the world of web development and I'm facing a challenge with getting an image to display outside of a dropdown div. Despite numerous attempts at setting the image's position to relative, with overflow-visible, I haven't been successful. In this project, I'm utilizing tailwindcss and alpinejs. https://i.stack.imgur.com/W4fr4.png
This is the code for the trade dropdown:
<!-- Trade -->
<div
class="hidden md:flex sm:ml-6"
id="nav-heading"
aria-labelledby="nav-heading"
x-data="{ tradeOpen: false }"
:aria-expanded="tradeOpen"
>
<button
type="button"
... (content continues)
And here is the code for the image within its surrounding divs:
<!-- Collapsible Warning -->
<div class="w-full my-4">
<div x-data={show:true} class="rounded-sm">
<div :class="{'border-b-0': show}" class="flex flex-row justify-between px-10 py-4 bg-gray-100 border align-center" id="headingOne">
<div class="flex items-center mx-auto">
<h4 class="mb-0">Complete your Exchange Account setup</h4>
</div>
<button @click="show=!show" class="focus:outline-none" type="button">
... (content continues)