Crypto Exchange Interface - Copy this Html, Tailwind Component to your project
Puedes-mejorar-mi-codigo:-<!DOCTYPE-html>-<html-lang="en">-<head>-<meta-charset="UTF-8">-<meta-name="viewport"-content="width=device-width,-initial-scale=1.0">-<title>Crypto-Exchange-Interface</title>-<link-href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"-rel="stylesheet">-<link-rel="stylesheet"-href="index.css">-</head>-<body-class="bg-gray-900-min-h-screen">-<div-class="container-mx-auto-px-4-py-8">-<div-class="max-w-2xl-mx-auto-bg-gray-800-rounded-2xl-shadow-xl-p-6">-<header-class="flex-items-center-justify-between-mb-8">-<div-class="flex-items-center-space-x-3">-<img-src="https://images.unsplash.com/photo-1622630998477-20aa696ecb05"-alt="Crypto-Logo"-class="w-10-h-10-rounded-full">-<h1-class="text-2xl-font-bold-text-white">Atlas-Converser</h1>-</div>-</header>-<div-class="space-y-4">-<div-class="bg-gray-700-p-4-rounded-xl">-<div-class="flex-justify-between-items-center-mb-2">-<label-class="text-gray-300">From</label>-</div>-<div-class="flex-items-center-space-x-4-relative">-<div-class="relative">-<button-onclick="document.getElementById('dropdown1').classList.toggle('hidden')"-aria-label="Select-Token"-class="flex-items-center-space-x-2-bg-gray-600-hover:bg-gray-500-rounded-lg-px-4-py-2-transition-colors-duration-200">-<img-src="https://assets.coingecko.com/coins/images/279/small/ethereum.png"-alt="ETH"-class="w-6-h-6-rounded-full">-<span-class="text-white-font-medium">Select</span>-<svg-class="w-4-h-4-text-gray-400"-fill="none"-stroke="currentColor"-viewBox="0-0-24-24">-<path-stroke-linecap="round"-stroke-linejoin="round"-stroke-width="2"-d="M19-9l-7-7-7-7"></path>-</svg>-</button>-<div-id="dropdown1"-class="hidden-absolute-mt-2-w-48-bg-gray-700-rounded-lg-shadow-lg-z-10">-<div-class="p-2-space-y-2">-<button-class="flex-items-center-space-x-2-w-full-p-2-hover:bg-gray-600-rounded-lg">-<img-src="https://assets.coingecko.com/coins/images/13005/small/ronin.jpg"-alt="Ronin"-class="w-6-h-6-rounded-full">-<span-class="text-white">Ronin</span>-</button>-<button-class="flex-items-center-space-x-2-w-full-p-2-hover:bg-gray-600-rounded-lg">-<img-src="https://assets.coingecko.com/coins/images/5/small/dogecoin.png"-alt="Doge"-class="w-6-h-6-rounded-full">-<span-class="text-white">Doge</span>-</button>-<button-class="flex-items-center-space-x-2-w-full-p-2-hover:bg-gray-600-rounded-lg">-<img-src="https://assets.coingecko.com/coins/images/6319/small/USD_Coin_icon.png"-alt="USDC"-class="w-6-h-6-rounded-full">-<span-class="text-white">USDC</span>-</button>-<button-class="flex-items-center-space-x-2-w-full-p-2-hover:bg-gray-600-rounded-lg">-<img-src="https://assets.coingecko.com/coins/images/279/small/ethereum.png"-alt="Ethereum"-class="w-6-h-6-rounded-full">-<span-class="text-white">Ethereum</span>-</button>-<button-class="flex-items-center-space-x-2-w-full-p-2-hover:bg-gray-600-rounded-lg">-<img-src="https://assets.coingecko.com/coins/images/4128/small/solana.png"-alt="Solana"-class="w-6-h-6-rounded-full">-<span-class="text-white">Solana</span>-</button>-</div>-</div>-</div>-<input-type="number"-placeholder="0.0"-class="w-full-bg-transparent-text-white-text-2xl-focus:outline-none"-aria-label="Amount-Input">-</div>-</div>-<button-aria-label="Swap-Direction"-class="mx-auto-block-p-2-rounded-full-bg-gray-700-hover:bg-gray-600-transition-colors-duration-200">-<svg-class="w-6-h-6-text-white"-fill="none"-stroke="currentColor"-viewBox="0-0-24-24">-<path-stroke-linecap="round"-stroke-linejoin="round"-stroke-width="2"-d="M7-16V4m0-0L3-8m4-4l4-4m6-0v12m0-0l4-4m-4-4l-4-4"></path>-</svg>-</button>-<div-class="bg-gray-700-p-4-rounded-xl">-<div-class="flex-justify-between-items-center-mb-2">-<label-class="text-gray-300">To</label>-</div>-<div-class="flex-items-center-space-x-4-relative">-<div-class="relative">-<button-onclick="document.getElementById('dropdown2').classList.toggle('hidden')"-aria-label="Select-Token"-class="flex-items-center-space-x-2-bg-gray-600-hover:bg-gray-500-rounded-lg-px-4-py-2-transition-colors-duration-200">-<img-src="https://assets.coingecko.com/coins/images/325/small/Tether.png"-alt="Select"-class="w-6-h-6-rounded-full">-<span-class="text-white-font-medium">Select</span>-<svg-class="w-4-h-4-text-gray-400"-fill="none"-stroke="currentColor"-viewBox="0-0-24-24">-<path-stroke-linecap="round"-stroke-linejoin="round"-stroke-width="2"-d="M19-9l-7-7-7-7"></path>-</svg>-</button>-<div-id="dropdown2"-class="hidden-absolute-mt-2-w-48-bg-gray-700-rounded-lg-shadow-lg-z-10">-<div-class="p-2-space-y-2">-<button-class="flex-items-center-space-x-2-w-full-p-2-hover:bg-gray-600-rounded-lg">-<img-src="https://assets.coingecko.com/coins/images/13005/small/ronin.jpg"-alt="Ronin"-class="w-6-h-6-rounded-full">-<span-class="text-white">Ronin</span>-</button>-<button-class="flex-items-center-space-x-2-w-full-p-2-hover:bg-gray-600-rounded-lg">-<img-src="https://assets.coingecko.com/coins/images/5/small/dogecoin.png"-alt="Doge"-class="w-6-h-6-rounded-full">-<span-class="text-white">Doge</span>-</button>-<button-class="flex-items-center-space-x-2-w-full-p-2-hover:bg-gray-600-rounded-lg">-<img-src="https://assets.coingecko.com/coins/images/6319/small/USD_Coin_icon.png"-alt="USDC"-class="w-6-h-6-rounded-full">-<span-class="text-white">USDC</span>-</button>-<button-class="flex-items-center-space-x-2-w-full-p-2-hover:bg-gray-600-rounded-lg">-<img-src="https://assets.coingecko.com/coins/images/279/small/ethereum.png"-alt="Ethereum"-class="w-6-h-6-rounded-full">-<span-class="text-white">Ethereum</span>-</button>-<button-class="flex-items-center-space-x-2-w-full-p-2-hover:bg-gray-600-rounded-lg">-<img-src="https://assets.coingecko.com/coins/images/4128/small/solana.png"-alt="Solana"-class="w-6-h-6-rounded-full">-<span-class="text-white">Solana</span>-</button>-</div>-</div>-</div>-<input-type="number"-placeholder="0.0"-class="w-full-bg-transparent-text-white-text-2xl-focus:outline-none"-aria-label="Amount-Output">-</div>-</div>-</div>-</div>-</div>-</body>-</html>
