-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
1 lines (1 loc) · 27.7 KB
/
index.html
1
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"><title>Untitled UI Dev</title><meta name="description" content="A light foundation for your next frontend project based on webpack."><link rel="stylesheet" href="https://rsms.me/inter/inter.css"><script defer="defer" src="js/850.b5fc2cce.js"></script><script defer="defer" src="js/app.3355d29b.js"></script><link href="css/app.3355d29b.css" rel="stylesheet"></head><body class="antialiased font-sans i2c-beta overflow-hidden"><div class="flex"><aside class="w-80" aria-label="Sidebar"><div class="overflow-y-auto h-full shadow-xl dark:shadow-none py-4 px-3 bg-white dark:bg-gray-800"><a href="https://flowbite.com" class="flex items-center pl-2.5 mb-5"><img src="https://uploads-ssl.webflow.com/610cd7653a09e982e0e10c54/6245323beb39aceeab29467e_logomark.svg" class="h-6 mr-3 sm:h-7" alt="Flowbite Logo"> <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Untitled-UI</span></a><ul class="space-y-2"><li><a href="#" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"><svg class="w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10a8 8 0 018-8v8h8a8 8 0 11-16 0z"></path><path d="M12 2.252A8.014 8.014 0 0117.748 8H12V2.252z"></path></svg> <span class="ml-3">Dashboard</span></a></li><li><a href="#i2c-tags" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"><svg class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg> <span class="flex-1 ml-3 whitespace-nowrap">Forms</span> <span class="inline-flex justify-center items-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-300">Struts</span></a></li><li><a href="#i2c-dialog" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"><svg class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M8.707 7.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l2-2a1 1 0 00-1.414-1.414L11 7.586V3a1 1 0 10-2 0v4.586l-.293-.293z"></path><path d="M3 5a2 2 0 012-2h1a1 1 0 010 2H5v7h2l1 2h4l1-2h2V5h-1a1 1 0 110-2h1a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V5z"></path></svg> <span class="flex-1 ml-3 whitespace-nowrap">Dialog</span> <span class="inline-flex justify-center items-center p-3 ml-3 w-3 h-3 text-sm font-medium text-indigo-600 bg-indigo-200 rounded-full dark:bg-indigo-900 dark:text-indigo-200">1</span></a></li><li><a href="#i2c-shadows" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"><svg class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg> <span class="flex-1 ml-3 whitespace-nowrap">Shadows</span></a></li><li><a href="#i2c-button" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"><svg class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd"></path></svg> <span class="flex-1 ml-3 whitespace-nowrap">Buttons</span></a></li><li><a href="#i2c-Dropdowns" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"><svg class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clip-rule="evenodd"></path></svg> <span class="flex-1 ml-3 whitespace-nowrap">Dropdowns</span></a></li><li><a href="#i2c-typography" class="flex items-center p-2 text-base font-normal text-gray-900 rounded-lg dark:text-white hover:bg-gray-100 dark:hover:bg-gray-700"><svg class="flex-shrink-0 w-6 h-6 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5 4a3 3 0 00-3 3v6a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H5zm-1 9v-1h5v2H5a1 1 0 01-1-1zm7 1h4a1 1 0 001-1v-1h-5v2zm0-4h5V8h-5v2zM9 8H4v2h5V8z" clip-rule="evenodd"></path></svg> <span class="flex-1 ml-3 whitespace-nowrap">Typography</span></a></li></ul></div></aside><main class="overflow-auto w-full h-screen"><div class="container"><div class="py-6 px-6"><section role="presentation" id="i2c-theme-switcher"><h1 class="text-4xl font-bold mb-10">Theme Switcher (Local Storage)</h1><div class="space-x-10 lg:pb-16 pt-0 lg:px-0"><div class="mt-4 space-y-4"><div class="flex items-center"><input id="lightBG" name="theme" type="radio" value="light" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"> <label for="lightBG" class="ml-3 block text-sm font-medium text-gray-700">Light</label></div><div class="flex items-center"><input id="darkTheme" name="theme" type="radio" value="dark" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"> <label for="darkTheme" class="ml-3 block text-sm font-medium text-gray-700">Dark</label></div></div><div class="mt-4 space-y-4"><div class="flex items-center"><input id="bg-white" name="changeBG" type="radio" value="white" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"> <label for="bg-white" class="ml-3 block text-sm font-medium text-gray-700">Background White</label></div><div class="flex items-center"><input id="bg-gray" name="changeBG" type="radio" value="gray" class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300"> <label for="bg-gray" class="ml-3 block text-sm font-medium text-gray-700">Background Gray</label></div></div></div></section><section role="presentation" id="i2c-tags"><h1 class="text-4xl font-bold mb-10">s:text (Struts 2)</h1><p class="text-slate-600/75">The tags are designed to display dynamic data. To create a input field that displays the property “postalCode”, we’d pass the String “postalCode” to the textfield tag.</p><div class="py-16"><div class="grid md:grid-cols-5 gap-4"><div><div class="field label-slide"><label id="label_8299" for="userId">User ID</label><div class="relative"><input name="userId" id="userId" autocomplete="off" placeholder="" class="form-control input__field input__field--madoka ss-field"> <a href="#" class="link"><span class="" id="label_7359" aria-hidden="true">Forgot?</span> <span class="sr-only">forgot user id</span></a></div></div></div><div><div class="field label-slide"><label for="errorFieldCase">User ID</label><div class="relative"><input name="userId" id="errorFieldCase" autocomplete="off" placeholder="" class="form-control ss-field error-field"> <a href="#" class="link"><span class="" id="label_7359" aria-hidden="true">Forgot?</span> <span class="sr-only">forgot user id</span></a></div></div></div><div><div class="chosen-field"><label for="country" class="chosen-label">Chosen Dropdown</label> <select id="country" class="select mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"><option value=""></option><option value="United States">United States</option><option value="United Kingdom">United Kingdom</option><option value="Afghanistan">Afghanistan</option><option value="Aland Islands">Aland Islands</option><option value="Albania">Albania</option><option value="Algeria">Algeria</option><option value="American Samoa">American Samoa</option><option value="Andorra">Andorra</option></select></div></div><div><div class="form-group"><label for="datepickerBeta" class="block text-sm font-medium text-gray-700">Datepicker</label><div class="relative"><input id="datepickerBeta" placeholder="Select Date" autocomplete="off" class="datepicker py-2 px-2 text-gray-900 mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border border-gray-300 rounded-lg pr-10"><div class="flex absolute right-2 bottom-0 top-0 items-center pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div></div><div><div class="field"><label for="tags" class="block text-sm font-medium text-gray-700">Tags:</label> <input placeholder="Autocomplete" id="tags" class="ss-field"></div></div></div></div><div class="pb-16"><div class="grid md:grid-cols-3 gap-0 md:divide-x divide-gray-300 border border-gray-300 shadow-lg"><div class="filter-select"><label for="filters" class="chosen-label">Chosen Filter</label> <select id="filters" class="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"><option value="">Select Filter</option><option value="United States">United States</option><option value="United Kingdom">United Kingdom</option><option value="Afghanistan">Afghanistan</option><option value="Aland Islands">Aland Islands</option><option value="Albania">Albania</option><option value="Algeria">Algeria</option><option value="American Samoa">American Samoa</option><option value="Andorra">Andorra</option></select></div><div class="filter-select"><label for="datepickerBeta" class="block text-sm font-medium text-gray-700">Datepicker</label><div class="relative"><input id="datepickerBeta2" placeholder="Select Date" autocomplete="off" class="datepicker py-2 px-2 text-gray-900 mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm sm:text-sm border border-gray-300 rounded-lg pr-10"><div class="flex absolute right-6 bottom-0 top-0 items-center pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></div></div></div><div class="filter-select"><div class="field label-slide"><label id="label_8299" for="userId">User ID</label> <input name="userId" id="userId" autocomplete="off" placeholder="Add User ID" class="ss-field"></div></div></div></div></section><section role="presentation" id="i2c-dialog"><h1 class="text-4xl font-bold mb-10">Dialog</h1><p class="text-slate-600/75">The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default.</p><div class="py-16"><button type="button" class="openDialog inline-flex items-center justify-center h-9 px-3.5 px-5 py-3 text-sm shadow-xs font-medium rounded-lg border border-violet-700 text-white hover:bg-violet-600 bg-violet-700 focus:outline-none focus:ring-4 focus:ring-violet-100">Open Dialog</button><div id="ch32Dialog" title="Blog post published"><div class="overflow-auto relative"><div class="overscroll-contain overflow-auto"><p>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></div></div></div></div></section><section role="presentation" id="i2c-shadows"><h1 class="text-4xl font-bold mb-10">Shadows</h1><p class="text-slate-600/75">Shadows allow you to add depth and realism to designs by positioning elements on a z-axis.</p><div class="flex flex-row space-x-10 font-mono text-white text-sm font-bold leading-6 py-16"><div class="text-gray-900"><div class="font-sans sm:mb-8 font-medium">.shadow-sm</div><div class="w-32 h-32 rounded-lg flex items-center justify-center bg-white shadow-sm"></div></div><div class="text-gray-900"><div class="font-sans sm:mb-8 font-medium">.shadow-md</div><div class="w-32 h-32 rounded-lg flex items-center justify-center bg-white shadow-md"></div></div><div class="text-gray-900"><div class="font-sans sm:mb-8 font-medium">.shadow-lg</div><div class="w-32 h-32 rounded-lg flex items-center justify-center bg-white shadow-lg"></div></div><div class="text-gray-900"><div class="font-sans sm:mb-8 font-medium">.shadow-xl</div><div class="w-32 h-32 rounded-lg flex items-center justify-center bg-white shadow-xl"></div></div><div class="text-gray-900"><div class="font-sans sm:mb-8 font-medium">.shadow-2xl</div><div class="w-32 h-32 rounded-lg flex items-center justify-center bg-white shadow-2xl"></div></div><div class="text-gray-900"><div class="font-sans sm:mb-8 font-medium">.shadow-3xl</div><div class="w-32 h-32 rounded-lg flex items-center justify-center bg-white shadow-3xl"></div></div></div></section><section role="presentation" id="i2c-button"><h1 class="text-4xl font-bold mb-10">Buttons</h1><p class="text-slate-600/75">Buttons communicate actions that users can take. They are typically placed on forms Or anywhere you want to give users a choice.</p><div><div class="flex flex-row space-x-10 mt-16"><button type="button" class="btn btn-sm border-gray-300 text-gray-700 hover:bg-gray-50 bg-white focus:outline-none focus:ring-4 focus:ring-gray-100">Button CTA</button> <button type="button" class="btn btn-md border-gray-300 text-gray-700 hover:bg-gray-50 bg-white focus:outline-none focus:ring-4 focus:ring-gray-100">Button CTA</button> <button type="button" class="h-11 inline-flex items-center shadow-xs justify-center px-5 py-3 border border-gray-300 text-base font-medium rounded-lg text-gray-700 hover:bg-gray-50 bg-white focus:outline-none focus:ring-4 focus:ring-gray-100">Button CTA</button> <button type="button" class="h-12 inline-flex items-center justify-center shadow-xs px-5 py-3 border border-gray-300 text-base font-medium rounded-lg text-gray-700 hover:bg-gray-50 bg-white focus:outline-none focus:ring-4 focus:ring-gray-100">Button CTA</button> <button type="button" class="h-14 inline-flex items-center justify-center shadow-xs px-5 py-3 border border-gray-300 text-base font-medium rounded-lg text-gray-700 hover:bg-gray-50 bg-white focus:outline-none focus:ring-4 focus:ring-gray-100">Button CTA</button></div><div class="flex flex-row space-x-10 mt-16"><button type="button" class="inline-flex items-center justify-center h-9 px-3.5 px-5 py-3 text-sm shadow-xs font-medium rounded-lg border border-violet-700 text-white hover:bg-violet-600 bg-violet-700 focus:outline-none focus:ring-4 focus:ring-violet-100">Button CTA</button> <button type="button" class="h-10 inline-flex shadow-xs items-center justify-center px-5 py-3 text-sm font-medium rounded-lg border border-violet-700 text-white hover:bg-violet-600 bg-violet-700 focus:outline-none focus:ring-4 focus:ring-violet-100">Button CTA</button> <button type="button" class="h-11 inline-flex items-center shadow-xs justify-center px-5 py-3 text-base font-medium rounded-lg border border-violet-700 text-white hover:bg-violet-600 bg-violet-700 focus:outline-none focus:ring-4 focus:ring-violet-100">Button CTA</button> <button type="button" class="h-12 inline-flex items-center justify-center shadow-xs px-5 py-3 text-base font-medium rounded-lg border border-violet-700 text-white hover:bg-violet-600 bg-violet-700 focus:outline-none focus:ring-4 focus:ring-violet-100">Button CTA</button> <button type="button" class="h-14 inline-flex items-center justify-center shadow-xs px-5 py-3 text-base font-medium rounded-lg border border-violet-700 text-white hover:bg-violet-600 bg-violet-700 focus:outline-none focus:ring-4 focus:ring-violet-100">Button CTA</button></div><div class="flex flex-row space-x-10 mt-16 mb-16"><a class="group inline-flex items-center h-9 px-3.5 px-5 py-3 rounded-full text-sm font-medium whitespace-nowrap focus:outline-none bg-green-50 text-green-600 hover:bg-green-600 border border-green-600 hover:text-white focus:ring-4 focus:ring-green-100" href="/docs/responsive-design">Button CTA <span class="sr-only">, responsive design</span> <svg class="overflow-visible ml-3 text-green-600 group-hover:text-white dark:text-slate-500 dark:group-hover:text-slate-400" width="3" height="6" viewBox="0 0 3 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0L3 3L0 6"></path></svg> </a><a class="group inline-flex items-center h-9 px-3.5 px-5 py-3 rounded-full text-sm font-medium whitespace-nowrap focus:outline-none bg-violet-50 text-violet-600 hover:bg-violet-600 border border-violet-600 hover:text-white focus:ring-4 focus:ring-violet-100" href="/docs/responsive-design">Button CTA <span class="sr-only">, responsive design</span> <svg class="overflow-visible ml-3 text-violet-600 group-hover:text-white dark:text-slate-500 dark:group-hover:text-slate-400" width="3" height="6" viewBox="0 0 3 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0L3 3L0 6"></path></svg> </a><a class="group inline-flex items-center h-9 px-3.5 px-5 py-3 rounded-full text-sm font-medium whitespace-nowrap focus:outline-none bg-rose-50 text-rose-600 hover:bg-rose-600 border border-rose-600 hover:text-white focus:ring-4 focus:ring-rose-100" href="/docs/responsive-design">Button CTA <span class="sr-only">, responsive design</span> <svg class="overflow-visible ml-3 text-rose-600 group-hover:text-white dark:text-slate-500 dark:group-hover:text-slate-400" width="3" height="6" viewBox="0 0 3 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M0 0L3 3L0 6"></path></svg> </a><a class="group inline-flex items-center h-9 px-3.5 px-5 py-3 rounded-full text-sm font-medium whitespace-nowrap focus:outline-none bg-amber-50 text-amber-600 hover:bg-amber-600 border border-amber-600 hover:text-white focus:ring-4 focus:ring-amber-100" href="/docs/responsive-design"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/></svg> Settings <span class="sr-only">, responsive design</span></a></div></div></section><section role="presentation" id="i2c-Dropdowns"><h1 class="text-4xl font-bold mb-10">Dropdowns</h1><p class="text-slate-600/75">Dropdowns are used to group together actions in a subview. They’re useful for hiding menus or when you have multiple actions that cannot be separate buttons.</p><div class="space-x-10 text-white text-sm leading-6 py-16 text-center"><div x-data="Components.menu({ open: true })" x-init="init()" @keydown.escape.stop="open = false; focusButton()" @click.away="onClickAway($event)" class="relative inline-block text-left"><div><button type="button" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-violet-500" id="menu-button" x-ref="button" @click="onButtonClick()" @keyup.space.prevent="onButtonEnter()" @keydown.enter.prevent="onButtonEnter()" aria-expanded="false" aria-haspopup="true" x-bind:aria-expanded="open" @keydown.arrow-up.prevent="onArrowUp()" @keydown.arrow-down.prevent="onArrowDown()">Options <svg class="-mr-1 ml-2 h-5 w-5" x-description="Heroicon name: solid/chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg></button></div><div x-show="open" role="menu" class="origin-top-right absolute right-0 mt-2 w-70 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 divide-y divide-gray-100 focus:outline-none" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" x-ref="menu-items" x-description="Dropdown menu, show/hide based on menu state." x-bind:aria-activedescendant="activeDescendant" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1" @keydown.arrow-up.prevent="onArrowUp()" @keydown.arrow-down.prevent="onArrowDown()" @keydown.tab="open = false" @keydown.enter.prevent="open = false; focusButton()" @keyup.space.prevent="open = false; focusButton()" style="display:none"><div role="doc-introduction" class="flex items-center px-4 py-3"><div class="flex-shrink-0 h-10 w-10"><img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60" alt=""></div><div class="ml-3"><div class="text-sm font-medium text-gray-700">Jane Cooper</div><div class="text-sm text-gray-500">jane.cooper@example.com</div></div></div><div class="py-2 px-2" role="none"><a href="#" class="block px-4 py-2 text-sm text-gray-700 rounded-md" x-state:on="Active" x-state:off="Not Active" :class="{ 'bg-violet-50 text-violet-700': activeIndex === 0, 'text-gray-700': !(activeIndex === 0) }" role="menuitem" tabindex="-1" id="menu-item-0" @mouseenter="activeIndex = 0" @mouseleave="activeIndex = -1" @click="open = false; focusButton()">Edit </a><a href="#" class="block px-4 py-2 text-sm text-gray-700 rounded-md" :class="{ 'bg-violet-50 text-violet-700': activeIndex === 1, 'text-gray-700': !(activeIndex === 1) }" role="menuitem" tabindex="-1" id="menu-item-1" @mouseenter="activeIndex = 1" @mouseleave="activeIndex = -1" @click="open = false; focusButton()">Duplicate</a></div><div class="py-2 px-2" role="none"><a href="#" class="block px-4 py-2 text-sm text-gray-700 rounded-md" :class="{ 'bg-violet-50 text-violet-700': activeIndex === 2, 'text-gray-700': !(activeIndex === 2) }" role="menuitem" tabindex="-1" id="menu-item-2" @mouseenter="activeIndex = 2" @mouseleave="activeIndex = -1" @click="open = false; focusButton()">Archive</a> <a href="#" class="block px-4 py-2 text-sm text-gray-700 rounded-md" :class="{ 'bg-violet-50 text-violet-700': activeIndex === 3, 'text-gray-700': !(activeIndex === 3) }" role="menuitem" tabindex="-1" id="menu-item-3" @mouseenter="activeIndex = 3" @mouseleave="activeIndex = -1" @click="open = false; focusButton()">Move</a></div><div class="py-2 px-2" role="none"><a href="#" class="block px-4 py-2 text-sm text-gray-700 rounded-md" :class="{ 'bg-violet-50 text-violet-700': activeIndex === 4, 'text-gray-700': !(activeIndex === 4) }" role="menuitem" tabindex="-1" id="menu-item-4" @mouseenter="activeIndex = 4" @mouseleave="activeIndex = -1" @click="open = false; focusButton()">Share</a> <a href="#" class="block px-4 py-2 text-sm text-gray-700 rounded-md" :class="{ 'bg-violet-50 text-violet-700': activeIndex === 5, 'text-gray-700': !(activeIndex === 5) }" role="menuitem" tabindex="-1" id="menu-item-5" @mouseenter="activeIndex = 5" @mouseleave="activeIndex = -1" @click="open = false; focusButton()">Add to favorites</a></div><div class="py-2 px-2" role="none"><a href="#" class="block px-4 py-2 text-sm text-gray-700 rounded-md" :class="{ 'bg-violet-50 text-violet-700': activeIndex === 6, 'text-gray-700': !(activeIndex === 6) }" role="menuitem" tabindex="-1" id="menu-item-6" @mouseenter="activeIndex = 6" @mouseleave="activeIndex = -1" @click="open = false; focusButton()">Delete</a></div></div></div></div></section><section role="presentation" id="i2c-typography"><h1 class="text-4xl font-bold mb-10">Typography</h1><p class="text-slate-600/75">Our design system leverages a purposeful set of typographic styles. We’ve stress-tested this typographic scale across dozens of projects to make sure it’s robust enough to use across (almost) any project, while remaining as accessible as possible for everyone.</p><div class="space-x-10 text-white text-sm font-bold leading-6 py-16"><table class="min-w-full text-slate-900"><tr><td class="py-2" colspan="5"><div class="block text-xs font-normal"><span class="block">The quick brown fox jumps over the lazy dog.</span></div></td></tr><tr><td class="py-2" colspan="5"><span class="block text-sm font-normal">The quick brown fox jumps over the lazy dog.</span></td></tr><tr><td class="py-2" colspan="5"><span class="block text-base font-normal">The quick brown fox jumps over the lazy dog.</span></td></tr><tr><td class="py-2" colspan="5"><span class="block text-lg font-medium">The quick brown fox jumps over the lazy dog.</span></td></tr><tr><td class="py-2"><span class="block text-xl font-medium">The quick brown fox jumps over the lazy dog.</span></td></tr><tr><td colspan="5" class="py-2"><span class="block text-2xl font-medium">The quick brown fox jumps over the lazy dog.</span></td></tr><tr><td class="py-2" colspan="5"><span class="block font-medium text-3xl">The quick brown fox jumps over the lazy dog.</span></td></tr><tr><td class="py-2" colspan="5"><span class="block font-medium text-4xl">The quick brown fox jumps over the lazy dog.</span></td></tr><tr><td class="py-2" colspan="5"><span class="block font-medium text-5xl">The quick brown fox jumps over the lazy dog.</span></td></tr><tr><td class="py-2" colspan="5"><span class="block font-medium text-6xl">The quick brown fox jumps over the lazy dog.</span></td></tr><tr><td class="py-2" colspan="5"><span class="block font-medium text-7xl">The quick brown fox jumps over the lazy dog.</span></td></tr></table></div></section></div></div></main><p id="results" style="display:none!important"></p></div><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script></body></html>