Arabic a I Interface - Copy this Html, Tailwind Component to your project

Improve it and make everything arabic. <div class="relative w full h [700px] bg white border 4 border primary 300 rounded lg overflow hidden"> <div class="container mx auto px 6 lg:px 8" dir="rtl"> <div class="p 2 xl:p 10 overflow y auto h [calc(100% 64px)]"> <div class="p 2 rounded t full"> <h1 class="text 5xl">اليمامة AI</h1> <p class="pt 4">Ask our AI anything you want about Al Yamamah, Events, News, and Announcements</p> </div> <div class="messages list"> <! AI Message > <div class="flex items start gap 2.5 pt 8"> <div class="flex flex col w full max w [320px] leading 1.5 p 4 border gray 200 bg gray 100 rounded e xl rounded es xl"> <div class="flex items center space x 2 rtl:space x reverse"> <span class="text sm font bold text gray 900 ">اليمامة AI</span> </div> <p class="text sm font normal text gray 900 "> كيف تبيني اساعدك؟ اسالني عن مواعيد, اخبار او حتى اتجاهات. انا بالخدمة </p> </div> </div> <! User Message > </div> <form class="message form"> {%csrf_token%} <div class="input group"> <label for="large input" class="block mb 2 text sm font medium text gray 900 "> سوالك </label> <input type="text" id="large input" class="form control message input block w full p 4 text gray 900 border border gray 300 rounded lg bg gray 50 text base focus:ring blue 500 focus:border blue 500"> <div class="input group append"> <button type="submit" class="btn btn primary btn send">Send</button> </div> </div> </form> </div> </div> </div>