tailwind实现自适应水平树状列表布局效果代码-html代码-BFW代码库

tailwind实现自适应水平树状列表布局效果代码

代码语言：html

所属分类：响应式

代码描述：tailwind实现自适应水平树状列表布局效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" class="bg-neutral-900">

<head>
  <meta charset="UTF-8">

  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwind.3.2.4.js"></script>

  
</head>

<body >
  <div class="grid h-screen text-white">
  <div class="m-auto flex max-w-screen-xl flex-col items-center gap-6 p-6 lg:flex-row lg:gap-0">

    <div class="relative flex w-full flex-1 items-center lg:basis-[400px] lg:text-right">
      <div class="flex-1 lg:pr-6">
        <h2 class="text-4xl font-bold">Horizontal Tree List with Tailwind CSS</h2>
      </div>
      <div class="top-1/2 mt-px hidden h-px w-16 bg-green-500 lg:block"></div>
    </div>

    <ul class="lg:basis-[750px]">
      <li class="group relative py-6">
        <div class="absolute inset-0 hidden w-px bg-green-500 group-first:top-1/2 group-last:bottom-1/2 lg:block"></div>
        <div class="items-center gap-6 lg:flex">
          <div class="relative mb-4 lg:mb-0 lg:pl-16">
            <div class="absolute left-0 top-1/2 hidden h-px w-full bg-green-500 lg:block"></div>
            <div class="relative grid h-24 w-24 rounded-full border border-solid border-green-500 bg-neutral-900">
              <svg class="m-auto block h-full max-h-12 w-full" fill="none" height="15" width="15" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
                <path clip-rule="evenodd" d="M6.0068 13.4178L8.0068 1.4178L8.9932 1.5822L6.9932 13.5822L6.0068 13.4178ZM5.20711 4.5L2.20711 7.5L5.20711 10.5L4.5 11.2071L0.792892 7.5L4.5 3.79289L5.20711 4.5ZM10.5 3.79289L14.2071 7.5L10.5 11.2071L9.79289 10.5L12.7929 7.5L9.79289 4.5L10.5 3.79289Z" fill="white" fill-rule="evenodd" />
              </svg>
            </div>
          </div>

          <div>
            <h3 class="mb-2 text-xl font-bold">A heading in euismod dolor</h3>
            <p class="opacity-75">Lorem ipsum dolor sit amet consectetur. Consequat sollicitudin in euismod dolor, nec sodales viverra.</p>
          </div>
        </div>
      </li>
      <li class="group relative py-6">
        <div class="absolute inset-0 hidden w-px bg-green-500 group-first:top-1/2 group-last:bottom-1/2 lg:block"></div>
        <div class="items-center gap-6 lg:flex">
          <div class="relative mb-4 lg:mb-0 lg:pl-16">
            <div class="absolute left-.........完整代码请登录后点击上方下载按钮下载查看