源代码：
下载代码
AI 编程工具
点击运行
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.tailwindcss.com"></script> </head> <body> <div class="relative rounded-xl overflow-auto p-8"><div class="space-y-4 font-mono font-bold text-xs text-white"> <div class="flex space-x-4"> <div class="w-1/2 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1/2</div> <div class="w-1/2 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1/2</div> </div> <div class="flex space-x-4"> <div class="w-2/5 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-2/5</div> <div class="w-3/5 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-3/5</div> </div> <div class="flex space-x-4"> <div class="w-1/3 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1/3</div> <div class="w-2/3 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-2/3</div> </div> <div class="space-x-4 hidden sm:flex"> <div class="w-1/4 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1/4</div> <div class="w-3/4 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-3/4</div> </div> <div class="space-x-4 hidden sm:flex"> <div class="w-1/5 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1/5</div> <div class="w-4/5 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-4/5</div> </div> <div class="space-x-4 hidden sm:flex"> <div class="w-1/6 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-1/6</div> <div class="w-5/6 px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center">w-5/6</div> </div> <div class="w-full px-4 py-2 bg-violet-500 rounded-lg shadow-lg text-center text-white font-mono">w-full</div> </div> </div> </body> </html>
运行结果：
AI 编程工具