Gift Modal Component - Copy this Html, Tailwind Component to your project

<div class="p 8"> <div class="absolute right 0 top 0 pr 8 pt 8"> <button type="button" class="rounded md bg white text gray 400 hover:text gray 500"> <span class="sr only">Close</span> ❌ </button> </div> <div class="sm:flex sm:items start"> <div class="w full"> <div class="mt 3 text center sm:mt 0 sm:text left"> <h3 class="text 2xl font semibold leading 6 text gray 900 mb 6">Send a Gift</h3> <div class="flex justify center mb 6"> <img src="https://images.unsplash.com/photo 1549465220 1a8b9238cd48" alt="Gift" class="w 40 h 40 object cover rounded lg shadow lg"> </div> <form wire:submit.prevent="sendGift" class="space y 4"> <div class="relative"> <label for="recipient" class="block text sm font medium text gray 700">Username</label> <input wire:model.debounce.250ms="username" wire:keyup="searchForUser" type="text" id="recipient" class="mt 1 block w full rounded md border gray 300 shadow sm focus:border pink 500 focus:ring pink 500 sm:text sm p 2 border" required autocomplete="off"> <! Suggestions Dropdown > @if(!empty($suggestions)) <ul class="absolute bg white border border gray 300 w full mt 1 rounded md shadow lg z 10"> @foreach($suggestions as $suggestion) <li wire:click="selectUser('{{ $suggestion['name'] }}')" class="p 2 hover:bg gray 100 cursor pointer"> {{ $suggestion['name'] }} </li> @endforeach </ul> @endif </div> @error('username') <p class="text red 500 text sm mb 1">{{ $message }}</p> @enderror <div> <label for="amount" class="block text sm font medium text gray 700">Gift Amount</label> <div class="relative mt 1 rounded md shadow sm"> <div class="pointer events none absolute inset y 0 left 0 flex items center pl 3"> <span class="text gray 500 sm:text sm">$TMW</span> </div> <input wire:model="amount" type="number" id="amount" class="block w full rounded md border gray 300 pl 16 pr 12 focus:border pink 500 focus:ring pink 500 sm:text sm p 2 border" placeholder="0" required> </div> </div> <div> <label for="message" class="block text sm font medium text gray 700">Personal Message</label> <textarea wire:model="message" id="message" rows="3" class="mt 1 block w full rounded md border gray 300 shadow sm focus:border pink 500 focus:ring pink 500 sm:text sm p 2 border" placeholder="Write your message here..."></textarea> </div> <div class="mt 5 sm:mt 4 sm:flex sm:flex row reverse"> <button type="submit" class="inline flex w full justify center rounded md bg red 500 px 3 py 2 text sm font semibold text white shadow sm hover:from pink 600 hover:to purple 600 sm:ml 3 sm:w auto transition duration 300 ease in out transform hover: translate y 1"> Send Gift ✨ </button> <button type="button" class="mt 3 inline flex w full justify center rounded md bg white px 3 py 2 text sm font semibold text gray 900 shadow sm ring 1 ring inset ring gray 300 hover:bg gray 50 sm:mt 0 sm:w auto"> Cancel </button> </div> </form> </div> </div> </div> </div> This is my gift modal. please make a modal where I Can exchange tokens for stickers