<main class=”tnj-container relative w-full flex flex-col items-center pb-xl bg-color-[#e0e0e8]”> <div class=”tnj-cq-holder relative w-full flex flex-col items-center @var:px-page”> <!– Pseudo-classes –> <section class=”relative w-full flex flex-col items-start gap-4 mt-8″> <h2 class=”text-black text-xl”>Pseudo-classes</h2> <a href=”https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-classes” target=”_blank” rel=”noopener” >Pseudo-classes</a > <h3 class=”text-gray mt-4 text-lg”>:hover, :focus, and :active</h3> <div class=”not-prose overflow-auto rounded-lg bg-white outline outline-white/5 dark:bg-gray-950/50 p-8″ > <div class=”grid place-items-center”> <button type=”button” class=”rounded-full bg-violet-500 px-5 py-2 text-sm leading-5 font-semibold text-white hover:bg-violet-600 focus:outline-2 focus:outline-offset-2 focus:outline-violet-500 active:bg-violet-700″ > Save changes </button> </div> </div> <!– <=== :hover, :focus, and :active –> <h3 class=”text-gray mt-4 text-lg”>:first, :last, :odd, and :even</h3> <div class=”py-0 not-prose overflow-auto rounded-lg bg-white outline outline-white/5 dark:bg-gray-950/50 p-8″ > <div class=”px-4″> <div class=”mx-auto max-w-md border-x border-x-gray-200 dark:border-x-gray-800 dark:bg-gray-950/10″ > <ul role=”list” class=”divide-y divide-gray-200 p-6 dark:divide-gray-800″> <li class=”flex py-4 first:pt-0 last:pb-0″> <img class=”h-10 w-10 rounded-full” alt=”” src=”https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80″ /> <div class=”ml-3 overflow-hidden”> <p class=”text-sm font-medium text-gray-900 dark:text-white”>Kristen Ramos</p> <p class=”truncate text-sm text-gray-500 dark:text-gray-400″> kristen.ramos@example.com </p> </div> </li> <li class=”flex py-4 first:pt-0 last:pb-0″> <img class=”h-10 w-10 rounded-full” alt=”” src=”https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80″ /> <div class=”ml-3 overflow-hidden”> <p class=”text-sm font-medium text-gray-900 dark:text-white”>Floyd Miles</p> <p class=”truncate text-sm text-gray-500 dark:text-gray-400″>floyd.miles@example.com</p> </div> </li> <li class=”flex py-4 first:pt-0 last:pb-0″> <img class=”h-10 w-10 rounded-full” alt=”” src=”https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80″ /> <div class=”ml-3 overflow-hidden”> <p class=”text-sm font-medium text-gray-900 dark:text-white”>Courtney Henry</p> <p class=”truncate text-sm text-gray-500 dark:text-gray-400″> courtney.henry@example.com </p> </div> </li> <li class=”flex py-4 first:pt-0 last:pb-0″> <img class=”h-10 w-10 rounded-full” alt=”” src=”https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80″ /> <div class=”ml-3 overflow-hidden”> <p class=”text-sm font-medium text-gray-900 dark:text-white”>Ted Fox</p> <p class=”truncate text-sm text-gray-500 dark:text-gray-400″>ted.fox@example.com</p> </div> </li> </ul> </div> </div> </div> <div class=”py-8 not-prose overflow-auto rounded-lg bg-white outline outline-white/5 dark:bg-gray-950/50″ > <div class=”border-y border-y-gray-200 bg-white dark:border-y-gray-800 dark:bg-gray-950″> <div class=”inline-block min-w-full align-middle”> <div class=”overflow-hidden”> <table class=”min-w-full”> <thead class=”border-b border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-950″> <tr> <th scope=”col” class=”px-6 py-3 text-left text-sm font-medium text-gray-900 dark:text-white” > Name </th> <th scope=”col” class=”px-6 py-3 text-left text-sm font-medium text-gray-900 dark:text-white” > Title </th> <th scope=”col” class=”px-6 py-3 text-left text-sm font-medium text-gray-900 dark:text-white” > Email </th> </tr> </thead> <tbody> <tr class=”odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950″> <td class=”px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white” > Jane Cooper </td> <td class=”px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400″> Regional Paradigm Technician </td> <td class=”px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400″> jane.cooper@example.com </td> </tr> <tr class=”odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950″> <td class=”px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white” > Cody Fisher </td> <td class=”px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400″> Product Directives Officer </td> <td class=”px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400″> cody.fisher@example.com </td> </tr> <tr class=”odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950″> <td class=”px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white” > Leonard Krasner </td> <td class=”px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400″> Senior Designer </td> <td class=”px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400″> leonard.krasner@example.com </td> </tr> <tr class=”odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950″> <td class=”px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white” > Emily Selman </td> <td class=”px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400″> VP, Hardware Engineering </td> <td class=”px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400″> emily.selman@example.com </td> </tr> <tr class=”odd:bg-white even:bg-gray-50 dark:odd:bg-gray-900/50 dark:even:bg-gray-950″> <td class=”px-6 py-4 text-sm font-medium whitespace-nowrap text-gray-900 dark:text-white” > Anna Roberts </td> <td class=”px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400″> Chief Strategy Officer </td> <td class=”px-6 py-4 text-sm whitespace-nowrap text-gray-600 dark:text-gray-400″> anna.roberts@example.com </td> </tr> </tbody> </table> </div> </div> </div> </div> <!– <=== :first, :last, :odd, and :even –> <h3 class=”text-gray mt-4 text-lg”>:required and :disabled</h3> <div class=”py-0 not-prose overflow-auto rounded-lg bg-white outline outline-white/5 dark:bg-gray-950/50 p-8″ > <div class=”mx-auto max-w-md border-x border-x-gray-200 px-6 py-5 dark:border-x-gray-800 dark:bg-gray-950/10″ > <form> <div> <label for=”username” class=”block text-sm font-medium text-gray-700 dark:text-gray-300″ >Username</label > <div class=”mt-1″> <input id=”username” class=”block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm invalid:border-pink-500 invalid:text-pink-600 focus:border-sky-500 focus:outline focus:outline-sky-500 focus:invalid:border-pink-500 focus:invalid:outline-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none sm:text-sm dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20″ disabled=”” type=”text” value=”tbone” name=”username” /> </div> </div> <div class=”mt-6″> <label for=”email” class=”block text-sm font-medium text-gray-700 dark:text-gray-300″ >Email</label > <div class=”mt-1″> <input id=”email-1″ class=”block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm invalid:border-pink-500 invalid:text-pink-600 focus:border-sky-500 focus:outline focus:outline-sky-500 focus:invalid:border-pink-500 focus:invalid:outline-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none sm:text-sm dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20″ placeholder=”you@example.com” type=”email” value=”george@krugerindustrial.” name=”email” /> </div> </div> <div class=”mt-6″> <label for=”password” class=”block text-sm font-medium text-gray-700 dark:text-gray-300″ >Password</label > <div class=”mt-1″> <input id=”password” autocomplete=”none” class=”block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm invalid:border-pink-500 invalid:text-pink-600 focus:border-sky-500 focus:outline focus:outline-sky-500 focus:invalid:border-pink-500 focus:invalid:outline-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none sm:text-sm dark:disabled:border-gray-700 dark:disabled:bg-gray-800/20″ type=”password” value=”Bosco” name=”password” /> </div> </div> <div class=”mt-6 text-right”> <button class=”rounded-md bg-sky-500 px-5 py-2.5 text-sm leading-5 font-semibold text-white hover:bg-sky-700″ > Save changes </button> </div> </form> </div> </div> <!– <=== :required and :disabled –> <!– :has() –> <h3 class=”text-gray mt-4 text-lg”>:has()</h3> <div class=”py-0 not-prose overflow-auto rounded-lg bg-white outline outline-white/5 dark:bg-gray-950/50 p-8″ > <form class=”mx-auto max-w-md border-x border-x-gray-200 px-4 py-6 text-gray-700 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-gray-200″ > <fieldset> <legend class=”text-base font-semibold text-gray-900 dark:text-white”>Payment method</legend> <div class=”mt-4 space-y-2″> <label for=”apple” class=”grid grid-cols-[24px_1fr_auto] items-center gap-6 rounded-lg p-4 ring-1 ring-transparent hover:bg-gray-100 has-checked:bg-indigo-50 has-checked:text-indigo-800 has-checked:ring-indigo-200 dark:hover:bg-white/5 dark:has-checked:bg-indigo-950 dark:has-checked:text-indigo-200 dark:has-checked:ring-indigo-900″ ><svg class=”w-8″ fill=”currentColor” viewBox=”0 0 24 13″> <path d=”M3.96299 1.735C3.22833 1.73504 2.50814 1.9393 1.88285 2.32497C1.25756 2.71063 0.751781 3.26252 0.42199 3.919C0.144511 4.47115 0 5.08054 0 5.6985C0 6.31645 0.144511 6.92584 0.42199 7.478C0.751781 8.13447 1.25756 8.68636 1.88285 9.07202C2.50814 9.45769 3.22833 9.66195 3.96299 9.662C5.03299 9.662 5.93299 9.31 6.58999 8.705C7.33799 8.015 7.76999 6.995 7.76999 5.789C7.76976 5.51882 7.74634 5.24916 7.69999 4.983H3.96399V6.509H6.10399C6.06043 6.75276 5.96798 6.98519 5.83221 7.19228C5.69644 7.39937 5.52016 7.57684 5.31399 7.714C4.95799 7.955 4.49999 8.093 3.96399 8.093C2.92999 8.093 2.05299 7.396 1.73899 6.457C1.57315 5.96493 1.57315 5.43207 1.73899 4.94C2.05299 4 2.92999 3.304 3.96399 3.304C4.52899 3.29475 5.07496 3.50811 5.48399 3.898L6.61599 2.768C5.89873 2.09384 4.94728 1.72362 3.96299 1.735ZM10.464 2.285V9.185H11.35V6.39H12.815C13.418 6.39 13.925 6.194 14.337 5.802C14.5421 5.61815 14.705 5.39214 14.8146 5.13945C14.9242 4.88676 14.9779 4.61337 14.972 4.338C14.9762 4.06405 14.9216 3.79238 14.8121 3.54125C14.7026 3.29011 14.5406 3.06533 14.337 2.882C14.1354 2.68674 13.897 2.53337 13.6358 2.43073C13.3746 2.32809 13.0956 2.27822 12.815 2.284L10.464 2.285ZM12.891 3.135C13.0456 3.13769 13.1981 3.17139 13.3395 3.23408C13.4808 3.29678 13.6082 3.3872 13.714 3.5C13.8267 3.60959 13.9162 3.74065 13.9774 3.88544C14.0385 4.03024 14.07 4.18582 14.07 4.343C14.07 4.50017 14.0385 4.65576 13.9774 4.80055C13.9162 4.94534 13.8267 5.07641 13.714 5.186C13.6007 5.30328 13.4642 5.39562 13.3132 5.45709C13.1622 5.51857 13 5.54783 12.837 5.543H11.35V3.135H12.837C12.855 3.13458 12.873 3.13458 12.891 3.135ZM17.015 4.31C16.173 4.31 15.538 4.618 15.108 5.235L15.889 5.726C16.177 5.309 16.569 5.1 17.064 5.1C17.3798 5.09612 17.6855 5.21145 17.92 5.423C18.0354 5.51846 18.1282 5.63844 18.1915 5.77423C18.2548 5.91001 18.2871 6.05818 18.286 6.208V6.41C17.946 6.217 17.512 6.121 16.986 6.121C16.369 6.121 15.876 6.266 15.507 6.555C15.137 6.843 14.953 7.232 14.953 7.72C14.949 7.9396 14.994 8.15734 15.0848 8.35733C15.1757 8.55732 15.31 8.73451 15.478 8.876C15.828 9.184 16.263 9.339 16.783 9.339C17.393 9.339 17.881 9.069 18.248 8.529H18.286V9.184H19.134V6.275C19.134 5.665 18.944 5.185 18.566 4.835C18.186 4.485 17.67 4.31 17.015 4.31ZM19.278 4.464L21.224 8.886L20.126 11.266H21.041L24 4.463H23.035L21.667 7.854H21.647L20.241 4.464H19.278ZM17.132 6.832C17.626 6.832 18.012 6.942 18.288 7.162C18.288 7.534 18.141 7.858 17.848 8.135C17.5835 8.39951 17.225 8.54839 16.851 8.549C16.6011 8.55376 16.3573 8.47178 16.161 8.317C16.0697 8.25093 15.9954 8.16402 15.9445 8.06349C15.8935 7.96295 15.8673 7.85171 15.868 7.739C15.868 7.482 15.988 7.269 16.231 7.092C16.471 6.919 16.772 6.832 17.132 6.832Z” ></path></svg >Google Pay<input id=”apple” class=”box-content h-1.5 w-1.5 appearance-none rounded-full border-[5px] border-white bg-white bg-clip-padding ring-1 ring-gray-950/20 outline-none checked:border-indigo-500 checked:ring-indigo-500″ type=”radio” value=”google” checked=”” name=”payment_method” /></label ><label for=”google” class=”grid grid-cols-[24px_1fr_auto] items-center gap-6 rounded-lg p-4 ring-1 ring-transparent hover:bg-gray-100 has-checked:bg-indigo-50 has-checked:text-indigo-800 has-checked:ring-indigo-200 dark:hover:bg-white/5 dark:has-checked:bg-indigo-950 dark:has-checked:text-indigo-200 dark:has-checked:ring-indigo-900″ ><svg class=”mt-1 w-8 fill-current” fill=”currentColor” viewBox=”0 0 24 13″> <path d=”M4.38526 1.86704C4.10401 2.19606 3.65392 2.45565 3.20387 2.41854C3.14762 1.97367 3.36793 1.50091 3.62579 1.20892C3.90704 0.870635 4.39932 0.62962 4.79781 0.611084C4.84468 1.07453 4.66182 1.52871 4.38526 1.86704ZM4.79312 2.50663C4.14146 2.46956 3.5836 2.87272 3.27418 2.87272C2.96012 2.87272 2.48659 2.52517 1.97092 2.53443C1.30056 2.5437 0.677025 2.91906 0.33479 3.51694C-0.368428 4.71265 0.151978 6.48308 0.831712 7.45632C1.16457 7.9383 1.56306 8.46662 2.0881 8.44809C2.58507 8.42955 2.78195 8.12834 3.38204 8.12834C3.98677 8.12834 4.16026 8.44809 4.68531 8.43882C5.2291 8.42955 5.57134 7.95688 5.9042 7.47485C6.28388 6.92799 6.43862 6.39499 6.44799 6.36718C6.43862 6.35791 5.3979 5.96402 5.38853 4.77753C5.37915 3.78576 6.20893 3.31304 6.24643 3.28524C5.77759 2.59931 5.04629 2.52517 4.79312 2.50663ZM8.55765 1.16258V8.38789H9.69212V5.91768H11.2626C12.6971 5.91768 13.7051 4.94445 13.7051 3.53552C13.7051 2.12664 12.7159 1.16262 11.3001 1.16262H8.5576L8.55765 1.16258ZM9.69212 2.10806H11.0001C11.9846 2.10806 12.5471 2.62711 12.5471 3.54011C12.5471 4.4531 11.9846 4.97684 10.9954 4.97684H9.69212V2.10806ZM15.7772 8.44345C16.4898 8.44345 17.1508 8.08664 17.4508 7.52119H17.4743V8.38785H18.5244V4.79143C18.5244 3.74868 17.6806 3.07666 16.3819 3.07666C15.1771 3.07666 14.2864 3.75795 14.2536 4.69412H15.2756C15.36 4.24921 15.7771 3.95722 16.3491 3.95722C17.043 3.95722 17.4321 4.27701 17.4321 4.86562V5.26415L16.0163 5.34756C14.6989 5.42634 13.9864 5.95934 13.9864 6.88629C13.9864 7.82245 14.7224 8.44345 15.7772 8.44345ZM16.0819 7.58607C15.4772 7.58607 15.0927 7.29876 15.0927 6.85844C15.0927 6.4043 15.4631 6.14012 16.171 6.09841L17.4321 6.01963V6.42743C17.4321 7.10408 16.8508 7.58607 16.0819 7.58607H16.0819ZM19.9261 10.3529C21.0325 10.3529 21.5529 9.93584 22.0076 8.67057L24 3.14617H22.8467L21.5107 7.41456H21.4872L20.1511 3.14617H18.9651L20.8871 8.40638L20.784 8.72618C20.6106 9.2684 20.3293 9.47698 19.8277 9.47698C19.7386 9.47698 19.5652 9.46771 19.4948 9.45844V10.3251C19.5604 10.3436 19.8417 10.3529 19.9261 10.3529Z” ></path></svg >Apple Pay<input id=”google” class=”box-content h-1.5 w-1.5 appearance-none rounded-full border-[5px] border-white bg-white bg-clip-padding ring-1 ring-gray-950/20 outline-none checked:border-indigo-500 checked:ring-indigo-500″ type=”radio” value=”apple” name=”payment_method” /></label ><label for=”credit-card” class=”grid grid-cols-[24px_1fr_auto] items-center gap-6 rounded-lg p-4 ring-1 ring-transparent hover:bg-gray-100 has-checked:bg-indigo-50 has-checked:text-indigo-800 has-checked:ring-indigo-200 dark:hover:bg-white/5 dark:has-checked:bg-indigo-950 dark:has-checked:text-indigo-200 dark:has-checked:ring-indigo-900″ ><svg class=”w-8″ viewBox=”0 0 24 13″ fill=”none”> <rect stroke=”currentColor” x=”0.5″ y=”0.5″ width=”23″ height=”11″ rx=”1.5″></rect> <path fill=”currentColor” d=”M16.539 3.18591C16.0742 3.01652 15.5828 2.93152 15.088 2.93491C13.488 2.93491 12.358 3.74091 12.35 4.89791C12.34 5.74791 13.153 6.22691 13.768 6.51091C14.399 6.80291 14.61 6.98691 14.608 7.24791C14.604 7.64491 14.104 7.82491 13.639 7.82491C13 7.82491 12.651 7.73591 12.114 7.51291L11.915 7.41991L11.688 8.75191C12.077 8.91391 12.778 9.05291 13.502 9.06491C15.203 9.06491 16.315 8.26391 16.328 7.03291C16.342 6.35391 15.902 5.84091 14.976 5.41691C14.413 5.14191 14.064 4.95791 14.064 4.67891C14.064 4.43191 14.363 4.16791 14.988 4.16791C15.404 4.15785 15.8174 4.23589 16.201 4.39691L16.351 4.46391L16.578 3.17691L16.539 3.18591ZM20.691 3.04291H19.441C19.052 3.04291 18.759 3.14991 18.589 3.53591L16.185 8.98191H17.886L18.226 8.08891L20.302 8.09091C20.351 8.29991 20.501 8.98191 20.501 8.98191H22.001L20.691 3.04291ZM10.049 2.99291H11.67L10.656 8.93491H9.03705L10.049 2.99091V2.99291ZM5.93405 6.26791L6.10205 7.09291L7.68605 3.04291H9.40305L6.85205 8.97391H5.13905L3.73905 3.95191C3.71637 3.8691 3.66312 3.79798 3.59005 3.75291C3.08545 3.49225 2.55079 3.29444 1.99805 3.16391L2.02005 3.03891H4.62905C4.98305 3.05291 5.26805 3.16391 5.36305 3.54191L5.93305 6.27091L5.93405 6.26791ZM18.691 6.87391L19.337 5.21191C19.329 5.22991 19.47 4.86891 19.552 4.64591L19.663 5.15891L20.038 6.87291H18.69L18.691 6.87391Z” ></path></svg >Credit Card<input id=”credit-card” class=”box-content h-1.5 w-1.5 appearance-none rounded-full border-[5px] border-white bg-white bg-clip-padding ring-1 ring-gray-950/20 outline-none checked:border-indigo-500 checked:ring-indigo-500″ type=”radio” value=”credit-card” name=”payment_method” /></label> </div> </fieldset> </form> </div> <!– Styling based on the descendants of a group –> <h3 class=”text-gray mt-4 text-lg”>Styling based on the descendants of a group</h3> <div class=”py-0 not-prose overflow-auto rounded-lg bg-white outline outline-white/5 dark:bg-gray-950/50 p-8″ > <div class=”mx-auto grid max-w-md divide-y divide-gray-100 border-x border-x-gray-200 text-gray-700 dark:divide-gray-800 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-gray-300″ > <div class=”group grid grid-cols-[32px_1fr_auto] items-center gap-x-4 px-4 py-4 pt-6″> <img class=”size-[32px] rounded-full” alt=”” src=”https://spotlight.tailwindui.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Favatar.51a13c67.jpg&w=128&q=80″ /> <div class=”font-semibold text-gray-900 dark:text-white”>Spencer Sharp</div> <svg fill=”none” viewBox=”0 0 24 24″ stroke-width=”1.5″ stroke=”currentColor” class=”hidden size-4 group-has-[a]:block” > <path stroke-linecap=”round” stroke-linejoin=”round” d=”M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25″ ></path> </svg> <p class=”col-start-2 text-sm”> Product Designer at <a class=”dark;text-blue-400 text-blue-500 underline” href=”#”>planeteria.tech</a> </p> </div> <div class=”group grid grid-cols-[32px_1fr_auto] items-center gap-x-4 px-4 py-4″> <img class=”size-[32px] rounded-full” alt=”” src=”https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?q=80&w=256&h=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D” /> <div class=”font-semibold text-gray-900 dark:text-white”>Casey Jordan</div> <svg fill=”none” viewBox=”0 0 24 24″ stroke-width=”1.5″ stroke=”currentColor” class=”hidden size-4 group-has-[a]:block” > <path stroke-linecap=”round” stroke-linejoin=”round” d=”M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25″ ></path> </svg> <p class=”col-start-2 text-sm”>Just happy to be here.</p> </div> <div class=”group grid grid-cols-[32px_1fr_auto] items-center gap-x-4 px-4 py-4″> <img class=”size-[32px] rounded-full” alt=”” src=”https://images.unsplash.com/photo-1590895340509-793cb98788c9?q=80&w=256&h=256&&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D” /> <div class=”font-semibold text-gray-900 dark:text-white”>Alex Reed</div> <svg fill=”none” viewBox=”0 0 24 24″ stroke-width=”1.5″ stroke=”currentColor” class=”hidden size-4 group-has-[a]:block” > <path stroke-linecap=”round” stroke-linejoin=”round” d=”M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25″ ></path> </svg> <p class=”col-start-2 text-sm”> A multidisciplinary designer, working at the intersection of art and technology. <br /><br /><a class=”dark;text-blue-400 text-blue-500 underline” href=”#”>alex-reed.com</a> </p> </div> <div class=”group grid grid-cols-[32px_1fr_auto] items-center gap-x-4 px-4 py-4 pb-6″> <img class=”size-[32px] rounded-full” alt=”” src=”https://images.unsplash.com/photo-1517841905240-472988babdf9?q=80&w=256&h=256&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D” /> <div class=”font-semibold text-gray-900 dark:text-white”>Taylor Bailey</div> <svg fill=”none” viewBox=”0 0 24 24″ stroke-width=”1.5″ stroke=”currentColor” class=”hidden size-4 group-has-[a]:block” > <path stroke-linecap=”round” stroke-linejoin=”round” d=”M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25″ ></path> </svg> <p class=”col-start-2 text-sm”>Pushing pixels. Slinging divs.</p> </div> </div> </div> <!– Styling based on the descendants of a peer –> <h3 class=”text-gray mt-4 text-lg”>Styling based on the descendants of a peer</h3> <div class=”py-0 not-prose overflow-auto rounded-lg bg-white outline outline-white/5 dark:bg-gray-950/50 p-8″ > <div class=”mx-auto max-w-md border-x border-x-gray-200 px-4 py-6 dark:border-x-gray-800 dark:bg-gray-950/10″ > <fieldset class=”space-y-3″> <legend class=”text-base font-semibold text-gray-900 dark:text-white”>Today</legend> <div class=”grid grid-cols-[1fr_24px] items-center gap-6″> <label class=”peer grid grid-cols-[auto_1fr] items-center gap-3 rounded-md px-2 hover:bg-gray-100 dark:hover:bg-white/5″ ><input type=”checkbox” class=”peer size-3.5 appearance-none rounded-sm border border-gray-300 accent-pink-500 checked:appearance-auto dark:border-gray-600 dark:accent-pink-600″ checked=”” /><span class=”text-gray-700 select-none peer-checked:text-gray-400 peer-checked:line-through dark:text-gray-300″ >Create a to do list</span ></label > <div class=”size-[26px] rounded-md p-1 peer-has-checked:hidden hover:bg-red-50 hover:text-pink-500″ > <svg fill=”none” viewBox=”0 0 24 24″ stroke-width=”1.5″ stroke=”currentColor”> <path stroke-linecap=”round” stroke-linejoin=”round” d=”M6 18L18 6M6 6l12 12″></path> </svg> </div> </div> <div class=”grid grid-cols-[1fr_24px] items-center gap-6″> <label class=”peer grid grid-cols-[auto_1fr] items-center gap-3 rounded-md px-2 hover:bg-gray-100 dark:hover:bg-white/5″ ><input type=”checkbox” class=”peer size-3.5 appearance-none rounded-sm border border-gray-300 accent-pink-500 checked:appearance-auto dark:border-gray-600 dark:accent-pink-600″ /><span class=”text-gray-700 select-none peer-checked:text-gray-400 peer-checked:line-through dark:text-gray-300″ >Check off first item</span ></label > <div class=”size-[26px] rounded-md p-1 peer-has-checked:hidden hover:bg-red-50 hover:text-pink-500″ > <svg fill=”none” viewBox=”0 0 24 24″ stroke-width=”1.5″ stroke=”currentColor”> <path stroke-linecap=”round” stroke-linejoin=”round” d=”M6 18L18 6M6 6l12 12″></path> </svg> </div> </div> <div class=”grid grid-cols-[1fr_24px] items-center gap-6″> <label class=”peer grid grid-cols-[auto_1fr] items-center gap-3 rounded-md px-2 hover:bg-gray-100 dark:hover:bg-white/5″ ><input type=”checkbox” class=”peer size-3.5 appearance-none rounded-sm border border-gray-300 accent-pink-500 checked:appearance-auto dark:border-gray-600 dark:accent-pink-600″ /><span class=”text-gray-700 select-none peer-checked:text-gray-400 peer-checked:line-through dark:text-gray-300″ >Investigate race condition</span ></label > <div class=”block size-[26px] rounded-md p-1 peer-has-checked:hidden hover:bg-red-50 hover:text-pink-500″ > <svg fill=”none” viewBox=”0 0 24 24″ stroke-width=”1.5″ stroke=”currentColor”> <path stroke-linecap=”round” stroke-linejoin=”round” d=”M6 18L18 6M6 6l12 12″></path> </svg> </div> </div> </fieldset> </div> </div> <!– :not() –> <h3 class=”text-gray mt-4 text-lg”>:not()</h3> <div class=”not-prose overflow-auto rounded-lg bg-white outline outline-white/5 dark:bg-gray-950/50 p-8″ > <div class=”grid place-items-center”> <button type=”button” class=”rounded-full bg-indigo-600 px-5 py-2 text-sm leading-5 font-semibold text-white hover:not-focus:bg-indigo-700 focus:outline focus:outline-violet-300 active:bg-violet-700″ tabindex=”0″ > Save changes </button> </div> </div> <!– Styling based on parent state –> <h3 class=”text-gray mt-4 text-lg”>Styling based on parent state</h3> <div class=”not-prose overflow-auto rounded-lg bg-white outline outline-white/5 dark:bg-gray-950/50 p-8″ > <a class=”group mx-auto block max-w-xs space-y-3 rounded-lg bg-white p-4 shadow-lg ring-1 ring-gray-900/5 hover:bg-sky-500 hover:ring-sky-500 dark:bg-white/5 dark:ring-white/10″ href=”#” ><div class=”flex items-center space-x-3″> <svg class=”h-6 w-6 stroke-sky-500 group-hover:stroke-white” fill=”none” viewBox=”0 0 24 24″> <path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M11 19H6.931A1.922 1.922 0 015 17.087V8h12.069C18.135 8 19 8.857 19 9.913V11″ ></path> <path stroke-linecap=”round” stroke-linejoin=”round” stroke-width=”2″ d=”M14 7.64L13.042 6c-.36-.616-1.053-1-1.806-1H7.057C5.921 5 5 5.86 5 6.92V11M17 15v4M19 17h-4″ ></path> </svg> <div class=”text-sm font-semibold text-gray-900 group-hover:text-white dark:text-white”> New project </div> </div> <p class=”text-sm text-gray-500 group-hover:text-white dark:text-gray-400″> Create a new project from a variety of starting templates. </p></a > </div> <!– Differentiating nested groups –> <h3 class=”text-gray mt-4 text-lg”>Differentiating nested groups</h3> <div class=”py-0 not-prose overflow-auto rounded-lg bg-white outline outline-white/5 dark:bg-gray-950/50 p-8″ > <div class=”px-4″> <ul role=”list” class=”mx-auto max-w-md border-x border-x-gray-200 p-2 dark:border-x-gray-800 dark:bg-gray-950/10″ > <li class=”group/item relative flex items-center justify-between rounded-xl p-4 hover:bg-gray-100 dark:hover:bg-white/5″ > <div class=”flex gap-4″> <div class=”flex-shrink-0″> <img class=”h-12 w-12 rounded-full” alt=”” src=”https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80″ /> </div> <div class=”w-full text-sm leading-6″> <a class=”font-semibold text-gray-900 dark:text-white” href=”#” ><span class=”absolute inset-0 rounded-xl” aria-hidden=”true”></span>Leslie Abbott</a > <div class=”text-gray-500″>Co-Founder / CEO</div> </div> </div> <a class=”group/edit invisible relative flex items-center rounded-full py-1 pr-3 pl-4 text-sm whitespace-nowrap text-gray-500 transition group-hover/item:visible hover:bg-gray-200 dark:text-gray-400″ href=”#” ><span class=”font-semibold transition group-hover/edit:text-gray-700″>Call</span ><svg class=”mt-px h-5 w-5 text-gray-400 transition group-hover/edit:translate-x-0.5 group-hover/edit:text-gray-500″ viewBox=”0 0 20 20″ fill=”currentColor” > <path fill-rule=”evenodd” d=”M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z” clip-rule=”evenodd” ></path></svg ></a> </li> <li class=”group/item relative flex items-center justify-between rounded-xl p-4 hover:bg-gray-100 dark:hover:bg-white/5″ > <div class=”flex gap-4″> <div class=”flex-shrink-0″> <img class=”h-12 w-12 rounded-full” alt=”” src=”https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80″ /> </div> <div class=”w-full text-sm leading-6″> <a class=”font-semibold text-gray-900 dark:text-white” href=”#” ><span class=”absolute inset-0 rounded-xl” aria-hidden=”true”></span>Hector Adams</a > <div class=”text-gray-500″>VP, Marketing</div> </div> </div> <a class=”group/edit invisible relative flex items-center rounded-full py-1 pr-3 pl-4 text-sm whitespace-nowrap text-gray-500 transition group-hover/item:visible hover:bg-gray-200 dark:text-gray-400″ href=”#” ><span class=”font-semibold transition group-hover/edit:text-gray-700″>Call</span ><svg class=”mt-px h-5 w-5 text-gray-400 transition group-hover/edit:translate-x-0.5 group-hover/edit:text-gray-500″ viewBox=”0 0 20 20″ fill=”currentColor” > <path fill-rule=”evenodd” d=”M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z” clip-rule=”evenodd” ></path></svg ></a> </li> <li class=”group/item relative flex items-center justify-between rounded-xl p-4 hover:bg-gray-100 dark:hover:bg-white/5″ > <div class=”flex gap-4″> <div class=”flex-shrink-0″> <img class=”h-12 w-12 rounded-full” alt=”” src=”https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80″ /> </div> <div class=”w-full text-sm leading-6″> <a class=”font-semibold text-gray-900 dark:text-white” href=”#” ><span class=”absolute inset-0 rounded-xl” aria-hidden=”true”></span>Blake Alexander</a > <div class=”text-gray-500″>Account Coordinator</div> </div> </div> <a class=”group/edit invisible relative flex items-center rounded-full py-1 pr-3 pl-4 text-sm whitespace-nowrap text-gray-500 transition group-hover/item:visible hover:bg-gray-200 dark:text-gray-400″ href=”#” ><span class=”font-semibold transition group-hover/edit:text-gray-700″>Call</span ><svg class=”mt-px h-5 w-5 text-gray-400 transition group-hover/edit:translate-x-0.5 group-hover/edit:text-gray-500″ viewBox=”0 0 20 20″ fill=”currentColor” > <path fill-rule=”evenodd” d=”M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z” clip-rule=”evenodd” ></path></svg ></a> </li> </ul> </div> </div> <!– Styling based on parent state –> <h3 class=”text-gray mt-4 text-lg”>Styling based on sibling state</h3> <div class=”py-0 not-prose overflow-auto rounded-lg bg-white outline outline-white/5 dark:bg-gray-950/50 p-8″ > <div class=”mx-auto max-w-md border-x border-x-gray-200 px-6 pt-6 pb-5 dark:border-x-gray-800 dark:bg-gray-950/10″ > <form> <div> <label for=”email-2″ class=”block text-sm font-medium text-gray-700 dark:text-gray-300″ >Email</label > <div class=”mt-1″> <input id=”email-2″ class=”peer block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm invalid:border-pink-500 invalid:text-pink-600 focus:border-sky-500 focus:outline focus:outline-sky-500 focus:invalid:border-pink-500 focus:invalid:outline-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none sm:text-sm” placeholder=”you@example.com” type=”email” value=”george@krugerindustrial.” name=”email” /> <p class=”invisible mt-2 text-sm text-pink-600 peer-invalid:visible”> Please provide a valid email address. </p> </div> </div> </form> </div> </div> <!– Differentiating peers –> <h3 class=”text-gray mt-4 text-lg”>Differentiating peers</h3> <div class=”py-0 not-prose overflow-auto rounded-lg bg-white outline outline-white/5 dark:bg-gray-950/50 p-8″ > <div class=”px-4″> <fieldset class=”mx-auto max-w-md border-x border-x-gray-200 p-8 text-sm text-gray-700 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-gray-100″ > <div class=”mb-6 border-b border-gray-200 pb-2 text-base font-semibold dark:border-gray-800″> Published status </div> <input id=”draft” class=”peer/draft form-radio mr-2 mb-0.5 border-gray-300 text-sky-400 focus:ring-sky-400″ type=”radio” checked=”” name=”status” /><label class=”font-medium peer-checked/draft:text-sky-500″ for=”draft”>Draft</label ><input id=”published” class=”peer/published form-radio mr-2 mb-0.5 ml-4 border-gray-300 text-sky-400 focus:ring-sky-400″ type=”radio” name=”status” /><label class=”font-medium peer-checked/published:text-sky-500″ for=”published” >Published</label > <div class=”mt-4 hidden text-gray-500 peer-checked/draft:block dark:text-gray-400″> Drafts are only visible to administrators. </div> <div class=”mt-4 hidden text-gray-500 peer-checked/published:block dark:text-gray-400″> Your post will be publicly visible on your site. </div> </fieldset> </div> </div> <!– Arbitrary peers –> <h3 class=”text-gray mt-4 text-lg”>Arbitrary peers</h3> <form> <label for=”email-peers”>Email:</label> <input id=”email-peers” name=”email-peers” type=”email” class=”is-dirty peer block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm invalid:border-pink-500 invalid:text-pink-600 focus:border-sky-500 focus:outline focus:outline-sky-500 focus:invalid:border-pink-500 focus:invalid:outline-pink-500 disabled:border-gray-200 disabled:bg-gray-50 disabled:text-gray-500 disabled:shadow-none sm:text-sm” required /> <div class=”peer-[.is-dirty]:peer-required:block hidden”>This field is required.</div> <button type=”submit” class=”rounded-full bg-indigo-600 px-5 py-2 text-sm leading-5 font-semibold text-white hover:not-focus:bg-indigo-700 focus:outline focus:outline-violet-300 active:bg-violet-700″ tabindex=”0″ > Submit </button> <!– … –> </form> </section> </div> </main>