example.html — tailwindcss Source File

Source Code

<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"
// ... (493 more lines)