源代码:
下载代码
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="flex justify-center items-end space-x-4 font-mono font-bold text-xs text-center text-white"> <div class="w-8 bg-blue-500 rounded-lg shadow-lg h-96 relative"> <div class="absolute w-8 bottom-6"> <div class="-rotate-90">h-96</div> </div> </div> <div class="w-8 bg-blue-500 rounded-lg shadow-lg h-80 relative"> <div class="absolute w-8 bottom-6"> <div class="-rotate-90">h-80</div> </div> </div> <div class="w-8 bg-blue-500 rounded-lg shadow-lg h-64 relative"> <div class="absolute w-8 bottom-6"> <div class="-rotate-90">h-64</div> </div> </div> <div class="w-8 bg-blue-500 rounded-lg shadow-lg h-48 relative"> <div class="absolute w-8 bottom-6"> <div class="-rotate-90">h-48</div> </div> </div> <div class="w-8 bg-blue-500 rounded-lg shadow-lg h-40 relative"> <div class="absolute w-8 bottom-6"> <div class="-rotate-90">h-40</div> </div> </div> <div class="w-8 bg-blue-500 rounded-lg shadow-lg h-32 relative"> <div class="absolute w-8 bottom-6"> <div class="-rotate-90">h-32</div> </div> </div> <div class="w-8 bg-blue-500 rounded-lg shadow-lg h-24 relative"> <div class="absolute w-8 bottom-6"> <div class="-rotate-90">h-24</div> </div> </div> </div> </div> </body> </html>
运行结果: