tailwind布局实现方形流行卡效果代码
代码语言:html
所属分类:布局界面
代码描述:tailwind布局实现方形流行卡效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.1.js"></script> </head> <body translate="no"> <div class="md:h-screen sm:py-28 flex justify-center items-center flex-col md:flex-row gap-4 bg-pink-50"> <div class="overflow-hidden shadow-md rounded bg-white p-4"> <div class="border-4 border-slate-800"> <!-- Row 1 --> <div class="flex flex-row min-w-64"> <div class="flex h-20 w-20 bg-cyan-200 border-0 border-r-4 border-slate-800"> </div> <div class="flex-1 bg-pink-200"> </div> </div> <!-- Row 2 --> <div class="flex"> <div class="flex min-h-14 w-14 bg-green-200 border-0 border-t-4 border-slate-800"> </div> <div class="flex-1 bg-white border-4 border-slate-800 min-h-32"> <div class="flex items-center h-full font-extrabold text-2xl p-4 justify-center text-center"> We are <br/> squared </div> </div> <div class="flex w-14 bg-pink-200"> </div> </div> <!-- Row 2 --> <div class="flex"> <div class="flex h-16 w-32 bg-green-200 justify-end border-0 border-r-4 border-slate-800"> <div class="h-10 w-10 bg-yellow-200 border-t-0 border-r-0 border-4 border-slate-800"> </div> </div> <div class="flex-1 bg-pink-200"> <div class="w-24 min-h-8 bg-white -mt-1 border-l-0 border-4 border-slate-800"> &l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0