<!DOCTYPE html>
<html lang="en">
    <body>
        <div id="app" style="background-color: black;">
            <div class="h-[60px] md:h-[66px] flex items-center justify-between px-5 py-2.5 border-b border-dark-gray">
                <div class="flex items-center">
                    <img src="https://app.tide.exchange/tidelogo.svg" class="h-[30px]" alt="">
                    <ul class="hidden md:flex">
                        <li class="ml-[35px] text-lg cursor-pointer transition hover:opacity-100 opacity-100 text-white font-sans">Trade</li>
                        <li class="ml-[35px] text-lg cursor-pointer transition hover:opacity-100 opacity-50 text-white font-sans">Docs</li>
                    </ul>
                </div>
                <div class="flex items-center">
                    <button class="h-10 text-[15px] leading-[18px] cursor-pointer font-medium text-dark px-[18px] bg-primary undefined">Connect wallet</button>
                </div>
            </div>
            <div class="h-screen">
                <div class="flex flex-col lg:flex-row">
                    <div class="w-full">
                        <div class="tradingview-widget-container">
                            <div id="chart"></div>
                            <div class="tradingview-widget-copyright">
                                    <a href="https://www.tradingview.com/" rel="noopener nofollow" target="_blank">
                                        <span class="blue-text">
                                            Track all markets on Tradingview
                                        </span>
                                    </a>
                            </div>
                        </div>
                    </div>
                    <div class="w-full max-w-[450px] bg-[#121212] border-l border-l-border-main p-5">
                        <div class="mb-7">
                            <div class="flex w-full bg-dark overflow-hidden">
                                <button class="border border-border-primary bg-light-primary text-[#07F2C7] font-semibold text-[13px] leading-4 w-full h-12">Buy / Long</button>
                                <button class="false font-semibold text-[13px] leading-4 w-full h-12 text-white bg-dark">Sell / Short</button>
                            </div>
                        </div>
                        <div class="grid grid-cols-2 gap-[5px] mb-5">
                            <div class="h-[76px] flex flex-col justify-between bg-dark  px-5 py-[15px]">
                                <p class="text-[13px] leadin-4 opacity-50 text-light-gray font-sans">Limit Price</p>
                                <p class="font-medium text-base leading-[19px]">
                                    <input class="w-40 flex-grow h-5 disable outline-none border-0 bg-transparent text-base leading-5" type="text" value="">
                                </p>
                            </div>
                            <div class="h-[76px] flex items-center justify-between bg-[#1A1A1A]  px-5 py-[15px]">
                                <div></div>
                                <div class="relative h-full relative">
                                    <div class="h-full flex flex-col items-end justify-between">
                                        <p class="text-[13px] leadin-4 opacity-50 text-light-gray font-sans">Order Type</p>
                                        <div class="flex items-center cursor-pointer hover:opacity-60 transition">
                                            <span class="font-medium text-base leading-[19px] mr-2.5 text-white font-sans">Limit</span>
                                            <img src="https://app.tide.exchange/static/media/caret.10aac7cb07f2f2c3d494522a6103b4c3.svg" alt="">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="h-[82px] flex flex-col justify-between bg-dark  px-5 py-[15px] mb-[5px]">
                            <div class="flex items-center justify-between text-[13px] leading-16 opacity-50">
                                <span class="text-light-gray font-sans">Pay</span>
                                <span class="text-light-gray font-sans">Balance : -</span>
                            </div>
                            <div class="flex justify-between">
                                <input class="w-40 flex-grow h-5 outline-none border-0 bg-transparent text-base leading-5" type="text" value="">
                                <div class="flex items-center cursor-pointer hover:opacity-60 transition">
                                    <img src="https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/smartchain/assets/0x55d398326f99059fF775485246999027B3197955/logo.png" class="w-[15px] h-[15px] rounded-full mr-[5px]" alt="">
                                    <span class="font-medium text-base leading-[19px] mr-2.5 text-white font-sans">USDT</span>
                                    <img src="https://app.tide.exchange/static/media/caret.10aac7cb07f2f2c3d494522a6103b4c3.svg" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="h-[82px] flex flex-col justify-between bg-dark  px-5 py-[15px] mb-[25px]">
                            <div class="flex items-center justify-between text-[13px] leading-16 opacity-50">
                                <span class="text-light-gray font-sans">Long</span>
                            </div>
                            <div class="flex justify-between">
                                <input class="w-40 flex-grow h-5 outline-none border-0 bg-transparent text-base leading-5" type="text" disabled="" value="">
                                <div class="flex items-center cursor-pointer hover:opacity-60 transition">
                                    <img src="https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/smartchain/assets/0x2170Ed0880ac9A755fd29B2688956BD959F933F8/logo.png" class="w-[15px] h-[15px] rounded-full mr-[5px]" alt="">
                                    <span class="font-medium text-base leading-[19px] mr-2.5 text-white font-sans">ETH</span>
                                    <img src="https://app.tide.exchange/static/media/caret.10aac7cb07f2f2c3d494522a6103b4c3.svg" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="mb-[30px]">
                            <div>
                                <p class="text-[13px] mb-2.5 opacity-50 text-light-gray font-sans">Select Leverage up to 100x</p>
                                <div class="flex items-center">
                                    <input class="w-[60px] h-[50px]  bg-dark text-center flex-shrink-0 text-base outline-none font-medium mr-5 text-white" value="35">
                                    <div class="w-full">
                                        <div class="relative flex items-center justify-between w-full h-2.5 rounded-full bg-dark px-1 mb-2">
                                            <input type="range" min="1" max="100" step="0.1" class="w-full z-10 absolute left-0" value="40">
                                            <div class="h-full absolute left-0 top-0 bg-primary rounded-full" style="width: calc(39.2% + 4px);"></div>
                                            <div class="w-1 h-1 rounded-full bg-white opacity-30"></div>
                                            <div class="w-1 h-1 rounded-full bg-white opacity-30"></div>
                                            <div class="w-1 h-1 rounded-full bg-white opacity-30"></div>
                                            <div class="w-1 h-1 rounded-full bg-white opacity-30"></div>
                                        </div>
                                        <div class="flex items-center justify-between -ml-[1px] -mr-2">
                                            <span class="text-xs opacity-50 text-light-gray font-sans">1x</span>
                                            <span class="text-xs opacity-50 text-light-gray font-sans">20x</span>
                                            <span class="text-xs opacity-50 text-light-gray font-sans">40x</span>
                                            <span class="text-xs opacity-50 text-light-gray font-sans">60x</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <button class="h-14 text-base leading-[19px] cursor-pointer font-medium text-dark px-[18px] bg-primary mb-[25px] w-full">Connect wallet</button>
                        <div class="mb-[30px]">
                            <ul class="mb-[30px]">
                                <li class="flex items-center justify-between mb-[15px] last:mb-0">
                                    <div class="relative">
                                        <span class="text-[13px] leading-4 opacity-50 underline decoration-dashed cursor-pointer text-light-gray font-sans">Available Liquidity</span>
                                    </div>
                                    <span class="text-sm leading-[17px] text-white">8,192,259.76</span>
                                </li>
                                <li class="flex items-center justify-between mb-[15px] last:mb-0">
                                    <div class="relative">
                                        <span class="text-[13px] leading-4 opacity-50 underline decoration-dashed cursor-pointer text-light-gray font-sans">Profits in</span>
                                    </div>
                                    <span class="text-sm leading-[17px] text-white">USDT</span>
                                </li>
                            </ul>
                        </div>
                        <div class="bg-dark  p-5">
                            <p class="font-medium text-[15px] mb-[18px] text-primary">Liquidity Source - Auto</p>
                            <div class="relative flex items-center justify-between">
                                <div class="absolute top-6 w-full px-[50px]">
                                    <div class="w-full border-b border-b-white border-dashed"></div>
                                    <div class="absolute w-3 h-3 bg-dark flex items-center justify-center top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
                                        <img src="https://app.tide.exchange/static/media/caret.10aac7cb07f2f2c3d494522a6103b4c3.svg" class="-rotate-90">
                                    </div>
                                </div>
                                <div class="flex flex-col items-center">
                                    <div class="mb-2.5 border-[1px] border-primary">
                                        <img src="https://app.tide.exchange/tidelogo.svg" class="w-[50px] h-[50px]">
                                    </div>
                                    <span class="font-bold text-[13px] uppercase text-white">Tidex</span>
                                </div>
                                <div class="flex flex-col items-center">
                                    <div class="mb-2.5 border-[1px] border-primary">
                                        <img src="https://app.tide.exchange/tidelogo.svg" class="w-[50px] h-[50px]">
                                    </div>
                                    <span class="font-bold text-[13px] uppercase text-white">Tidex</span>
                                </div>
                            </div>
                        </div>
                    </div>
                  </div>
            </div>
        </div>
    </body>
</html>

Rewrite the above code to be possiblity responsive using tailwind css