crates/oxide/src/fixtures/example.html - main - githubmirror/tailwindcss

crates/oxide/src/fixtures/example.html
552 строки27 KB
Robin Malfait
Improve Oxide candidate extractor [0] (#16306)
05 мар 2025, 13:55
05 мар 2025, 13:55b3c2556
<div class="font-semibold px-3 text-left text-gray-900 py-3.5 text-sm">
  <nav class="font-medium text-gray-900">
    <ul class="h-7 justify-center rounded-full items-center w-7 flex mx-auto">
      <li class="h-0.5 inset-x-0 absolute bottom-0">
        <a href="#" target="_blank" class="space-y-1 px-2 mt-3">
          This is link 4132f37a-a03f-4776-9a8e-1b70ff626f71
        </a>
        <img
          class="text-gray-900 font-medium text-sm ml-3.5"
          alt="Profile picture of user 40faf8f0-6221-4ec4-a65e-fe22e1d9abd2"
          src="https://example.org/pictures/4f7d7f80-e9cd-447a-9b35-f9d93befe025"
        />
      </li>
      <li class="text-indigo-700 order-1 font-semibold">
        <ol class="h-24 sm:w-32 w-24 object-center rounded-md sm:h-32 object-cover">
          <li class="lg:justify-center lg:gap-x-12 hidden lg:flex lg:min-w-0 lg:flex-1">
            <img
              class="hover:bg-gray-100 bg-gray-50 py-1.5 focus:z-10 text-gray-400"
              alt="Profile picture of user d27b5a21-1622-4f3a-ba7d-6230fae487c2"
              src="https://example.org/pictures/2a026d06-0e67-467d-babf-8a18614667f2"
            />
            <ul class="w-6 h-6 mr-3 flex-shrink-0">
              <li class="flow-root">
                <img
                  class="bg-white focus:ring-indigo-500 group font-medium items-center inline-flex focus:ring-offset-2 focus:ring-2 focus:outline-none text-base rounded-md hover:text-gray-900"
                  alt="Profile picture of user 0052230e-90d8-4d84-ab64-904b87fe4622"
                  src="https://example.org/pictures/f7ec91ba-17a7-470f-a472-705a8b5a79ce"
                />
              </li>
              <li class="items-center right-0 flex pointer-events-none absolute inset-y-0">
                <img
                  class="ml-3"
                  alt="Profile picture of user a7c51adf-3917-4e41-b5f1-d263768c9adf"
                  src="https://example.org/pictures/a56323a8-8aa3-4d39-8c79-9ee875ecd6f0"
                />
              </li>
            </ul>
            <ul class="hover:bg-opacity-75 hover:bg-indigo-500 text-white">
              <li class="font-medium hover:text-indigo-500 text-indigo-600 text-sm">
                <ul class="sr-only"></ul>
                <ol class="flex-col px-8 flex pt-8"></ol>
                <a href="#" class="items-center sm:items-start flex">
                  This is link 8c59d1ad-9ef0-4a41-ab15-e9fe04d77ae2
                </a>
              </li>
              <li class="rounded-full w-8 h-8">
                <ol class="lg:grid lg:grid-cols-12"></ol>
                <a
                  href="#"
                  target="_blank"
                  rel="noreferrer"
                  class="px-4 border-t py-6 space-y-6 border-gray-200"
                >
                  This is link 4182f198-ff54-45a4-ace9-e6f46a60ec92
                </a>
              </li>
              <li class="border-gray-700 border-t pt-4 pb-3">
                <ol class="font-medium text-gray-900 p-2 block -m-2"></ol>
                <ol
                  class="sm:py-24 to-green-400 lg:px-0 bg-gradient-to-r lg:items-center lg:justify-end sm:px-6 lg:bg-none from-cyan-600 px-4 lg:pl-8 py-16 lg:flex"
                ></ol>
                <img
                  class="lg:gap-24 lg:grid-cols-2 lg:grid lg:mx-auto lg:items-start lg:max-w-7xl lg:px-8"
                  alt="Profile picture of user c44d18a8-a1f1-4bf4-87b0-89f37e34aba1"
                  src="https://example.org/pictures/527dca2c-5afe-4a5c-96cd-706396701c36"
                />
              </li>
              <li class="hover:bg-gray-100 bg-white focus:z-10 text-gray-900 relative py-1.5">
                <a
                  href="#"
                  target="_blank"
                  rel="noreferrer"
                  class="text-sm font-medium text-gray-500"
                >
                  This is link f6db0c8d-6409-4abd-9af1-d3e68ebbd25c
                </a>
                <a href="#" rel="noreferrer" class="text-sm font-medium mt-12">
                  This is link 51c9b242-e449-44d8-9289-1a5d474d5fbb
                </a>
                <ul class="h-12"></ul>
              </li>
              <li class="bg-gray-100">
                <a href="#" rel="noreferrer" class="bg-gray-100">
                  This is link eb479051-0dff-4d8f-9456-bb8b56ab90af
                </a>
                <img
                  class="ml-3 text-gray-900 font-medium text-base"
                  alt="Profile picture of user 17d797ac-aea7-4154-b522-f0ac89762b0b"
                  src="https://example.org/pictures/55e31a5b-2fcb-4b35-832c-fad711717f1a"
                />
                <ul class="font-medium hover:text-gray-700 text-gray-500 ml-4 text-sm"></ul>
              </li>
            </ul>
            <ul class="space-y-6 border-t py-6 border-gray-200 px-4">
              <li class="md:hidden z-40 relative">
                <ol class="h-7 w-7 mx-auto items-center justify-center rounded-full flex"></ol>
                <ol class="items-center flex rounded-full w-7 mx-auto h-7 justify-center"></ol>
                <a
                  href="#"
                  target="_blank"
                  class="sm:py-32 lg:px-8 max-w-7xl mx-auto px-4 py-24 sm:px-6 relative"
                >
                  This is link 5014471c-4f44-4696-a1f6-7817d57827eb
                </a>
                <img
                  class="h-5 group-hover:text-gray-500 w-5 ml-2"
                  alt="Profile picture of user 98731873-0af8-4823-9115-f1333a2cdc2e"
                  src="https://example.org/pictures/12ac8cbf-4540-49ff-a71f-4b0ac684b374"
                />
              </li>
              <li
                class="focus:outline-none font-medium px-4 justify-center text-sm focus:ring-2 border hover:bg-gray-50 focus:ring-offset-2 py-2 border-gray-300 bg-white inline-flex text-gray-700 rounded-md shadow-sm focus:ring-gray-900"
              >
                <img
                  class="bg-white focus:ring-indigo-500 text-base focus:outline-none focus:ring-2 items-center font-medium focus:ring-offset-2 hover:text-gray-900 rounded-md group inline-flex"
                  alt="Profile picture of user 3ae3670d-c729-41d2-adee-691340673aef"
                  src="https://example.org/pictures/5f289b87-efc2-4cc9-9061-21883b0778db"
                />
              </li>
              <li class="text-base text-gray-500 mt-6 font-medium text-center">
                <ol class="text-sm font-medium text-indigo-600 hover:text-indigo-500"></ol>
                <ol class="rounded-md h-6 w-6 inline-block"></ol>
              </li>
              <li class="hidden lg:flex lg:items-center">
                <ol class="border-indigo-600"></ol>
              </li>
            </ul>
          </li>
          <li class="sr-only">
            <img
              class="justify-center py-2 bg-white flex"
              alt="Profile picture of user 89195190-9a42-4826-89ba-e7bc1d677520"
              src="https://example.org/pictures/742d9c44-1c75-461f-b2d0-e52636041966"
            />
            <img
              class="-ml-14 sticky left-0 z-20 text-gray-400 -mt-2.5 leading-5 pr-2 w-14 text-right text-xs"
              alt="Profile picture of user 77a37b14-1c0f-4ef0-85d4-a18755065ea3"
              src="https://example.org/pictures/8ad2e05f-6ea6-4d94-8f82-f8aa59274b9e"
            />
          </li>
        </ol>
        <img
          class="border-t shadow-sm sm:border bg-white sm:rounded-lg border-gray-200 border-b"
          alt="Profile picture of user 07935cf2-78e5-49ba-afdb-09d13c8320d6"
          src="https://example.org/pictures/8f895991-6e8c-4bcb-82c3-11c2a3338eb2"
        />
        <ol class="grid-cols-2 grid gap-x-8 gap-y-10">
          <li
            class="py-1 w-48 shadow-lg bg-white rounded-md ring-1 absolute ring-black z-10 focus:outline-none right-0 mt-2 ring-opacity-5 origin-top-right"
          >
            <ol class="h-6 w-6">
              <li class="bg-gray-500 inset-0 transition-opacity fixed bg-opacity-75">
                <ol class="flex"></ol>
                <a href="#" class="mt-2 flex items-center justify-between">
                  This is link 1a1a3c60-a2ea-4153-acd7-12aa82f03c8d
                </a>
                <a href="#" target="_blank" class="text-gray-300 flex-shrink-0 w-5 h-5">
                  This is link bdaa695c-3fe4-4cab-8d68-dbb338601044
                </a>
              </li>
              <li class="text-gray-500">
                <ol class="py-20"></ol>
                <a href="#" target="_blank" class="text-sm ml-3">
                  This is link 2183c71d-39ec-42d4-8b1e-eeb7e5490050
                </a>
              </li>
              <li class="mt-10">
                <ol class="group"></ol>
                <a href="#" rel="noreferrer" class="bg-gray-50">
                  This is link c49882fd-ab55-41a4-8dac-b96fe2901bce
                </a>
                <ol class="bg-white h-[940px] overflow-y-auto"></ol>
              </li>
              <li class="flex-1 space-y-1">
                <ol class="h-6 w-6"></ol>
              </li>
            </ol>
            <ul class="z-10 flex relative items-center lg:hidden">
              <li class="aspect-w-1 bg-gray-100 rounded-lg overflow-hidden aspect-h-1">
                <img
                  class="overflow-hidden sm:rounded-md bg-white shadow"
                  alt="Profile picture of user 263bb89c-5b54-4247-8c82-fec829b1a895"
                  src="https://example.org/pictures/4c12a5c4-d117-4f81-93e1-47a45626a36e"
                />
                <a href="#" class="sr-only"> This is link fc3885d8-d63f-4455-b056-f113aa3a2f23 </a>
                <ol
                  class="border-t grid-cols-1 border-gray-200 gap-6 border-b mt-6 sm:grid-cols-2 grid py-6"
                ></ol>
              </li>
              <li class="space-x-3 items-center flex">
                <a href="#" class="py-2 bg-white">
                  This is link 1d718cb1-05e3-4d14-b959-92f5fd475ce0
                </a>
                <img
                  class="rounded-md w-full focus:border-indigo-500 border-gray-300 focus:ring-indigo-500 block mt-1 shadow-sm sm:text-sm"
                  alt="Profile picture of user 1c4d6dc3-700a-4167-8ec3-3dc2f73d4ad5"
                  src="https://example.org/pictures/359599b3-5610-482e-bc09-025ac5283170"
                />
                <ul class="max-w-3xl mx-auto divide-y-2 divide-gray-200"></ul>
                <ul class="flex space-x-4"></ul>
              </li>
              <li class="text-gray-500 hover:text-gray-600">
                <ul class="h-96 w-full relative lg:hidden"></ul>
                <ol class="text-gray-500 mt-6 text-sm"></ol>
                <a href="#" class="sm:col-span-6">
                  This is link 51cc68af-1184-4f8c-9efd-d2f855902b0b
                </a>
                <ol
                  class="left-0 inset-y-0 absolute pointer-events-none pl-3 items-center flex"
                ></ol>
              </li>
              <li class="flex-shrink-0">
                <ol
                  class="shadow-lg rounded-lg ring-1 bg-white ring-black ring-opacity-5 divide-gray-50 divide-y-2"
                ></ol>
              </li>
            </ul>
            <img
              class="pl-3 sm:pr-6 py-3.5 relative pr-4"
              alt="Profile picture of user 095f88c2-1892-41d1-8165-981ab47b1942"
              src="https://example.org/pictures/c70d575b-353a-4360-99df-c2100a36e41b"
            />
          </li>
          <li class="whitespace-nowrap">
            <a href="#" target="_blank" rel="noreferrer" class="h-full">
              This is link c804eb7a-39ea-46e6-a79a-2d48e61d5b4e
            </a>
          </li>
          <li class="text-gray-900 text-2xl font-bold tracking-tight">
            <img
              class="text-gray-900 font-medium"
              alt="Profile picture of user 12190673-25cb-4175-90d7-73282e51bd02"
              src="https://example.org/pictures/e55a076b-0325-4629-8e02-c9491f2f49cc"
            />
          </li>
          <li
            class="ring-black sm:-mx-6 overflow-hidden ring-1 ring-opacity-5 mt-8 md:rounded-lg md:mx-0 -mx-4 shadow"
          >
            <ol class="flex items-center font-medium hover:text-gray-800 text-sm text-gray-700">
              <li class="flex mt-8 flex-col">
                <ol class="sm:inline hidden"></ol>
                <ul class="flex items-center absolute inset-0"></ul>
                <ol class="h-6 w-6"></ol>
              </li>
              <li class="-ml-2 rounded-md text-gray-400 p-2 bg-white">
                <img
                  class="block ml-3 font-medium text-sm text-gray-700"
                  alt="Profile picture of user 2cee83e8-6405-4046-9454-7f6083db307d"
                  src="https://example.org/pictures/93097140-2e56-4a3f-bc41-e00c658b7767"
                />
                <ul class="sm:grid font-medium hidden grid-cols-4 text-gray-600 mt-6 text-sm"></ul>
                <ul class="h-64 w-64 rounded-full xl:h-80 xl:w-80"></ul>
                <ul class="sr-only"></ul>
              </li>
            </ol>
            <img
              class="aspect-w-2 group sm:aspect-w-1 aspect-h-1 overflow-hidden sm:aspect-h-1 sm:row-span-2 rounded-lg"
              alt="Profile picture of user bc370a72-a44e-44e1-bbec-962c234060da"
              src="https://example.org/pictures/d284630d-a088-49ad-a018-b245a8d7acb7"
            />
          </li>
          <li class="space-y-6 mt-6">
            <ul class="w-5 text-gray-400 h-5">
              <li
                class="hover:bg-gray-100 py-1.5 bg-gray-50 text-gray-400 focus:z-10 rounded-tl-lg"
              >
                <img
                  class="bg-gray-50 py-1.5 hover:bg-gray-100 focus:z-10 text-gray-400"
                  alt="Profile picture of user 4b298841-5911-4b70-ae5a-a5aa8646e575"
                  src="https://example.org/pictures/fd05d4f7-2b6c-4de4-b7a7-3035e7b5fe78"
                />
                <img
                  class="px-3 py-2 bg-white relative"
                  alt="Profile picture of user 5406aa7d-5563-4ce1-980f-754a912cd9ff"
                  src="https://example.org/pictures/e979117e-580c-40a7-be74-bf1b916b9ac0"
                />
                <a
                  href="#"
                  target="_blank"
                  rel="noreferrer"
                  class="mt-2 font-medium text-gray-900 text-lg"
                >
                  This is link 95d285c9-6e4e-43c2-a97f-bb958dcce92f
                </a>
                <ul class="sr-only"></ul>
              </li>
              <li class="mt-2 text-sm text-gray-500">
                <a href="#" target="_blank" class="text-sm text-blue-gray-900 font-medium block">
                  This is link e0ca5c13-efa5-44d7-b91e-512df7c88410
                </a>
                <img
                  class="w-5 h-5"
                  alt="Profile picture of user 4f5aeddc-6718-40fd-87d2-dcca7e4ef8b1"
                  src="https://example.org/pictures/6a2ed606-6c59-413c-911f-612c7390091f"
                />
                <ol class="font-medium text-gray-900"></ol>
                <ol class="justify-center rounded-full h-7 items-center mx-auto w-7 flex"></ol>
              </li>
              <li class="font-medium px-1 whitespace-nowrap py-4 text-sm border-b-2">
                <a
                  href="#"
                  target="_blank"
                  class="min-h-80 rounded-md aspect-h-1 aspect-w-1 lg:aspect-none w-full group-hover:opacity-75 lg:h-80 overflow-hidden bg-gray-200"
                >
                  This is link 4f52e535-2e46-44e2-8a5f-fce48c1a673a
                </a>
                <ul class="text-gray-300 h-full w-full"></ul>
                <img
                  class="block"
                  alt="Profile picture of user 76dd6af3-d2b7-4a7a-8bc3-628ce95ea9b3"
                  src="https://example.org/pictures/c6b476c8-283c-44f7-a5c6-4cb48c5ae10b"
                />
                <ol class="h-32 relative lg:hidden w-full"></ol>
              </li>
              <li class="bg-gray-100 z-10 sticky sm:pt-3 pl-1 pt-1 md:hidden sm:pl-3 top-0">
                <ol class="z-40 relative lg:hidden"></ol>
                <a href="#" class="sr-only"> This is link ec11a608-55b8-41fd-8085-325252c469af </a>
                <ol class="divide-gray-200 lg:col-span-9 divide-y"></ol>
              </li>
            </ul>
            <ul class="text-xl font-semibold ml-1">
              <li class="lg:flex-1 lg:w-0">
                <ol class="sm:hidden"></ol>
                <img
                  class="block py-2 text-blue-gray-900 text-base hover:bg-blue-gray-50 font-medium px-3 rounded-md"
                  alt="Profile picture of user 885eb4a3-98ca-4614-b255-ec03e124c026"
                  src="https://example.org/pictures/6d3a9136-583e-4742-826f-e6d94f60ce99"
                />
              </li>
              <li class="truncate w-0 ml-2 flex-1">
                <img
                  class="hover:text-gray-600 text-gray-500"
                  alt="Profile picture of user de38ffb5-607b-4ed6-87bd-dd05fde1731c"
                  src="https://example.org/pictures/da67f442-40c9-425d-9344-2f9772582519"
                />
                <ol class="text-center mt-8 text-gray-400 text-base"></ol>
              </li>
            </ul>
          </li>
        </ol>
      </li>
      <li class="lg:block hidden lg:flex-1">
        <a href="#" target="_blank" class="text-base ml-3 text-gray-500">
          This is link 9a44892f-7ead-48b6-af94-913ec04821a1
        </a>
        <ol
          class="shadow-sm border-gray-300 focus:ring-indigo-500 sm:text-sm focus:border-indigo-500 w-full rounded-md block"
        >
          <li class="bg-white hover:bg-gray-100 py-1.5 focus:z-10">
            <a
              href="#"
              target="_blank"
              class="bg-gray-200 text-gray-700 gap-px lg:flex-none border-b text-center grid-cols-7 grid text-xs leading-6 border-gray-300 font-semibold"
            >
              This is link 42a16c66-508d-4d65-bb1a-b252f7e78df2
            </a>
            <a href="#" class="h-8 w-auto"> This is link 021bda37-522f-413d-af3c-4a8c4f4d666a </a>
            <img
              class="max-h-12"
              alt="Profile picture of user a1a859bc-ef5e-4349-99ab-a8f4ae262d94"
              src="https://example.org/pictures/da93a022-cbbf-4ba0-b34c-21c090d87d74"
            />
            <a
              href="#"
              target="_blank"
              rel="noreferrer"
              class="flex relative justify-center text-sm"
            >
              This is link fa5aded2-2906-4809-b742-26832b226f50
            </a>
          </li>
          <li class="py-12 sm:px-6 lg:py-16 px-4 lg:px-8 mx-auto max-w-7xl">
            <a href="#" rel="noreferrer" class="min-w-0 ml-3 flex-1">
              This is link 715e397d-5676-42fc-9d8f-456172543c31
            </a>
            <img
              class="bg-gray-800"
              alt="Profile picture of user c02575ab-6ff1-45f9-a8e3-242c79b133fc"
              src="https://example.org/pictures/3d8ecc7a-2504-4797-a644-f93d74acf853"
            />
            <img
              class="text-base text-gray-900 font-medium"
              alt="Profile picture of user 9f457701-be79-4ff2-9dfc-9382dafb20ab"
              src="https://example.org/pictures/438b713b-c9fd-4da2-a265-4b8d8f531e30"
            />
            <a href="#" rel="noreferrer" class="text-sm">
              This is link 4c84098a-c0ac-4044-bbba-6f10bcc315fb
            </a>
          </li>
          <li class="w-6 flex-shrink-0 h-6 text-green-500">
            <img
              class="mx-auto sm:px-6 px-4 max-w-7xl"
              alt="Profile picture of user 00ae83b8-845d-447e-ae1b-cd3c685e1ca0"
              src="https://example.org/pictures/b9deba2b-c5b3-4b80-bf76-e0a717d310fd"
            />
            <ul class="w-72">
              <li class="sm:flex sm:justify-between sm:items-center">
                <img
                  class="block font-medium text-sm text-gray-700"
                  alt="Profile picture of user c0de8cb0-e9d7-4639-8c3d-851ca17e665b"
                  src="https://example.org/pictures/897193ff-aa53-4e9e-b761-bc4f75aef572"
                />
              </li>
              <li class="text-sm hidden font-medium ml-3 text-gray-700 lg:block">
                <img
                  class="h-8 w-auto"
                  alt="Profile picture of user 9ff9c8ac-2374-4960-9996-ec258745c91a"
                  src="https://example.org/pictures/e898638f-08fa-4743-aea7-66adba84bded"
                />
              </li>
              <li
                class="mx-auto sm:px-6 px-4 lg:items-center lg:flex lg:py-16 lg:px-8 max-w-7xl py-12"
              >
                <img
                  class="lg:max-w-none px-4 max-w-2xl mx-auto lg:px-0"
                  alt="Profile picture of user 7c4d617d-afa2-4410-81c5-2def540d2d20"
                  src="https://example.org/pictures/05a7dbc1-c1cc-4f99-99e5-7b507a4108b3"
                />
                <ul class="hover:text-gray-600 text-gray-500"></ul>
                <ul
                  class="relative rounded-md border-transparent focus-within:ring-2 focus-within:ring-white -ml-2 group"
                ></ul>
              </li>
            </ul>
            <img
              class="h-5 text-gray-300 w-5"
              alt="Profile picture of user bf2c6905-715a-4e38-9b5d-17fd8e7aec2a"
              src="https://example.org/pictures/e759a4d7-5e63-4075-ba32-c6574107f401"
            />
          </li>
          <li class="object-cover object-center h-full w-full">
            <ol class="w-full">
              <li class="md:mt-0 absolute sm:-mt-32 -mt-72 inset-0">
                <ul class="w-12 h-12 rounded-full"></ul>
              </li>
              <li class="h-1.5 rounded-full w-1.5 mb-1 mx-0.5 bg-gray-400">
                <ol class="border-gray-200 border-4 rounded-lg border-dashed h-96"></ol>
                <img
                  class="order-1 font-semibold text-gray-700"
                  alt="Profile picture of user 1c2cabee-08a3-4b48-ba54-5a578b2c3d30"
                  src="https://example.org/pictures/f5c185be-8b9d-490d-81f4-73a6e1517d98"
                />
                <img
                  class="font-bold sm:text-4xl text-gray-900 tracking-tight text-3xl leading-8 text-center"
                  alt="Profile picture of user 1e8a2508-a37d-4f6b-9a8c-c6fcf0773604"
                  src="https://example.org/pictures/90af1bd2-30ed-45d3-917f-c685190ce56e"
                />
              </li>
              <li class="space-x-2 mt-4 text-sm text-gray-700 flex">
                <ul
                  class="rounded-full translate-x-1/2 block transform border-2 absolute bottom-0 right-0 border-white translate-y-1/2"
                ></ul>
                <ol
                  class="sm:hidden text-base py-2 text-gray-900 w-full placeholder-gray-500 h-full focus:outline-none border-transparent pr-3 pl-8 focus:placeholder-gray-400 focus:ring-0 focus:border-transparent"
                ></ol>
              </li>
            </ol>
            <ul class="lg:mt-0 self-center flow-root mt-8">
              <li
                class="justify-center rounded-full bg-transparent bg-white hover:text-gray-500 focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 text-gray-400 inline-flex focus:outline-none h-8 items-center w-8"
              >
                <ol class="block xl:inline"></ol>
                <ol class="flex-shrink-0 ml-4"></ol>
                <ol class="text-gray-200"></ol>
                <img
                  class="border-gray-300 focus:relative md:w-9 rounded-r-md flex bg-white md:hover:bg-gray-50 pl-4 text-gray-400 border hover:text-gray-500 items-center pr-3 border-l-0 justify-center md:px-2 py-2"
                  alt="Profile picture of user b0a1e2d3-84c4-494b-91d6-194fc294b0db"
                  src="https://example.org/pictures/2f414511-756c-40ef-aded-22e3f4d985d7"
                />
              </li>
              <li class="inset-0 absolute">
                <img
                  class="text-gray-500 text-base font-medium text-center"
                  alt="Profile picture of user 431f88eb-5002-43ab-b23a-37ae0ef7d424"
                  src="https://example.org/pictures/bc7c19bb-4ef2-46ff-b00e-da70febab926"
                />
                <img
                  class="inset-0 absolute z-10"
                  alt="Profile picture of user 4a3698d0-7cea-4ba2-854d-28b2bb2d374b"
                  src="https://example.org/pictures/6078c4cd-db51-43af-90b3-8aeb0a8f1030"
                />
              </li>
            </ul>
            <a href="#" rel="noreferrer" class="bg-white">
              This is link ab01c689-e03a-4992-8322-37c20551cb07
            </a>
          </li>
          <li class="flex px-4 pb-2 pt-5">
            <ol
              class="sm:px-6 px-4 bg-white relative pb-8 md:p-6 shadow-2xl items-center flex w-full sm:pt-8 overflow-hidden lg:p-8 pt-14"
            >
              <li class="py-1.5 hover:bg-gray-100 focus:z-10 text-gray-400 bg-gray-50">
                <a
                  href="#"
                  rel="noreferrer"
                  class="sm:text-sm bg-gray-50 items-center border-gray-300 border-r-0 rounded-l-md text-gray-500 inline-flex border px-3"
                >
                  This is link 3ef75acd-3dfc-4e82-801b-eae9ff7c4351
                </a>
                <ol class="absolute border-dashed border-gray-200 border-2 rounded-lg inset-0"></ol>
              </li>
              <li class="hover:bg-gray-50 block">
                <ol class="items-center flex justify-center p-8"></ol>
                <ul class="mx-auto sm:px-6 lg:px-8 pb-12 max-w-7xl px-4"></ul>
                <img
                  class="h-6 w-6 text-green-400"
                  alt="Profile picture of user f5900afb-7bee-4492-b6e3-148f0afc4f5f"
                  src="https://example.org/pictures/1b12c3fb-9f84-4cc7-84a7-d38f7ea232ee"
                />
              </li>
              <li class="flex mt-4 lg:flex-grow-0 flex-grow lg:ml-4 flex-shrink-0 ml-8">
                <img
                  class="focus:ring-indigo-500 block w-full sm:text-sm border-gray-300 focus:border-indigo-500 rounded-md shadow-sm"
                  alt="Profile picture of user c9dd7fa0-c1f4-477c-b24e-87d200ebb161"
                  src="https://example.org/pictures/1a3b2e5c-a192-47f3-a550-e18f715213a2"
                />
                <a href="#" target="_blank" rel="noreferrer" class="text-gray-300 hover:text-white">
                  This is link 81b819f3-b2e8-41db-ab8d-abe8c6926047
                </a>
              </li>
            </ol>
            <img
              class="lg:flex-1 lg:block hidden"
              alt="Profile picture of user 352e9ea2-0216-4a0c-917c-1906f5ef4ed1"
              src="https://example.org/pictures/ec02985c-b92d-4978-906e-7bdc70bfa54e"
            />
          </li>
        </ol>
      </li>
      <li class="sr-only">
        <a href="#" target="_blank" class="text-gray-500 mt-4 text-sm">
          This is link a712361b-f51e-4f0a-9d55-b64a5d53e10e
        </a>
        <a
          href="#"
          rel="noreferrer"
          class="rounded-lg ring-opacity-5 shadow-lg overflow-hidden ring-1 ring-black"
        >
          This is link 8eb412d6-1c39-4fed-b507-cf2a65904247
        </a>
      </li>
    </ul>
  </nav>
  <img
    class="bg-gray-100"
    alt="Profile picture of user 8825a6f0-3a41-44b8-92ec-abcd0af79bfb"
    src="https://example.org/pictures/679e2a54-073e-416a-85c4-3eba0626aab3"
  />
  <span class="bg-white focus:z-10 py-1.5 hover:bg-gray-100">
    This is text 3d190171-53b3-4393-99ab-9bedfc964141
  </span>
</div>