<!– ### content ### –> <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-elements –> <section class=”relative w-full flex flex-col items-start gap-4 mt-8″> <h2 class=”text-black text-xl”>Pseudo-elements</h2> <a href=”https://tailwindcss.com/docs/hover-focus-and-other-states#pseudo-elements” target=”_blank” rel=”noopener” >Pseudo-elements</a > <h3 class=”text-gray mt-4 text-lg”>::before and ::after</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-sm border-x border-x-gray-200 px-6 pt-6 pb-5 dark:border-x-gray-800 dark:bg-gray-950/10″ > <form> <label class=”block” ><span class=”block text-sm font-medium text-gray-700 after:ml-0.5 after:text-red-500 after:content-[‘*’] dark:text-white” >Email</span ><input id=”email-3″ class=”mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-sky-500 focus:outline focus:outline-sky-500 sm:text-sm” placeholder=”you@example.com” type=”email” name=”email” /></label> </form> </div> </div> <hr /> <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-6″> <div class=”mx-auto max-w-lg border-x border-x-gray-200 px-6 py-8 dark:border-x-gray-800 dark:bg-gray-950/10″ > <blockquote class=”text-center text-2xl font-semibold text-gray-900 italic dark:text-white”> When you look <span class=”relative inline-block before:absolute before:-inset-1 before:block before:-skew-y-3 before:bg-pink-500″ ><span class=”relative text-white dark:text-gray-950″>annoyed</span></span > all the time, people think that you’re busy. </blockquote> </div> </div> </div> <!– <=== ::before and ::after –> <h3 class=”text-gray mt-4 text-lg”>::placeholder</h3> <div class=”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-sm”> <form> <label class=”relative block” ><span class=”absolute inset-y-0 left-0 flex items-center pl-2″ ><svg class=”h-5 w-5 fill-gray-300″ viewBox=”0 0 20 20″> <path fill-rule=”evenodd” d=”M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z” clip-rule=”evenodd” ></path></svg></span ><span class=”sr-only”>Search</span ><input class=”block w-full rounded-md border border-gray-300 py-2 pr-3 pl-9 text-gray-700 shadow-sm placeholder:text-green/60 placeholder:italic focus:border-sky-500 focus:outline focus:outline-sky-500 sm:text-sm dark:border-gray-600 dark:text-white” placeholder=”Search for anything…” type=”text” name=”search” /></label> </form> </div> </div> <!– <=== ::placeholder –> <h3 class=”text-gray mt-4 text-lg”>::file</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-6″> <div class=”mx-auto max-w-sm border-x border-x-gray-200 px-6 py-8 dark:border-x-gray-800 dark:bg-gray-950/10″ > <form class=”flex items-center space-x-6″> <div class=”shrink-0″> <img class=”h-16 w-16 rounded-full object-cover” alt=”Current profile photo” src=”https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1361&q=80″ /> </div> <label class=”block” ><span class=”sr-only”>Choose profile photo</span ><input class=”block w-full text-sm text-gray-500 file:mr-4 file:rounded-full file:border-0 file:bg-violet-50 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-violet-700 hover:file:bg-violet-100 dark:file:bg-violet-600 dark:file:text-violet-100 dark:hover:file:bg-violet-500″ type=”file” /></label> </form> </div> </div> </div> <!– <=== ::file –> <h3 class=”text-gray mt-4 text-lg”>::marker</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-6″> <div class=”mx-auto max-w-sm border-x border-x-gray-200 px-8 py-8 dark:border-x-gray-800 dark:bg-gray-950/10″ > <h2 id=”ingredients”><a href=”#ingredients” class=”anchor”>Ingredients</a></h2> <ul role=”list” class=”mt-3 list-disc space-y-3 pl-5 text-gray-500 marker:text-sky-400 dark:text-gray-400″ > <li>5 cups chopped Porcini mushrooms</li> <li>1/2 cup of olive oil</li> <li>3lb of celery</li> </ul> </div> </div> </div> <!– <=== ::marker –> <h3 class=”text-gray mt-4 text-lg”>::selection</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-6″> <div class=”mx-auto max-w-lg border-x border-x-gray-200 px-6 py-8 text-gray-700 selection:bg-fuchsia-300 selection:text-fuchsia-900 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-gray-300″ > <p> So I started to walk into the water. I won’t lie to you boys, I was terrified. But I pressed on, and as I made my way past the breakers a strange calm came over me. I don’t know if it was divine intervention or the kinship of all living things but I tell you Jerry at that moment, I <em>was</em> a marine biologist. </p> </div> </div> </div> <!– <=== ::selection –> <h3 class=”text-gray mt-4 text-lg”>::first-line and ::first-letter</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-6″> <div class=”mx-auto max-w-lg border-x border-x-gray-200 px-6 py-8 font-serif text-gray-700 dark:border-x-gray-800 dark:bg-gray-950/10 dark:text-gray-200″ > <p class=”first-letter:float-left first-letter:mr-3 first-letter:text-7xl first-letter:leading-none first-letter:font-bold first-letter:text-gray-900 first-line:tracking-widest first-line:uppercase dark:first-letter:text-white” > Well, let me tell you something, funny boy. Y’know that little stamp, the one that says “New York Public Library”? Well that may not mean anything to you, but that means a lot to me. One whole hell of a lot. </p> <p class=”mt-6″> Sure, go ahead, laugh if you want to. I’ve seen your type before: Flashy, making the scene, flaunting convention. Yeah, I know what you’re thinking. What’s this guy making such a big stink about old library books? Well, let me give you a hint, junior. </p> </div> </div> </div> <!– <=== ::first-line and ::first-letter –> <h3 class=”text-gray mt-4 text-lg”>::backdrop</h3> <div class=”py-0 not-prose overflow-auto rounded-lg bg-white outline outline-white/5 dark:bg-gray-950/50 p-8″ > <dialog class=”fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 backdrop:bg-pink/50″> <!– Modal content –> <div class=”relative bg-white rounded-lg shadow-sm dark:bg-gray-700″> <!– Modal header –> <div class=”flex items-center justify-between p-4 md:p-5 border-b rounded-t dark:border-gray-600 border-gray-200″ > <h3 class=”text-xl font-semibold text-gray-900 dark:text-white”>Sign in to our platform</h3> <button type=”button” class=”end-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white” data-modal-hide=”authentication-modal” > <p>X</p> <span class=”sr-only”>Close modal</span> </button> </div> <!– Modal body –> <div class=”p-4 md:p-5″> <form class=”flex flex-col gap-y-4″ action=”#”> <div> <label for=”email” class=”block mb-2 text-sm font-medium text-gray-900 dark:text-white” >Your email</label > <input type=”email” name=”email” id=”email” class=”bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white” placeholder=”name@company.com” required=”” /> </div> <div> <label for=”password” class=”block mb-2 text-sm font-medium text-gray-900 dark:text-white” >Your password</label > <input type=”password” name=”password” id=”password” placeholder=”••••••••” class=”bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white” required=”” /> </div> <div class=”flex justify-between”> <div class=”flex items-start”> <div class=”flex items-center h-5″> <input id=”remember” type=”checkbox” value=”” class=”w-4 h-4 border border-gray-300 rounded-sm bg-gray-50 focus:ring-3 focus:ring-blue-300 dark:bg-gray-600 dark:border-gray-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800″ required=”” /> </div> <label for=”remember” class=”ms-2 text-sm font-medium text-gray-900 dark:text-gray-300″ >Remember me</label > </div> <a href=”#” class=”text-sm text-blue-700 hover:underline dark:text-blue-500″ >Lost Password?</a > </div> <button type=”submit” class=”w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800″ > Login to your account </button> <div class=”text-sm font-medium text-gray-500 dark:text-gray-300″> Not registered? <a href=”#” class=”text-blue-700 hover:underline dark:text-blue-500″>Create account</a> </div> </form> </div> </div> </dialog> <button class=”rounded-full bg-sky-500 px-5 py-2 text-sm leading-5 font-semibold text-white hover:bg-sky-700″ > Show the dialog </button> </div> <!– <=== ::backdrop –> </section> </div> </main>