tailwind布局实现方形流行卡效果代码-html代码-BFW代码库

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.........完整代码请登录后点击上方下载按钮下载查看