\n" user="" w-8="" rounded-full\"="" x-show="\"open\"" x-transition:enter="\"transition" x-transition:enter-start="\"transform" x-transition:enter-end="\"transform" x-transition:leave="\"transition" x-transition:leave-start="\"transform" x-transition:leave-end="\"transform" w-48="" py-1="" state.\"="" x-bind:aria-activedescendant="\"activeDescendant\"" @keydown.tab="\"open" false\"="" focusbutton()\">\n="" active\"="" 'bg-gray-100':="" 0)\"="" focusbutton()\">your="" profile<="" 1="" 1)\"="" focusbutton()\">settings<="" 2="" 2)\"="" pb-3="" pt-2\">\n="" text-base="" nav>\n\n="" body>","previewhtml":null,"snippets":[{"language":"html","highlight":"html","label":"html","snippet":"<nav="" icon="" closed.\n\n="" \"hidden\",="" closed:="" \"block\"\n="" 5.25h16.5\"="" open.\n\n="" \"block\",="" \"hidden\"\n="" 12\"="" current:="" \"bg-gray-900="" text-white\",="" \"text-gray-300="" hover:text-white\"="" bg-gray-900="" font-medium="" text-white\"="" text-gray-300="" hover:text-white\">team<="" hover:text-white\">projects<="" hover:text-white\">calendar<="" 0\"="" \"bg-gray-100\",="" \"\"="" state.="" nav>\n"},{"language":"react","highlight":"jsx","label":"react","snippet":"import="" disclosure,="" disclosurebutton,="" disclosurepanel,="" bars3icon,="" bellicon,="" xmarkicon="" outline'\n\nconst="" navigation="[\n" name:="" 'dashboard',="" href:="" '#',="" true="" },\n="" 'team',="" 'projects',="" 'calendar',="" },\n]\n\nfunction="" classnames(...classes)="" classes.filter(boolean).join('="" ')\n}\n\nexport="" <disclosure="" *="" button*="" }\n="" <disclosurebutton="" relative="" focus:ring-white\">\n="" -inset-0.5\"="" <bars3icon="" w-6="" group-data-[open]:hidden\"="" <xmarkicon="" group-data-[open]:block\"="" disclosurebutton>\n="" <img\n="" company\"\n="" w-auto\"\n="" {navigation.map((item)=">" key="{item.name}\n" 'page'="" undefined}\n="" item.current="" 'bg-gray-900="" text-white'="" 'text-gray-300="" hover:text-white',\n="" 'rounded-md="" font-medium',\n="" )}\n="" {item.name}\n="" ))}\n="" focus:ring-offset-gray-800\"\n="" -inset-1.5\"="" <bellicon="" rounded-full\"\n="" data-[focus]:bg-gray-100\">\n="" your="" profile\n="" <disclosurepanel="" <disclosurebutton\n="" disclosurepanel>\n="" disclosure>\n="" open="" v-if="\"!open\"" v-else="" company\"="" v-for="\"item" in="" navigation\"="" :key="\"item.name\"" :href="\"item.href\"" hover:text-white',="" font-medium']\"="" :aria-current="\"item.current" undefined\">{{="" item.name="" }}<="" 'bg-gray-100'="" '',="" text-gray-700']\">your="" text-gray-700']\">settings<="" text-gray-700']\">sign="" disclosure>\n<="" },\n]\n<="" script>"}],"largewidth":1280,"largeheight":192,"smallwidth":375,"smallheight":192,"smallscreenshoturl":"="" navbars.01-simple-dark-with-menu-button-on-left-xs.png","largescreenshoturl":"="" navbars.01-simple-dark-with-menu-button-on-left-xl.png","subcategory":{"name":"navbars","url":"="" navbars","category":{"name":"navigation","url":"="" components#product-application-ui-navigation","product":{"name":"application="" components#product-application-ui"}}}},{"name":"card="" footer="" page="" buttons","uuid":"69eb9381f977800aa890ce8f7d9e2d20","isnew":false,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":false,"iframehtml":"<!doctype="" py-6="" max-w-none\">\n="" shadow="" sm:rounded-lg\">\n="" <ul="" divide-gray-200="" opacity-25\">\n="" <li>\n="" py-4="" sm:px-6\">\n="" text-indigo-600\">back="" end="" developer<="" flex-shrink-0\">\n="" bg-green-50="" text-xs="" text-green-700="" ring-green-600="" 20\">full-time<="" text-gray-500\">\n="" 8a3="" 100-6="" 000="" 6zm14.5="" 9a2.5="" 2.5="" 100-5="" 5zm1.615="" 16.428a1.224="" 1.224="" 01-.569-1.175="" 6.002="" 0111.908="" 0c.058.467-.172.92-.57="" 1.174a9.953="" 9.953="" 017="" 18a9.953="" 01-5.385-1.572zm14.5="" 16h-.106c.07-.297.088-.611.048-.933a7.47="" 7.47="" 00-1.588-3.755="" 4.502="" 015.874="" 2.636.818.818="" 01-.36.98a7.465="" 7.465="" 0114.5="" 16z\"><="" engineering\n="" 18.933l.003.001c9.89="" 19.02="" 10="" 19="" 19s.11.02.308-.066l.002-.001.006-.003.018-.008a5.741="" 5.741="" 00.281-.14c.186-.096.446-.24.757-.433.62-.384="" 1.445-.966="" 2.274-1.765c15.302="" 14.988="" 17="" 12.493="" 9a7="" 7="" 103="" 9c0="" 3.492="" 1.698="" 5.988="" 3.355="" 7.584a13.731="" 13.731="" 002.273="" 1.765="" 11.842="" 00.976.544l.062.029.018.008.006.003zm10="" 11.25a2.25="" 2.25="" 100-4.5="" 4.5z\"="" remote\n="" li>\n="" text-indigo-600\">front="" text-indigo-600\">user="" interface="" designer<="" design\n="" ul>\n="" justify-between="" border-t="" border-gray-200="" py-3="" border="" border-gray-300="" hover:bg-gray-50\">previous<="" ml-3="" hover:bg-gray-50\">next<="" sm:flex="" sm:flex-1="" sm:items-center="" sm:justify-between\">\n="" <p="" text-gray-700\">\n="" showing\n="" space="" to\n="" of\n="" results\n="" p>\n="" -space-x-px="" shadow-sm\"="" aria-label="\"Pagination\">\n" rounded-l-md="" hover:bg-gray-50="" focus:z-20="" focus:outline-offset-0\">\n="" w-5\"="" 5.23a.75.75="" 01-.02="" 1.06l8.832="" 10l3.938="" 3.71a.75.75="" 11-1.04="" 1.08l-4.5-4.25a.75.75="" 010-1.08l4.5-4.25a.75.75="" 011.06.02z\"="" \"z-10="" bg-indigo-600="" focus-visible:outline="" focus-visible:outline-2="" focus-visible:outline-offset-2="" focus-visible:outline-indigo-600\",="" \"text-gray-900="" focus:outline-offset-0\"="" focus-visible:outline-indigo-600\">1<="" focus:outline-offset-0\">2<="" hidden="" focus:outline-offset-0="" md:inline-flex\">3<="" focus:outline-offset-0\">...<="" md:inline-flex\">8<="" focus:outline-offset-0\">9<="" focus:outline-offset-0\">10<="" rounded-r-md="" 14.77a.75.75="" 01.02-1.06l11.168="" 7.23="" 6.29a.75.75="" 111.04-1.08l4.5="" 4.25a.75.75="" 010="" 1.08l-4.5="" 01-1.06-.02z\"="" nav>\n="" chevronlefticon,="" chevronrighticon="" solid'\n\nconst="" items="[\n" id:="" 1,="" title:="" 'back="" developer',="" department:="" 'engineering',="" type:="" 'full-time',="" location:="" 'remote'="" 2,="" 'front="" 'user="" designer',="" 'design',="" },\n]\n\nexport="" hover:bg-gray-50\"\n="" previous\n="" next\n="" showing="" to="" of{'="" '}\n="" shadow-sm\">\n="" focus:outline-offset-0\"\n="" <chevronlefticon="" focus-visible:outline-indigo-600\"\n="" 1\n="" 2\n="" md:inline-flex\"\n="" 3\n="" ...\n="" 8\n="" 9\n="" 10\n="" <chevronrighticon="" {{="" '="" }}\n="" script>"}],"largewidth":1280,"largeheight":363,"smallwidth":375,"smallheight":365,"smallscreenshoturl":"="" pagination.01-card-footer-with-page-buttons-xs.png","largescreenshoturl":"="" pagination.01-card-footer-with-page-buttons-xl.png","subcategory":{"name":"pagination","url":"="" pagination","category":{"name":"navigation","url":"="" components#product-application-ui"}}}},{"name":"left-aligned","uuid":"d9372707af2e94e67936e94d7339cbb3","isnew":false,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":false,"iframehtml":"<!doctype="" py-12="" max-w-4xl\">\n="" sm:px-0\">\n="" <h3="" leading-7="" text-gray-900\">applicant="" information<="" h3>\n="" max-w-2xl="" leading-6="" text-gray-500\">personal="" details="" and="" application.<="" border-gray-100\">\n="" <dl="" divide-gray-100\">\n="" sm:grid="" sm:grid-cols-3="" sm:gap-4="" <dt="" text-gray-900\">full="" name<="" dt>\n="" <dd="" sm:col-span-2="" sm:mt-0\">margot="" foster<="" dd>\n="" text-gray-900\">application="" for<="" sm:mt-0\">backend="" text-gray-900\">email="" address<="" sm:mt-0\">margotfoster@example.com<="" text-gray-900\">salary="" expectation<="" sm:mt-0\">$120,000<="" text-gray-900\">about<="" sm:mt-0\">fugiat="" ipsum="" deserunt="" culpa="" aute="" sint="" do="" nostrud="" anim="" incididunt="" cillum="" consequat.="" excepteur="" qui="" aliquip="" consequat="" sint.="" sit="" mollit="" nulla="" ea="" officia="" proident.="" irure="" pariatur="" ad="" adipisicing="" reprehenderit="" eu.<="" text-gray-900\">attachments<="" sm:mt-0\">\n="" divide-gray-100="" border-gray-200\">\n="" <li="" pl-4="" pr-5="" leading-6\">\n="" w-0="" 4.379a3="" 00-4.242="" 0l-7="" 7a3="" 004.241="" 4.243h.001l.497-.5a.75.75="" 011.064="" 1.057l-.498.501-.002.002a4.5="" 4.5="" 01-6.364-6.364l7-7a4.5="" 016.368="" 6.36l-3.455="" 3.553a2.625="" 2.625="" 119.52="" 9.52l3.45-3.451a.75.75="" 111.061="" 1.06l-3.45="" 3.451a1.125="" 1.125="" 001.587="" 1.595l3.454-3.553a3="" 000-4.242z\"="" min-w-0="" gap-2\">\n="" font-medium\">resume_back_end_developer.pdf<="" text-gray-400\">2.4mb<="" text-indigo-600="" hover:text-indigo-500\">download<="" font-medium\">coverletter_back_end_developer.pdf<="" text-gray-400\">4.5mb<="" dl>\n="" body>","previewhtml":null,"snippets":[{"language":"html","highlight":"html","label":"html","snippet":"<div>\n="" paperclipicon="" fugiat="" excepteur\n="" nostrud\n="" eu.\n="" <paperclipicon="" hover:text-indigo-500\">\n="" download\n="" script>"}],"largewidth":1280,"largeheight":753,"smallwidth":375,"smallheight":997,"smallscreenshoturl":"="" description-lists.01-left-aligned-xs.png","largescreenshoturl":"="" description-lists.01-left-aligned-xl.png","subcategory":{"name":"description="" lists","url":"="" data-display="" description-lists","category":{"name":"data="" display","url":"="" components#product-application-ui-data-display","product":{"name":"application="" components#product-application-ui"}}}},{"name":"stacked","uuid":"1c3f9860d66ce5cd9fb35ba7fde6721a","isnew":false,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":false,"iframehtml":"<!doctype="" py-24="" sm:py-32="" max-w-2xl\">\n="" <form>\n="" border-gray-900="" pb-12\">\n="" <h2="" text-gray-900\">profile<="" h2>\n="" text-gray-600\">this="" information="" will="" be="" displayed="" publicly="" so="" careful="" what="" you="" share.<="" p>\n\n="" grid="" grid-cols-1="" gap-x-6="" gap-y-8="" sm:grid-cols-6\">\n="" <label="" for="\"username\"" text-gray-900\">username<="" label>\n="" focus-within:ring-2="" focus-within:ring-inset="" focus-within:ring-indigo-600="" sm:max-w-md\">\n="" select-none="" pl-3="" text-gray-500="" sm:text-sm\">workcation.com="" <input="" autocomplete="\"username\"" border-0="" bg-transparent="" py-1.5="" pl-1="" placeholder:text-gray-400="" focus:ring-0="" sm:text-sm="" sm:leading-6\"="" placeholder="\"janesmith\">\n" <textarea="" rows="\"3\"" focus:ring-indigo-600="" sm:leading-6\"><="" textarea>\n="" text-gray-600\">write="" a="" few="" sentences="" about="" yourself.<="" text-gray-900\">photo<="" gap-x-3\">\n="" w-12="" text-gray-300\"="" 19.097a9.723="" 9.723="" 0021.75="" 12c0-5.385-4.365-9.75-9.75-9.75s2.25="" 6.615="" 12a9.723="" 003.065="" 7.097a9.716="" 9.716="" 0012="" 21.75a9.716="" 006.685-2.653zm-12.54-1.285a7.486="" 7.486="" 0112="" 15a7.486="" 015.855="" 2.812a8.224="" 8.224="" 20.25a8.224="" 01-5.855-2.438zm15.75="" 9a3.75="" 3.75="" 11-7.5="" 017.5="" 0z\"="" px-2.5="" hover:bg-gray-50\">change<="" text-gray-900\">cover="" photo<="" rounded-lg="" border-dashed="" 25="" px-6="" py-10\">\n="" h-12="" 6a2.25="" 012.25-2.25h16.5a2.25="" 0122.5="" 6v12a2.25="" 01-2.25="" 2.25h3.75a2.25="" 011.5="" 18v6zm3="" 16.06v18c0="" .414.336.75.75.75h16.5a.75.75="" 0021="" 18v-1.94l-2.69-2.689a1.5="" 1.5="" 00-2.12="" 0l-.88.879.97.97a.75.75="" 11-1.06="" 1.06l-5.16-5.159a1.5="" 0l3="" 16.061zm10.125-7.81a1.125="" 112.25="" text-gray-600\">\n="" cursor-pointer="" focus-within:outline-none="" focus-within:ring-offset-2="" <span>upload="" file<="" drag="" drop<="" leading-5="" text-gray-600\">png,="" jpg,="" gif="" up="" 10mb<="" text-gray-900\">personal="" text-gray-600\">use="" permanent="" address="" where="" can="" receive="" mail.<="" text-gray-900\">first="" sm:leading-6\">\n="" text-gray-900\">last="" text-gray-900\">country<="" <select="" sm:max-w-xs="" <option>united="" states<="" option>\n="" <option>canada<="" <option>mexico<="" select>\n="" text-gray-900\">street="" sm:col-start-1\">\n="" text-gray-900\">city<="" text-gray-900\">state="" province<="" text-gray-900\">zip="" postal="" code<="" text-gray-900\">notifications<="" text-gray-600\">we'll="" always="" let="" know="" important="" changes,="" but="" pick="" else="" want="" hear="" about.<="" space-y-10\">\n="" <fieldset>\n="" <legend="" text-gray-900\">by="" email<="" legend>\n="" space-y-6\">\n="" w-4="" rounded="" focus:ring-indigo-600\">\n="" text-gray-900\">comments<="" notified="" someones="" posts="" comment="" posting.<="" text-gray-900\">candidates<="" candidate="" applies="" job.<="" text-gray-900\">offers<="" accepts="" or="" rejects="" an="" offer.<="" fieldset>\n="" text-gray-900\">push="" text-gray-600\">these="" are="" delivered="" via="" sms="" phone.<="" text-gray-900\">everything<="" text-gray-900\">same="" text-gray-900\">no="" push="" justify-end="" gap-x-6\">\n="" text-gray-900\">cancel<="" hover:bg-indigo-500="" focus-visible:outline-indigo-600\">save<="" form>\n\n="" body>","previewhtml":null,"snippets":[{"language":"html","highlight":"html","label":"html","snippet":"<!--\n="" this="" example="" requires="" some="" changes="" config:\n="" ```\n="" tailwind.config.js\n="" module.exports="{\n" plugins:="" [\n="" require('@tailwindcss="" forms'),\n="" ],\n="" ```\n-->\n<form>\n="" form>\n"},{"language":"react","highlight":"jsx","label":"react","snippet":"="" *\n="" ```\n*="" \nimport="" photoicon,="" usercircleicon="" share.\n="" htmlfor="\"username\"" text-gray-900\">\n="" username\n="" <input\n="" sm:leading-6\"\n="" about\n="" <textarea\n="" defaultvalue="{''}\n" photo\n="" <usercircleicon="" change\n="" cover="" <photoicon="" <label\n="" hover:text-indigo-500\"\n="" first="" name\n="" last="" email="" address\n="" country\n="" <select\n="" street="" city\n="" state="" province\n="" zip="" code\n="" we'll="" about.\n="" focus:ring-indigo-600\"\n="" comments\n="" candidates\n="" offers\n="" everything\n="" same="" email\n="" no="" notifications\n="" cancel\n="" save\n="" )\n}\n"},{"language":"vue","highlight":"html","label":"vue","snippet":"<!--\n="" ```\n-->\n<template>\n="" focus:ring-indigo-600\"="" form>\n<="" script>"}],"largewidth":1280,"largeheight":2409,"smallwidth":375,"smallheight":2741,"smallscreenshoturl":"="" form-layouts.01-stacked-xs.png","largescreenshoturl":"="" form-layouts.01-stacked-xl.png","subcategory":{"name":"form="" layouts","url":"="" forms="" form-layouts","category":{"name":"forms","url":"="" components#product-application-ui-forms","product":{"name":"application="" components#product-application-ui"}}}},{"name":"simple","uuid":"766a0bf1b8800d383b6c5b77ef9c626c","isnew":false,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":false,"iframehtml":"<!doctype="" min-h-[840px]="" flex-col="" bg-white\">\n="" updating="" template:\n\n="" <html="" <body="" min-h-full="" sm:w-full="" sm:max-w-sm\">\n="" h-10="" text-center="" text-2xl="" font-bold="" leading-9="" tracking-tight="" text-gray-900\">sign="" account<="" sm:mx-auto="" required="" text-gray-900\">password<="" hover:text-indigo-500\">forgot="" password?<="" focus-visible:outline-indigo-600\">sign="" in<="" member?\n="" hover:text-indigo-500\">start="" 14="" day="" free="" trial<="" ```\n-->\n<!--\n="" ```\n-->\n<div="" div>\n"},{"language":"react","highlight":"jsx","label":"react","snippet":"="" \nexport="" <>\n="" account\n="" required\n="" password\n="" forgot="" password?\n="" in\n="" member?{'="" start="" trial\n="" template>\n"}],"largewidth":1280,"largeheight":840,"smallwidth":375,"smallheight":840,"smallscreenshoturl":"="" sign-in-forms.01-simple-xs.png","largescreenshoturl":"="" sign-in-forms.01-simple-xl.png","subcategory":{"name":"sign-in="" registration","url":"="" sign-in-forms","category":{"name":"forms","url":"="" components#product-application-ui"}}}},{"name":"with="" dividers","uuid":"1f10562f6266c9b3ef15ff792edd508e","isnew":false,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":true,"iframehtml":"<!doctype="" p-8\"="" 460px\">\n="" w-64="" text-right\">\n="" divide-y="" 0,="" 0)="" focusbutton()\">edit<="" 1)="" focusbutton()\">duplicate<="" 2)="" focusbutton()\">archive<="" focusbutton()\">move<="" 4,="" 4)="" 4)\"="" focusbutton()\">share<="" 5,="" 5)="" 5)\"="" focusbutton()\">add="" favorites<="" 6,="" 6)="" 6)\"="" focusbutton()\">delete<="" edit\n="" duplicate\n="" archive\n="" move\n="" share\n="" add="" favorites\n="" delete\n="" text-sm']\">edit<="" text-sm']\">duplicate<="" text-sm']\">archive<="" text-sm']\">move<="" text-sm']\">share<="" text-sm']\">add="" text-sm']\">delete<="" script>"}],"largewidth":1280,"largeheight":460,"smallwidth":375,"smallheight":460,"smallscreenshoturl":"="" dropdowns.02-with-dividers-xs.png","largescreenshoturl":"="" dropdowns.02-with-dividers-xl.png","subcategory":{"name":"dropdowns","url":"="" components#product-application-ui"}}}},{"name":"dark="" nav="" white="" header","uuid":"10058606cac5398d7fa2c73b64089874","isnew":false,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":true,"iframehtml":"<!doctype="" bg-gray-100\">\n="" w-8\"="" md:block\">\n="" items-baseline="" hover:text-white"\">reports<="" md:ml-6\">\n="" max-w-xs="" md:hidden\">\n="" pt-2="" sm:px-3\">\n="" border-gray-700="" pt-4\">\n="" px-5\">\n="" w-10="" leading-none="" text-white\">tom="" cook<="" text-gray-400\">tom@example.com<="" ml-auto="" space-y-1="" px-2\">\n="" hover:text-white\">your="" hover:text-white\">settings<="" hover:text-white\">sign="" <header="" shadow\">\n="" <h1="" text-gray-900\">dashboard<="" h1>\n="" header>\n="" <main>\n="" <x-placeholder>\n="" h-96="" overflow-hidden="" rounded-xl="" border-gray-400="" opacity-75\">\n="" inset-0="" h-full="" stroke-gray-900="" 10\"="" <defs>\n="" <pattern="" x="\"0\"" y="\"0\"" width="\"10\"" height="\"10\"" patternunits="\"userSpaceOnUse\">\n" 13="" 15-5m-5="" 5l18-18m-1="" 21="" 3\"><="" path>\n="" pattern>\n="" defs>\n="" <rect="" x-placeholder>\n="" main>\n="" hover:text-white\">reports<="" \"block\"="" \"hidden\"="" main>\n<="" 'tom="" cook',\n="" email:="" 'tom@example.com',\n="" imageurl:\n="" 'https:="" images.unsplash.com="" photo-1472099645785-5658abf4ff4e?ixlib="rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',\n}\nconst" 'reports',="" },\n]\nconst="" usernavigation="[\n" 'your="" profile',="" '#'="" 'settings',="" 'sign="" out',="" w-8\"\n="" {usernavigation.map((item)=">" data-[focus]:bg-gray-100\"\n="" text-white\">{user.name}<="" text-gray-400\">{user.email}<="" hover:text-white\"\n="" disclosure>\n\n="" lg:px-8\">{="" }<="" :src="\"user.imageUrl\"" usernavigation\"="" text-gray-700']\">{{="" text-white\">{{="" user.name="" text-gray-400\">{{="" user.email="" hover:text-white\">{{="" script>"}],"largewidth":1280,"largeheight":580,"smallwidth":375,"smallheight":580,"smallscreenshoturl":"="" application-shells-stacked.03-dark-nav-with-white-page-header-xs.png","largescreenshoturl":"="" application-shells-stacked.03-dark-nav-with-white-page-header-xl.png","subcategory":{"name":"stacked="" application-shells="" stacked","category":{"name":"application="" shells","url":"="" components#product-application-ui-application-shells","product":{"name":"application="" close="" outside","uuid":"0f117af9905c6bf010968e396f2c7583","isnew":false,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":true,"iframehtml":"<!doctype="" @keydown.window.escape="\"open" o=">" !o="" &&="" window.settimeout(()=">" (open="true)," 1000))\"="" z-10\"="" aria-modal="\"true\">\n" duration-500\"="" backdrop,="" slide-over="" bg-gray-500="" bg-opacity-75="" transition-opacity\"="" \n\n="" overflow-hidden\">\n="" fixed="" max-w-full="" pl-10\">\n="" ease-in-out="" duration-500="" sm:duration-700\"="" w-screen="" max-w-md\"="" panel,="" false\">\n="" button,="" top-0="" -ml-8="" pt-4="" sm:-ml-10="" sm:pr-4\">\n="" -inset-2.5\"><="" panel<="" overflow-y-scroll="" shadow-xl\">\n="" text-gray-900\"="" title<="" mt-6="" background="" \"ease-in-out="" duration-500\"\n="" \"opacity-0\"\n="" \"opacity-100\"\n="" sm:duration-700\"\n="" \"translate-x-full\"\n="" \"translate-x-0\"\n="" max-w-md\">\n="" div>\n"},{"language":"react","highlight":"jsx","label":"react","snippet":"'use="" client'\n\nimport="" usestate="" 'react'\nimport="" dialog,="" dialogbackdrop,="" dialogpanel,="" dialogtitle,="" transitionchild="" outline'\n\nexport="" const="" [open,="" setopen]="useState(true)\n\n" <dialog="" onclose="{setOpen}" z-10\">\n="" <dialogbackdrop\n="" transition-opacity="" data-[closed]:opacity-0\"\n="" >\n\n="" <dialogpanel\n="" max-w-md="" transform="" data-[closed]:translate-x-full="" <transitionchild>\n="" onclick="{()" =>="" setopen(false)}\n="" focus:ring-white\"\n="" -inset-2.5\"="" transitionchild>\n="" <dialogtitle="" text-gray-900\">panel="" dialogtitle>\n="" sm:px-6\">{="" dialogpanel>\n="" dialog>\n="" <transitionroot="" :show="\"open\">\n" @close="\"open" <transitionchild="" enter="\"ease-in-out" enter-from="\"opacity-0\"" enter-to="\"opacity-100\"" leave="\"ease-in-out" leave-from="\"opacity-100\"" leave-to="\"opacity-0\">\n" transitionchild>\n\n="" <dialogpanel="" transitionroot>\n<="" ref="" 'vue'\nimport="" transitionchild,="" transitionroot="" meta="" actions","uuid":"7654075f650c9f1044bfcf1b1b6ffd77","isnew":false,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":true,"iframehtml":"<!doctype="" 384px\">\n="" max-w-7xl\">\n="" lg:items-center="" lg:justify-between\">\n="" flex-1\">\n="" sm:truncate="" sm:text-3xl="" sm:tracking-tight\">back="" sm:mt-0="" sm:flex-row="" sm:flex-wrap="" sm:space-x-6\">\n="" 3.75a2.75="" 2.75="" 018.75="" 1h2.5a2.75="" 0114="" 3.75v.443c.572.055="" 1.14.122="" 1.706.2c17.053="" 4.582="" 18="" 5.75="" 7.07v3.469c0="" 1.126-.694="" 2.191-1.83="" 2.54-1.952.599-4.024.921-6.17.921s-4.219-.322-6.17-.921c2.694="" 12.73="" 11.665="" 10.539v7.07c0-1.321.947-2.489="" 2.294-2.676a41.047="" 41.047="" 016="" 4.193v3.75zm6.5="" 0v.325a41.622="" 41.622="" 00-5="" 0v3.75c0-.69.56-1.25="" 1.25-1.25h2.5c.69="" 1.25.56="" 1.25="" 1.25zm10="" 10a1="" 00-1="" 1v.01a1="" 001="" 1h.01a1="" 001-1v11a1="" 00-1-1h10z\"="" 15.055v-.684c.126.053.255.1.39.142="" 2.092.642="" 4.313.987="" 6.61.987="" 2.297="" 4.518-.345="" 6.61-.987.135-.041.264-.089.39-.142v.684c0="" 1.347-.985="" 2.53-2.363="" 2.686a41.454="" 41.454="" 01-9.274="" 0c3.985="" 17.585="" 16.402="" 15.055z\"><="" full-time\n="" 10.818v2.614a3.13="" 3.13="" 0011.888="" 13c.482-.315.612-.648.612-.875="" 0-.227-.13-.56-.612-.875a3.13="" 00-1.138-.432zm8.33="" 8.62c.053.055.115.11.184.164.208.16.46.284.736.363v6.603a2.45="" 2.45="" 00-.35.13c-.14.065-.27.143-.386.233-.377.292-.514.627-.514.909="" .184.058.39.202.592.037.051.08.102.128.152z\"><="" 10a8="" 8="" 11-16="" 0116="" 0zm-8-6a.75.75="" 01.75.75v.316a3.78="" 3.78="" 011.653.713c.426.33.744.74.925="" 1.2a.75.75="" 01-1.395.55="" 1.35="" 00-.447-.563="" 2.187="" 00-.736-.363v9.3c.698.093="" 1.383.32="" 1.959.696.787.514="" 1.29="" 1.27="" 2.13="" .86-.504="" 1.616-1.29="" 2.13-.576.377-1.261.603-1.96.696v.299a.75.75="" 11-1.5="" 0v-.3c-.697-.092-1.382-.318-1.958-.695-.482-.315-.857-.717-1.078-1.188a.75.75="" 111.359-.636c.08.173.245.376.54.569.313.205.706.353="" 1.138.432v-2.748a3.782="" 3.782="" 01-1.653-.713c6.9="" 9.433="" 6.5="" 8.681="" 7.875c0-.805.4-1.558="" 1.097-2.096a3.78="" 011.653-.713v4.75a.75.75="" 0110="" 4z\"="" $120k="" –="" $140k\n="" 2a.75.75="" 01.75.75v4h7v2.75a.75.75="" 0v4h.25a2.75="" 6.75v8.5a2.75="" 0115.25="" 18h4.75a2.75="" 012="" 15.25v-8.5a2.75="" 014.75="" 4h5v2.75a.75.75="" 015.75="" 2zm-1="" 5.5c-.69="" 0-1.25.56-1.25="" 1.25v6.5c0="" .69.56="" 1.25h10.5c.69="" 1.25-.56="" 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25h4.75z\"="" closing="" january="" 9,="" 2020\n="" lg:ml-4="" lg:mt-0\">\n="" mr-1.5="" 14.763l-1.262="" 3.154a.5.5="" 00.65.65l3.155-1.262a4="" 4="" 001.343-.885l17.5="" 5.5a2.121="" 2.121="" 00-3-3l3.58="" 13.42a4="" 00-.885="" 1.343z\"><="" span>\n\n="" 4.232a2.5="" 013.536="" 3.536l-1.225="" 1.224a.75.75="" 001.061="" 1.06l1.224-1.224a4="" 00-5.656-5.656l-3="" 3a4="" 00.225="" 5.865.75.75="" 00.977-1.138="" 01-.142-3.667l3-3z\"><="" 7.963a.75.75="" 00-.977="" 1.138="" 01.142="" 3.667l-3="" 3a2.5="" 01-3.536-3.536l1.225-1.224a.75.75="" 00-1.061-1.06l-1.224="" 1.224a4="" 105.656="" 5.656l3-3a4="" 00-.225-5.865z\"><="" view\n="" focus-visible:outline-indigo-600\">\n="" 4.153a.75.75="" 01.143="" 1.052l-8="" 10.5a.75.75="" 01-1.127.075l-4.5-4.5a.75.75="" 011.06-1.06l3.894="" 3.893="" 7.48-9.817a.75.75="" 011.05-.143z\"="" publish\n="" hover:ring-gray-400\"="" more\n="" ml-1.5="" duration-200\"="" -mr-1="" focusbutton()\">view<="" 15.055z\"="" .184.058.39.202.592.037.051.08.102.128.152z\"="" 1.343z\"="" 01-.142-3.667l3-3z\"="" 00-.225-5.865z\"="" duration-200\"\n="" briefcaseicon,\n="" calendaricon,\n="" checkicon,\n="" chevrondownicon,\n="" currencydollaricon,\n="" linkicon,\n="" mappinicon,\n="" pencilicon,\n}="" solid'\nimport="" react'\n\nexport="" sm:tracking-tight\">\n="" back="" developer\n="" <briefcaseicon="" <mappinicon="" <currencydollaricon="" <calendaricon="" <pencilicon="" <linkicon="" <checkicon="" hover:ring-gray-400\">\n="" menubutton>\n\n="" data-[enter]:duration-200="" text-gray-700']\">edit<="" text-gray-700']\">view<="" vue'\n<="" script>"}],"largewidth":1280,"largeheight":384,"smallwidth":375,"smallheight":384,"smallscreenshoturl":"="" page-headings.05-with-meta-and-actions-xs.png","largescreenshoturl":"="" page-headings.05-with-meta-and-actions-xl.png","subcategory":{"name":"page="" headings","url":"="" headings="" page-headings","category":{"name":"headings","url":"="" components#product-application-ui-headings","product":{"name":"application="" components#product-application-ui"}}}},{"name":"custom="" avatar","uuid":"71d9116be789a254c260369f03472985","isnew":false,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":true,"iframehtml":"<!doctype="" bg-gray-100="" 600px\">\n="" max-w-xs\">\n="" modelname:="" 'selected',="" true,="" selectedindex:="" activeindex:="" items:="" [{"id":1,"name":"wade="" cooper","avatar":"https:="" photo-1491528323818-fdd1faba62cc?ixlib="rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"},{"id":2,"name":"Arlene" mccoy","avatar":"https:="" photo-1550525811-e5869dd03032?ixlib="rb-1.2.1&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"},{"id":3,"name":"Devon" webb","avatar":"https:="" photo-1500648767791-00dcc994a43e?ixlib="rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2.25&w=256&h=256&q=80"},{"id":4,"name":"Tom" cook","avatar":"https:="" fox","avatar":"https:="" photo-1494790108377-be9c29b29330?ixlib="rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"},{"id":6,"name":"Hellen" schmidt","avatar":"https:="" photo-1487412720507-e7ab37603c6f?ixlib="rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"},{"id":7,"name":"Caroline" schultz","avatar":"https:="" photo-1568409938619-12e139227838?ixlib="rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"},{"id":8,"name":"Mason" heaney","avatar":"https:="" photo-1531427186611-ecfd6d936c79?ixlib="rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"},{"id":9,"name":"Claudie" smitham","avatar":"https:="" photo-1584486520270-19eca1efcce5?ixlib="rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"},{"id":10,"name":"Emil" schaefer","avatar":"https:="" photo-1561505457-3bcad021f8ee?ixlib="rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"}]" to<="" mt-2\">\n="" cursor-default="" pr-10="" focus:ring-indigo-500="" @keydown.arrow-up.stop.prevent="\"onButtonClick()\"" @keydown.arrow-down.stop.prevent="\"onButtonClick()\"" :aria-expanded="\"open\"" rounded-full\">\n="" x-text="\"selected.name\"" truncate\">tom="" absolute="" pr-2\">\n="" 3a.75.75="" 01.55.24l3.25="" 3.5a.75.75="" 11-1.1="" 1.02l10="" 4.852="" 7.3="" 7.76a.75.75="" 01-1.1-1.02l3.25-3.5a.75.75="" 3zm-3.76="" 9.2a.75.75="" 011.06.04l2.7="" 2.908="" 2.7-2.908a.75.75="" 111.1="" 1.02l-3.25="" 01-1.1="" 0l-3.25-3.5a.75.75="" 01.04-1.06z\"="" mt-1="" max-h-56="" overflow-auto="" sm:text-sm\"="" x-max="\"1\"" popover,="" select="" @keydown.enter.stop.prevent="\"onOptionSelect()\"" @keydown.space.stop.prevent="\"onOptionSelect()\"" @keydown.escape="\"onEscape()\"" :aria-activedescendant="\"activeDescendant\"" aria-activedescendant="\"listbox-option-3\">\n" highlighted\"="" pr-9\"="" option,="" manage="" highlight="" styles="" mouseenter="" mouseleave="" keyboard="" navigation.\"="" 'bg-indigo-600="" text-white':="" 'text-gray-900':="" selected\"="" truncate\"="" 'font-semibold':="" selectedindex="==" 'font-normal':="" !(selectedindex="==" }\">wade="" cooper<="" only="" display="" selected="" option.\"="" pr-4\"="" 'text-white':="" 'text-indigo-600':="" 0\">\n="" }\">arlene="" mccoy<="" 1\">\n="" }\">devon="" webb<="" 2\">\n="" }\">tom="" 3\">\n="" }\">tanya="" fox<="" 4\">\n="" }\">hellen="" schmidt<="" 5\">\n="" }\">caroline="" schultz<="" 6\">\n="" 7)\"="" 7,="" 7)="" }\">mason="" heaney<="" 7\">\n="" 8)\"="" 8,="" 8)="" }\">claudie="" smitham<="" 8\">\n="" 9)\"="" 9)="" }\">emil="" schaefer<="" 9\">\n="" text-gray-900\">assigned="" \"\"\n="" navigation.\n\n="" highlighted:="" \"bg-indigo-600="" \"text-gray-900\"\n="" pr-9="" selected:="" \"font-semibold\",="" \"font-normal\"="" truncate="" font-normal\">wade="" checkmark,="" option.\n\n="" \"text-white\",="" \"text-indigo-600\"\n="" pr-4="" text-indigo-600\">\n="" li>\n\n="" more="" items...="" label,="" listbox,="" listboxbutton,="" listboxoption,="" listboxoptions="" checkicon,="" chevronupdownicon="" people="[\n" 1,\n="" 'wade="" cooper',\n="" avatar:\n="" 2,\n="" 'arlene="" mccoy',\n="" 3,\n="" 'devon="" webb',\n="" 4,\n="" 5,\n="" 'tanya="" fox',\n="" 6,\n="" 'hellen="" schmidt',\n="" 7,\n="" 'caroline="" schultz',\n="" 8,\n="" 'mason="" heaney',\n="" 9,\n="" 'claudie="" smitham',\n="" 10,\n="" 'emil="" schaefer',\n="" [selected,="" setselected]="useState(people[3])\n\n" <listbox="" value="{selected}" onchange="{setSelected}>\n" <listboxbutton="" truncate\">{selected.name}<="" <chevronupdownicon="" listboxbutton>\n\n="" <listboxoptions\n="" data-[closed]:data-[leave]:opacity-0="" data-[leave]:transition="" data-[leave]:duration-100="" data-[leave]:ease-in="" sm:text-sm\"\n="" {people.map((person)=">" <listboxoption\n="" data-[focus]:bg-indigo-600="" data-[focus]:text-white\"\n="" font-normal="" group-data-[selected]:font-semibold\">\n="" {person.name}\n="" group-data-[focus]:text-white="" [.group:not([data-selected])_&]:hidden\">\n="" listboxoption>\n="" listboxoptions>\n="" listbox>\n="" v-model="\"selected\">\n" <listboxlabel="" listboxlabel>\n="" truncate\">{{="" selected.name="" <listboxoptions="" sm:text-sm\">\n="" <listboxoption="" people\"="" :value="\"person\"" active,="" 'text-gray-900',="" 'relative="" pr-9']\">\n="" 'font-semibold'="" 'font-normal',="" 'ml-3="" truncate']\">{{="" person.name="" 'text-white'="" 'text-indigo-600',="" 'absolute="" pr-4']\">\n="" listbox>\n<="" listboxlabel,="" },\n]\n\nconst="" menus","url":"="" select-menus","category":{"name":"forms","url":"="" gray="" footer","uuid":"b6812b6c13fff16861f2645c4100ae5b","isnew":false,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":true,"iframehtml":"<!doctype="" 560px\">\n="" duration-300\"="" modal="" overflow-y-auto\">\n="" items-end="" p-4="" sm:p-0\">\n="" translate-y-4="" sm:translate-y-0="" sm:scale-95\"="" translate-y-0="" sm:scale-100\"="" shadow-xl="" transition-all="" sm:my-8="" sm:max-w-lg\"="" pb-4="" pt-5="" sm:p-6="" sm:pb-4\">\n="" sm:items-start\">\n="" bg-red-100="" sm:mx-0="" sm:h-10="" sm:w-10\">\n="" text-red-600\"="" 9v3.75m-9.303="" 3.376c-.866="" 1.5.217="" 3.374="" 1.948="" 3.374h14.71c1.73="" 2.813-1.874="" 1.948-3.374l13.949="" 3.378c-.866-1.5-3.032-1.5-3.898="" 0l2.697="" 16.126zm12="" 15.75h.007v.008h12v-.008z\"><="" sm:ml-4="" sm:text-left\">\n="" text-gray-500\">are="" sure="" deactivate="" account?="" all="" of="" data="" permanently="" removed.="" cannot="" undone.<="" sm:flex-row-reverse="" bg-red-600="" hover:bg-red-500="" sm:ml-3="" sm:w-auto\"="" false\">deactivate<="" false\">cancel<="" \"ease-out="" duration-300\"\n="" \"ease-in="" \"opacity-0="" sm:scale-95\"\n="" \"opacity-100="" sm:scale-100\"\n="" sm:max-w-lg\">\n="" 15.75h.007v.008h12v-.008z\"="" sm:w-auto\">deactivate<="" sm:w-auto\">cancel<="" dialogtitle="" exclamationtriangleicon="" data-[enter]:duration-300="" data-[leave]:duration-200="" data-[closed]:translate-y-4="" sm:max-w-lg="" data-[closed]:sm:translate-y-0="" data-[closed]:sm:scale-95\"\n="" <exclamationtriangleicon="" removed.\n="" undone.\n="" sm:w-auto\"\n="" deactivate\n="" data-autofocus\n="" sm:scale-95\">\n="" text-gray-900\">deactivate="" dialogs","url":"="" overlays="" modal-dialogs","category":{"name":"overlays","url":"="" components#product-application-ui-overlays","product":{"name":"application="" components#product-application-ui"}}}},{"name":"avatar="" group="" stacked="" bottom="" top","uuid":"e4a92edf4f12acee331db4190019b4ef","isnew":false,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":false,"iframehtml":"<!doctype="" px-8="" py-12\">\n="" max-w-lg="" justify-around="" space-y-6="" sm:space-y-0\">\n="" -space-x-1="" ring-2="" ring-white\"="" -space-x-2="" h-8="" ring-white\"\n="" template>\n"}],"largewidth":1280,"largeheight":136,"smallwidth":375,"smallheight":240,"smallscreenshoturl":"="" avatars.09-avatar-group-stacked-bottom-to-top-xs.png","largescreenshoturl":"="" avatars.09-avatar-group-stacked-bottom-to-top-xl.png","subcategory":{"name":"avatars","url":"="" avatars","category":{"name":"elements","url":"="" components#product-application-ui"}}}},{"name":"input="" inline="" leading="" add-on="" trailing="" dropdown","uuid":"2607d970262ada86428f063c72b1e7bd","isnew":false,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":false,"iframehtml":"<!doctype="" p-8\">\n="" text-gray-900\">price<="" pl-3\">\n="" sm:text-sm\">$<="" pl-7="" pr-20="" py-0="" pl-2="" pr-7="" <option>usd<="" <option>cad<="" <option>eur<="" ```\n-->\n<div>\n="" price\n="" currency\n="" template>\n"}],"largewidth":1280,"largeheight":132,"smallwidth":375,"smallheight":132,"smallscreenshoturl":"="" input-groups.13-input-with-inline-leading-add-on-and-trailing-dropdown-xs.png","largescreenshoturl":"="" input-groups.13-input-with-inline-leading-add-on-and-trailing-dropdown-xl.png","subcategory":{"name":"input="" groups","url":"="" input-groups","category":{"name":"forms","url":"="" price","uuid":"adec20dfa6eac091f5bee40e244c6823","isnew":false,"downloadable":true,"imagecreditshtml":"<p="" text-slate-500\">images="" provided="" by="" text-sky-600="" hover:text-sky-700\">ugmonk<="" a><="" p>","requiresjavascript":false,"iframehtml":"<!doctype="" py-16="" sm:py-24="" lg:max-w-7xl="" text-gray-900\">customers="" also="" purchased<="" h2>\n\n="" gap-y-10="" sm:grid-cols-2="" lg:grid-cols-4="" xl:gap-x-8\">\n="" relative\">\n="" aspect-w-1="" bg-gray-200="" lg:aspect-none="" group-hover:opacity-75="" lg:h-80\">\n="" men's="" basic="" tee="" black.\"="" object-cover="" object-center="" lg:h-full="" lg:w-full\">\n="" inset-0\"><="" tee\n="" text-gray-500\">black<="" text-gray-900\">$35<="" white.\"="" text-gray-500\">aspen="" white<="" gray.\"="" text-gray-500\">charcoal<="" artwork="" peach="" brown="" dots="" forming="" isometric="" cube.\"="" text-gray-500\">iso="" dots<="" div>\n\n<="" aspect-ratio'),\n="" products...="" \nconst="" products="[\n" 'basic="" tee',\n="" '#',\n="" imagesrc:="" tailwindui.com="" ecommerce-images="" product-page-01-related-product-01.jpg',\n="" imagealt:="" \"front="" men's="" black.\",\n="" price:="" '$35',\n="" color:="" 'black',\n="" products...\n]\n\nexport="" {products.map((product)=">" lg:w-full\"\n="" inset-0\"="" {product.name}\n="" text-gray-500\">{product.color}<="" text-gray-900\">{product.price}<="" products\"="" :alt="\"product.imageAlt\"" lg:w-full\"="" product.name="" text-gray-500\">{{="" product.color="" text-gray-900\">{{="" product.price="" setup>\nconst="" products...\n]\n<="" script>"}],"largewidth":1280,"largeheight":628,"smallwidth":375,"smallheight":1916,"smallscreenshoturl":"="" product-lists.01-with-inline-price-xs.png","largescreenshoturl":"="" product-lists.01-with-inline-price-xl.png","subcategory":{"name":"product="" ecommerce="" product-lists","category":{"name":"components","url":"="" components#product-ecommerce-components","product":{"name":"ecommerce","url":"="" components#product-ecommerce"}}}},{"name":"three-column","uuid":"37995021e5cdf0c643346920ff40b13b","isnew":false,"downloadable":true,"imagecreditshtml":"<p="" lg:max-w-none="" lg:py-32\">\n="" text-gray-900\">collections<="" space-y-12="" lg:grid="" lg:grid-cols-3="" lg:gap-x-6="" lg:space-y-0\">\n="" h-80="" sm:aspect-h-1="" sm:aspect-w-2="" lg:aspect-h-1="" lg:aspect-w-1="" sm:h-64\">\n="" leather="" desk="" pad,="" walnut="" organizer,="" wireless="" mouse,="" porcelain="" mug.\"="" object-center\">\n="" office\n="" text-gray-900\">work="" home="" accessories<="" table="" mug,="" journal,="" brass="" pen,="" ring,="" houseplant.\"="" self-improvement\n="" text-gray-900\">journals="" note-taking<="" four="" insulated="" travel="" bottles="" wooden="" shelf.\"="" travel\n="" text-gray-900\">daily="" commute="" essentials<="" callouts="[\n" 'desk="" office',\n="" description:="" 'work="" accessories',\n="" home-page-02-edition-01.jpg',\n="" mug.',\n="" 'self-improvement',\n="" 'journals="" note-taking',\n="" home-page-02-edition-02.jpg',\n="" 'wood="" houseplant.',\n="" 'travel',\n="" 'daily="" essentials',\n="" home-page-02-edition-03.jpg',\n="" 'collection="" shelf.',\n="" {callouts.map((callout)=">" object-center\"\n="" {callout.name}\n="" text-gray-900\">{callout.description}<="" callouts\"="" object-center\"="" callout.name="" callout.description="" script>"}],"largewidth":1280,"largeheight":769,"smallwidth":375,"smallheight":1444,"smallscreenshoturl":"="" category-previews.02-three-column-xs.png","largescreenshoturl":"="" category-previews.02-three-column-xl.png","subcategory":{"name":"category="" previews","url":"="" category-previews","category":{"name":"components","url":"="" components#product-ecommerce"}}}},{"name":"with="" image="" grid","uuid":"6bf262ecea63105e5f1fc57ec12057f9","isnew":false,"downloadable":true,"imagecreditshtml":"<p="" gap-x-8="" gap-y-16="" lg:grid-cols-2="" sm:text-4xl\">technical="" specifications<="" text-gray-500\">the="" wood="" card="" tray="" precision="" milled="" perfectly="" fit="" stack="" focus="" cards.="" the="" powder="" coated="" steel="" divider="" separates="" cards="" new="" ones,="" used="" archive="" task="" lists.<="" sm:gap-y-16="" lg:gap-x-8\">\n="" text-gray-900\">origin<="" text-gray-500\">designed="" good="" goods,="" inc.<="" text-gray-900\">material<="" text-gray-500\">solid="" base="" rare="" earth="" magnets="" cover<="" text-gray-900\">dimensions<="" text-gray-500\">6.25"="" 3.55"="" 1.15"<="" text-gray-900\">finish<="" text-gray-500\">hand="" sanded="" finished="" natural="" oil<="" text-gray-900\">includes<="" text-gray-500\">wood="" refill="" packs<="" text-gray-900\">considerations<="" text-gray-500\">made="" materials.="" grain="" color="" vary="" each="" item.<="" grid-cols-2="" grid-rows-2="" gap-4="" sm:gap-6="" lg:gap-8\">\n="" punchout="" holes.\"="" down="" view="" embedded="" groove.\"="" groove="" recessed="" area.\"="" filled="" angled="" dedicated="" div>\n"},{"language":"react","highlight":"jsx","label":"react","snippet":"const="" features="[\n" 'origin',="" 'designed="" inc.'="" 'material',="" 'solid="" cover'="" 'dimensions',="" '6.25\"="" 3.55\"="" 1.15\"'="" 'finish',="" 'hand="" oil'="" 'includes',="" packs'="" 'considerations',="" 'made="" item.'="" coated\n="" lists.\n="" {features.map((feature)=">" text-gray-900\">{feature.name}<="" text-gray-500\">{feature.description}<="" holes.\"\n="" bg-gray-100\"\n="" groove.\"\n="" area.\"\n="" features\"="" feature.name="" feature.description="" bg-gray-100\"="" script>"}],"largewidth":1280,"largeheight":848,"smallwidth":375,"smallheight":1489,"smallscreenshoturl":"="" product-features.03-with-image-grid-xs.png","largescreenshoturl":"="" product-features.03-with-image-grid-xl.png","subcategory":{"name":"product="" features","url":"="" product-features","category":{"name":"components","url":"="" size="" selector","uuid":"8f33b33d19bbb2608bb5ae6488344e88","isnew":false,"downloadable":true,"imagecreditshtml":"<p="" p>","requiresjavascript":true,"iframehtml":"<!doctype="" min-h-[700px]\">\n="" lg:px-8\"="" 700px\">\n="" flex-col-reverse\">\n="" space-x-8="" <h3>\n="" 6-pack="" <p>$192<="" aspect-w-4="" wearing="" t-shirt.\"="" p-4\">\n="" focus:opacity-100="" group-hover:opacity-100\"="" true\">quick="" view<span="" span><="" md:block\"="" items-stretch="" md:items-center="" md:px-2="" lg:px-4\">\n="" md:translate-y-0="" md:scale-95\"="" md:scale-100\"="" md:my-8="" md:max-w-2xl="" md:px-4="" lg:max-w-4xl\"="" pb-8="" pt-14="" shadow-2xl="" sm:pt-8="" md:p-6="" lg:p-8\">\n="" right-4="" top-4="" hover:text-gray-500="" sm:right-6="" sm:top-8="" md:right-6="" md:top-6="" lg:right-8="" lg:top-8\"="" items-start="" sm:grid-cols-12="" aspect-w-2="" sm:col-span-4="" lg:col-span-5\">\n="" gray,="" white,="" black="" shirts="" arranged="" table.\"="" lg:col-span-7\">\n="" sm:pr-12\">basic="" <section="" h3>\n\n="" text-gray-900\">$192<="" reviews="" <h4="" flex-shrink-0\"="" "text-gray-900",="" "text-gray-200"\"="" 2.884c-.321-.772-1.415-.772-1.736="" 0l-1.83="" 4.401-4.753.381c-.833.067-1.171="" 1.107-.536="" 1.651l3.62="" 3.102-1.106="" 4.637c-.194.813.691="" 1.456="" 1.405="" 15.591l4.069="" 2.485c.713.436="" 1.598-.207="" 1.404-1.02l-1.106-4.637="" 3.62-3.102c.635-.544.297-1.584-.536-1.65l-4.752-.382-1.831-4.401z\"="" out="" 5="" stars<="" hover:text-indigo-500\">117="" reviews<="" section>\n\n="" options<="" colors="" <fieldset="" color\">\n="" text-gray-900\">color<="" legend>\n\n="" initialcheckedindex:="" space-x-3\">\n="" x-radio-group-option="\"\"" -m-0.5="" p-0.5="" ring-gray-400\"="" checked:="" "ring="" ring-offset-1"\"="" 'ring="" ring-offset-1':="" (active="==" 'white')="" (value="==" 'white'),="" 'undefined':="" !(active="==" ||="" !(value="==" }\">\n<input="" x-model="\"value\"" border-black="" border-opacity-10\"><="" 'gray')="" 'gray'),="" ring-gray-900\"="" 'black')="" 'black'),="" fieldset>\n\n="" sizes="" size\">\n="" text-gray-900\">size<="" hover:text-indigo-500\">size="" guide<="" grid-cols-4="" gap-4\">\n="" uppercase="" x-state:on:size.instock="\"In" stock\"="" x-state:off:size.instock="\"Out" "ring-2="" ring-indigo-500"\"="" 'ring-2="" ring-indigo-500':="" 'xxs'),="" 'xxs')="" <span>xxs<="" -inset-px="" rounded-md\"="" "border",="" "border-2"\tchecked:="" "border-indigo-500",="" "border-transparent"\"="" 'border':="" 'border-2':="" 'border-indigo-500':="" 'border-transparent':="" }\"><="" 'xs'),="" 'xs')="" <span>xs<="" 's'),="" 's')="" <span>s<="" 'm'),="" 'm')="" <span>m<="" 'l'),="" 'l')="" <span>l<="" 'xl'),="" 'xl')="" <span>xl<="" 'xxl'),="" 'xxl')="" <span>xxl<="" cursor-not-allowed="" bg-gray-50="" text-gray-200\"="" 'xxxl'),="" 'xxxl')="" disabled="" <span>xxxl<="" border-2="" stroke-2="" 100="" 100\"="" preserveaspectratio="\"none\"" <line="" x1="\"0\"" y1="\"100\"" x2="\"100\"" y2="\"0\"" vector-effect="\"non-scaling-stroke\">\n" border-transparent="" hover:bg-indigo-700="" focus:ring-offset-2\">add="" bag<="" section>\n="" md:scale-95\"\n="" md:scale-100\"\n="" lg:max-w-4xl\">\n="" lg:top-8\">\n="" 6-pack<="" \"text-gray-900\",="" \"text-gray-200\"="" \"ring="" ring-offset-1\"="" ring-gray-400="" border-opacity-10="" bg-white\"><="" bg-gray-200\"><="" ring-gray-900="" bg-gray-900\"><="" \"ring-2="" ring-indigo-500\"="" sm:flex-1\">\n="" \"border\",="" \"border-2\"\n="" \"border-indigo-500\",="" \"border-transparent\"\n="" text-gray-200="" \n'use="" radio,="" radiogroup="" outline'\nimport="" staricon="" product="{\n" ',\n="" '$192',\n="" rating:="" 3.9,\n="" reviewcount:="" 117,\n="" product-quick-preview-02-detail.jpg',\n="" 'two="" table.',\n="" colors:="" 'white',="" class:="" 'bg-white',="" selectedclass:="" 'ring-gray-400'="" 'gray',="" 'bg-gray-200',="" 'black',="" 'bg-gray-900',="" 'ring-gray-900'="" sizes:="" 'xxs',="" instock:="" 'xs',="" 's',="" 'm',="" 'l',="" 'xl',="" 'xxl',="" 'xxxl',="" ],\n}\n\nfunction="" [selectedcolor,="" setselectedcolor]="useState(product.colors[0])\n" [selectedsize,="" setselectedsize]="useState(product.sizes[2])\n\n" md:block\"\n="" data-[closed]:md:translate-y-0="" data-[closed]:md:scale-95="" lg:max-w-4xl\"\n="" lg:top-8\"\n="" sm:pr-12\">{product.name}<="" information\n="" {[0,="" 4].map((rating)=">" <staricon\n="" product.rating="" >="" rating="" 'text-gray-900'="" 'text-gray-200',\n="" 'h-5="" flex-shrink-0',\n="" {product.reviewcount}="" reviews\n="" <radiogroup\n="" space-x-3\"\n="" {product.colors.map((color)=">" <radio\n="" color.selectedclass,\n="" data-[checked]:ring-2="" data-[focus]:data-[checked]:ring="" data-[focus]:data-[checked]:ring-offset-1',\n="" <span\n="" color.class,\n="" 'h-8="" border-opacity-10',\n="" radio>\n="" radiogroup>\n="" size\"="" guide\n="" gap-4\"\n="" {product.sizes.map((size)=">" size.instock\n="" 'cursor-pointer="" shadow-sm'\n="" 'cursor-not-allowed="" text-gray-200',\n="" 'group="" data-[focus]:ring-2="" data-[focus]:ring-indigo-500="" sm:flex-1',\n="" <span>{size.name}<="" {size.instock="" group-data-[focus]:border="" group-data-[checked]:border-indigo-500\"\n="" )="" border-gray-200\"\n="" <svg\n="" 100\"\n="" text-gray-200\"\n="" vectoreffect="\"non-scaling-stroke\"" focus:ring-offset-2\"\n="" bag\n="" md:scale-95\">\n="" sm:pr-12\">{{="" <staricon="" [0,="" 4]\"="" 'text-gray-200',="" flex-shrink-0']\"="" }}="" hover:text-indigo-500\">{{="" product.reviewcount="" <radiogroup="" <radiogroupoption="" product.colors\"="" :aria-label="\"color.name\"" checked="" ring-offset-1'="" !active="" 'ring-2'="" focus:outline-none']\">\n="" border-opacity-10']\"="" radiogroupoption>\n="" product.sizes\"="" :disabled="\"!size.inStock\"" shadow-sm'="" text-gray-200',="" ring-indigo-500'="" sm:flex-1']\">\n="" <span>{{="" size.name="" 'border'="" 'border-2',="" 'border-indigo-500'="" 'border-transparent',="" 'pointer-events-none="" rounded-md']\"="" radiogroup,="" radiogroupoption,="" ],\n}\n\nconst="" selectedcolor="ref(product.colors[0])\nconst" selectedsize="ref(product.sizes[2])\n"}],"largeWidth":1280,"largeHeight":700,"smallWidth":375,"smallHeight":700,"smallScreenshotUrl":"/plus/img/components/product-quickviews.02-with-color-and-size-selector-xs.png","largeScreenshotUrl":"/plus/img/components/product-quickviews.02-with-color-and-size-selector-xl.png","subcategory":{"name":"Product" quickviews","url":"="" product-quickviews","category":{"name":"components","url":"="" featured="" categories","uuid":"870de0c4ec620ad31bb8538a2886e3f0","isnew":false,"downloadable":true,"imagecreditshtml":"<p="" a>="" hover:text-sky-700\">qwstion<="" z-40="" lg:hidden\"="" mobile,="" off-canvas="" ease-linear="" bg-black="" bg-opacity-25\"="" flex\">\n="" duration-300="" transform\"="" overflow-y-auto="" pb-12="" shadow-xl\"="" pb-2="" pt-5\">\n="" -m-2="" links="" @tab-click.window="\"onTabClick\"" @tab-keydown.window="\"onTabKeydown\">\n" px-4\"="" whitespace-nowrap="" border-b-2="" px-1="" 'border-indigo-600="" text-indigo-600':="" selected,="" 'border-transparent="" !(selected)="" @keydown="\"onKeydown\"" @tab-select.window="\"onTabSelect\"" :tabindex="\"selected" -1\"="" :aria-selected="\"selected" 'true'="" 'false'\"="" pt-10\"="" tab="" gap-x-4\">\n="" text-sm\">\n="" group-hover:opacity-75\">\n="" sitting="" back,="" bone.\"="" arrivals\n="" now<="" fall="" bundle="" off-white,="" ochre,="" olive,="" tees.\"="" tees\n="" text-gray-900\">clothing<="" text-gray-500\">tops<="" text-gray-500\">dresses<="" text-gray-500\">pants<="" text-gray-500\">denim<="" text-gray-500\">sweaters<="" text-gray-500\">t-shirts<="" text-gray-500\">jackets<="" text-gray-500\">activewear<="" text-gray-500\">browse="" all<="" text-gray-900\">accessories<="" text-gray-500\">watches<="" text-gray-500\">wallets<="" text-gray-500\">bags<="" text-gray-500\">sunglasses<="" text-gray-500\">hats<="" text-gray-500\">belts<="" text-gray-900\">brands<="" text-gray-500\">full="" nelson<="" text-gray-500\">my="" way<="" text-gray-500\">re-arranged<="" text-gray-500\">counterfeit<="" text-gray-500\">significant="" other<="" top="" elastic="" loop="" closure="" textured="" interior="" padding.\"="" blue="" line="" drawing="" hands="" shapes="" overlapping="" front="" shirt.\"="" py-6\">\n="" text-gray-900\">company<="" text-gray-900\">stores<="" text-gray-900\">create="" p-2\">\n="" h-auto="" text-gray-900\">cad<="" change="" currency<="" lg:px-8\">get="" delivery="" orders="" over="" $100<="" toggle,="" controls="" 'mobilemenuopen'="" true\">\n="" logo="" lg:ml-0\">\n="" company<="" flyout="" menus="" lg:ml-8="" lg:block="" lg:self-stretch\"="" space-x-8\">\n="" focus:="" @close-popover-group.window="\"onClosePopoverGroup\">\n" inactive\"="" hover:text-gray-800="" -mb-px="" pt-px="" transition-colors="" duration-200="" ease-out\"="" hover:text-gray-800':="" @mousedown="\"if" (open)="" $event.preventdefault()\"="" duration-150\"="" inset-x-0="" top-full="" text-gray-500\"="" presentational="" element="" render="" shadow,="" if="" we="" put="" actual="" panel="" it="" pokes="" top,="" use="" shorter="" top-1="" shadow\"="" px-8\">\n="" py-16\">\n="" gap-x-8\">\n="" grid-cols-3="" sm:mt-4="" sm:space-y-4\">\n="" false,="" hover:text-gray-800\">company<="" hover:text-gray-800\">stores<="" lg:flex="" lg:flex-1="" lg:justify-end="" lg:space-x-6\">\n="" hover:text-gray-800\">sign="" w-px="" bg-gray-200\"="" hover:text-gray-800\">create="" lg:flex\">\n="" hover:text-gray-800\">\n="" font-medium\">cad<="" search="" lg:ml-6\">\n="" hover:text-gray-500\">\n="" 21l-5.197-5.197m0="" 0a7.5="" 7.5="" 105.196="" 5.196a7.5="" 0010.607="" 10.607z\"><="" cart="" flow-root="" group-hover:text-gray-500\"="" 10.5v6a3.75="" 10-7.5="" 0v4.5m11.356-1.993l1.263="" 12c.07.665-.45="" 1.243-1.119="" 1.243h4.25a1.125="" 01-1.12-1.243l1.264-12a1.125="" 015.513="" 7.5h12.974c.576="" 1.059.435="" 1.119="" 1.007zm8.625="" 10.5a.375.375="" 11-.75="" .375.375="" 01.75="" 0zm7.5="" 0a.375.375="" 0z\"><="" group-hover:text-gray-800\">0<="" cart,="" menu\n\n="" state.\n="" \"transition-opacity="" transform\"\n="" \"-translate-x-full\"\n="" text-gray-400\">\n="" \"border-indigo-600="" text-indigo-600\",="" \"border-transparent="" 'women'="" 'men'="" lg:hidden\">\n="" lg:self-stretch\">\n="" item="" inactive:="" hover:text-gray-800\"="" duration-150\"\n="" 10.607z\"="" header>\n<="" fragment,="" dialog,\n="" dialogbackdrop,\n="" dialogpanel,\n="" popover,\n="" popoverbutton,\n="" popovergroup,\n="" popoverpanel,\n="" tab,\n="" tabgroup,\n="" tablist,\n="" tabpanel,\n="" tabpanels,\n}="" magnifyingglassicon,="" shoppingbagicon,="" categories:="" 'women',\n="" featured:="" 'new="" arrivals',\n="" mega-menu-category-01.jpg',\n="" 'models="" bone.',\n="" tees',\n="" mega-menu-category-02.jpg',\n="" 'close="" tees.',\n="" sections:="" 'clothing',\n="" 'tops',="" 'dresses',="" 'pants',="" 'denim',="" 'sweaters',="" 't-shirts',="" 'jackets',="" 'activewear',="" 'browse="" all',="" 'accessories',\n="" 'watches',="" 'wallets',="" 'bags',="" 'sunglasses',="" 'hats',="" 'belts',="" 'brands',\n="" 'full="" nelson',="" 'my="" way',="" 're-arranged',="" 'counterfeit',="" 'significant="" other',="" 'men',\n="" product-page-04-detail-product-shot-01.jpg',\n="" 'drawstring="" padding.',\n="" 'artwork="" category-page-02-image-card-06.jpg',\n="" imagealt:\n="" 'three="" shirt.',\n="" pages:="" 'company',="" 'stores',="" ],\n}\n\nexport="" bg-opacity-25="" data-[closed]:-translate-x-full\"\n="" text-gray-400\"\n="" <tabgroup="" <tablist="" px-4\">\n="" {navigation.categories.map((category)=">" <tab\n="" data-[selected]:border-indigo-600="" data-[selected]:text-indigo-600\"\n="" {category.name}\n="" tab>\n="" tablist>\n="" <tabpanels="" <tabpanel="" pt-10\">\n="" {category.featured.map((item)=">" shop="" now\n="" {category.sections.map((section)=">" {section.name}\n="" <ul\n="" space-y-6\"\n="" {section.items.map((item)=">" tabpanel>\n="" tabpanels>\n="" tabgroup>\n\n="" {navigation.pages.map((page)=">" {page.name}\n="" create="" flex-shrink-0\"\n="" dialog>\n\n="" get="" $100\n="" setopen(true)}\n="" lg:hidden\"\n="" <popovergroup="" <popover="" <popoverbutton="" data-[open]:border-indigo-600="" data-[open]:text-indigo-600\">\n="" popoverbutton>\n="" <popoverpanel\n="" data-[leave]:duration-150="" sm:space-y-4\"\n="" popoverpanel>\n="" popover>\n="" ))}\n\n="" hover:text-gray-800\"\n="" popovergroup>\n\n="" <magnifyingglassicon="" <shoppingbagicon\n="" group-hover:text-gray-500\"\n="" <tab="" navigation.categories\"="" text-indigo-600'="" text-gray-900',="" 'flex-1="" font-medium']\">{{="" category.name="" category.featured\"="" category.sections\"="" :id="\"`${category.id}-${section.id}-heading-mobile`\"" section.name="" :aria-labelledby="\"`${category.id}-${section.id}-heading-mobile`\"" section.items\"="" navigation.pages\"="" page.name="" transitionroot>\n\n="" hover:text-gray-800',="" ease-out']\">{{="" <popoverpanel="" popover>\n\n="" hover:text-gray-800\">{{="" <shoppingbagicon="" tabpanels,\n="" transitionchild,\n="" transitionroot,\n}="" navigation","url":"="" store-navigation","category":{"name":"components","url":"="" components#product-ecommerce"}}}},{"name":"simple","uuid":"230be426f17b26e949896d17c505e0d3","isnew":false,"downloadable":true,"imagecreditshtml":"<p="" xl:grid-cols-4="" xl:aspect-h-8="" xl:aspect-w-7\">\n="" slender="" bottle="" clay="" body="" cork="" stopper.\"="" text-gray-700\">earthen="" bottle<="" text-lg="" text-gray-900\">$48<="" drab="" green="" flared="" screw="" lid="" flat="" top.\"="" text-gray-700\">nomad="" tumbler<="" using="" pen="" cross="" off="" productivity="" paper="" card.\"="" text-gray-700\">focus="" refill<="" text-gray-900\">$89<="" holding="" machined="" mechanical="" pencil="" tip="" text-gray-700\">machined="" pencil<="" upright="" holder="" desk.\"="" tray<="" text-gray-900\">$64<="" small="" cardboard="" boxes="" text.\"="" multi-pack<="" text-gray-900\">$39<="" scissors="" geometric="" design,="" finger="" holes,="" included="" stand.\"="" text-gray-700\">brass="" scissors<="" text-gray-900\">$50<="" felt="" pouch="" snap="" flap="" loop.\"="" carry="" pouch<="" text-gray-900\">$32<="" a>\n\n="" 'earthen="" bottle',\n="" '$48',\n="" category-page-04-image-card-01.jpg',\n="" 'tall="" stopper.',\n="" 'nomad="" tumbler',\n="" category-page-04-image-card-02.jpg',\n="" 'olive="" top.',\n="" 'focus="" refill',\n="" '$89',\n="" category-page-04-image-card-03.jpg',\n="" 'person="" card.',\n="" 'machined="" pencil',\n="" category-page-04-image-card-04.jpg',\n="" group-hover:opacity-75\"\n="" text-gray-700\">{product.name}<="" group-hover:opacity-75\"="" text-gray-700\">{{="" script>"}],"largewidth":1280,"largeheight":1008,"smallwidth":375,"smallheight":3696,"smallscreenshoturl":"="" product-lists.06-simple-xs.png","largescreenshoturl":"="" product-lists.06-simple-xl.png","subcategory":{"name":"product="" components#product-ecommerce"}}}},{"name":"slide-over","uuid":"ee213165d75da7e921c0bf15f3ab054b","isnew":false,"downloadable":true,"imagecreditshtml":"<p="" cart<="" h-7="" hover:text-gray-500\"="" divide-gray-200\">\n="" w-24="" orange="" fabric="" match="" zipper,="" zipper="" pull,="" adjustable="" hip="" belt.\"="" flex-col\">\n="" text-gray-500\">salmon<="" 1<="" hover:text-indigo-500\">remove<="" satchel="" canvas="" body,="" straps="" handle,="" drawstring="" pouch.\"="" stuff="" satchel<="" text-gray-500\">blue<="" tote="" bag="" canvas,="" pulls.\"="" basket<="" text-gray-500\">white="" black<="" <p>subtotal<="" <p>$262.00<="" text-gray-500\">shipping="" taxes="" calculated="" at="" checkout.<="" hover:bg-indigo-700\">checkout<="" <p>\n="" or<!--="" hover:text-indigo-500\"="" continue="" shopping\n="" →<="" or\n="" 'throwback="" bag',\n="" 'salmon',\n="" '$90.00',\n="" quantity:="" shopping-cart-page-04-product-01.jpg',\n="" 'salmon="" belt.',\n="" 'medium="" satchel',\n="" 'blue',\n="" '$32.00',\n="" shopping-cart-page-04-product-02.jpg',\n="" pouch.',\n="" text-gray-900\">shopping="" hover:text-gray-500\"\n="" {product.quantity}<="" remove\n="" hover:bg-indigo-700\"\n="" checkout\n="" or{'="" product.quantity="" or{{="" products...\n]\n\nconst="" carts","url":"="" shopping-carts","category":{"name":"components","url":"="" grid","uuid":"2904df5d10ee9fc81ba07d1ad61a27ca","isnew":false,"downloadable":true,"imagecreditshtml":"<p="" <ol="" space-x-2="" text-gray-900\">men<="" 16="" text-gray-300\">\n="" 4.34l8.98="" 16.532h1.327l7.025="" 4.341h5.697z\"><="" hover:text-gray-600\">basic="" ol>\n="" gallery="" lg:gap-x-8="" aspect-w-3="" lg:block\">\n="" laying="" flat.\"="" lg:grid-cols-1="" lg:gap-y-8\">\n="" rounded-lg\">\n="" plain="" tee.\"="" lg:aspect-h-4="" lg:aspect-w-3="" sm:overflow-hidden="" info="" pb-16="" pt-10="" lg:grid-rows-[auto,auto,1fr]="" lg:px-8="" lg:pb-24="" lg:pt-16\">\n="" lg:border-r="" lg:border-gray-200="" lg:pr-8\">\n="" sm:text-3xl\">basic="" options="" lg:row-span-3="" color\"="" sm:grid-cols-8="" lg:grid-cols-4\">\n="" sm:py-6="" '2xl'),="" '2xl')="" <span>2xl<="" '3xl'),="" '3xl')="" <span>3xl<="" lg:col-span-2="" lg:col-start-1="" lg:pb-16="" lg:pr-8="" lg:pt-6\">\n="" description="" text-gray-900\">the="" allows="" fully="" express="" vibrant="" personality="" three="" grayscale="" options.="" feeling="" adventurous?="" heather="" tee.="" trendsetter?="" try="" our="" exclusive="" colorway:="" "black".="" need="" extra="" pop="" outfit?="" has="" covered.<="" text-gray-900\">highlights<="" space-y-2="" cut="" sewn="" locally<="" proprietary="" colors<="" &="" pre-shrunk<="" 100%="" cotton<="" text-gray-900\">details<="" text-gray-600\">the="" includes="" two="" black,="" tees.="" subscription="" service="" new,="" exciting="" colors,="" like="" upcoming="" "charcoal="" gray"="" limited="" release.<="" theme:="" extend:="" gridtemplaterows:="" '[auto,auto,1fr]':="" 'auto="" auto="" 1fr',\n="" 4.341h5.697z\"="" sm:py-6\">\n="" react'\n\nconst="" 6-pack',\n="" breadcrumbs:="" 'men',="" 'clothing',="" images:="" src:="" product-page-02-secondary-product-shot.jpg',\n="" alt:="" flat.',\n="" product-page-02-tertiary-product-shot-01.jpg',\n="" 'model="" tee.',\n="" product-page-02-tertiary-product-shot-02.jpg',\n="" product-page-02-featured-product-shot.jpg',\n="" '2xl',="" '3xl',="" description:\n="" 'the="" \"black\".="" covered.',\n="" highlights:="" locally',\n="" 'dyed="" colors',\n="" 'pre-washed="" &="" pre-shrunk',\n="" 'ultra-soft="" cotton',\n="" details:\n="" \"charcoal="" gray\"="" release.',\n}\nconst="" average:="" totalcount:="" 117="" }\n\nfunction="" {product.breadcrumbs.map((breadcrumb)=">" {breadcrumb.name}\n="" 20\"\n="" text-gray-300\"\n="" hover:text-gray-600\">\n="" sm:text-3xl\">{product.name}<="" reviews.average="" {reviews.totalcount}="" lg:grid-cols-4\"\n="" sm:py-6',\n="" text-gray-900\">{product.description}<="" {product.highlights.map((highlight)=">" text-gray-600\">{product.details}<="" product.breadcrumbs\"="" breadcrumb.name="" hover:text-gray-600\">{{="" sm:text-3xl\">{{="" reviews.totalcount="" sm:py-6']\">\n="" product.description="" product.highlights\"="" text-gray-600\">{{="" product.details="" radiogroupoption="" vue'\n\nconst="" }\n\nconst="" overviews","url":"="" product-overviews","category":{"name":"components","url":"="" actions="" expandable="" sidebar="" filters","uuid":"e799517f86cc2fc79bf0eebb45c16eea","isnew":false,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":true,"iframehtml":"<!doctype="" filter="" dialog="" filters="" text-gray-900\">filters<="" py-3\">totes<="" py-3\">backpacks<="" py-3\">travel="" bags<="" py-3\">hip="" py-3\">laptop="" sleeves<="" ul>\n\n="" -my-3="" flow-root\">\n="" section="" button\"="" icon,="" 4.75a.75.75="" 00-1.5="" 0v4.5h-4.5a.75.75="" 1.5h4.5v4.5a.75.75="" 001.5="" 0v-4.5h4.5a.75.75="" 000-1.5h-4.5v-4.5z\"><="" 10a.75.75="" 01.75-.75h10.5a.75.75="" 1.5h4.75a.75.75="" 014="" 10z\"="" section,="" focus:ring-indigo-500\">\n="" text-gray-500\">white<="" text-gray-500\">beige<="" text-gray-500\">brown<="" text-gray-500\">green<="" text-gray-500\">purple<="" text-gray-900\">category<="" text-gray-500\">new="" arrivals<="" text-gray-500\">sale<="" text-gray-500\">travel<="" text-gray-500\">organization<="" text-gray-500\">accessories<="" text-gray-500\">2l<="" text-gray-500\">6l<="" text-gray-500\">12l<="" text-gray-500\">18l<="" text-gray-500\">20l<="" text-gray-500\">40l<="" <main="" border-b="" pb-6="" pt-24\">\n="" text-gray-900\">new="" h1>\n\n="" hover:text-gray-900\"="" sort\n="" ml-1="" w-40="" x-state:on:option.current="\"Selected\"" x-state:off:option.current="\"Not" "font-medium="" text-gray-900",="" "text-gray-500"\"="" focusbutton()\">most="" popular<="" focusbutton()\">best="" rating<="" focusbutton()\">newest<="" focusbutton()\">price:="" low="" high<="" high="" low<="" ml-5="" sm:ml-7\">\n="" grid<="" 2a2.25="" 002="" 4.25v2.5a2.25="" 004.25="" 9h2.5a2.25="" 009="" 6.75v-2.5a2.25="" 006.75="" 2h-2.5zm0="" 9a2.25="" 13.25v2.5a2.25="" 18h2.5a2.25="" 15.75v-2.5a2.25="" 11h-2.5zm9-9a2.25="" 0011="" 0013.25="" 0018="" 0015.75="" 11h-2.5z\"="" ml-4="" 1.601c5.028="" 1.206="" 7.49="" 1s4.973.206="" 7.372.601a.75.75="" 01.628.74v2.288a2.25="" 01-.659="" 1.59l-4.682="" 4.683a2.25="" 00-.659="" 1.59v3.037c0="" .684-.31="" 1.33-.844="" 1.757l-1.937="" 1.55a.75.75="" 018="" 18.25v-5.757a2.25="" 00-.659-1.591l2.659="" 6.22a2.25="" 4.629v2.34a.75.75="" 01.628-.74z\"="" pt-6\">\n="" text-gray-600\">white<="" text-gray-600\">beige<="" text-gray-600\">blue<="" text-gray-600\">brown<="" text-gray-600\">green<="" text-gray-600\">purple<="" text-gray-600\">new="" text-gray-600\">sale<="" text-gray-600\">travel<="" text-gray-600\">organization<="" text-gray-600\">accessories<="" text-gray-600\">2l<="" text-gray-600\">6l<="" text-gray-600\">12l<="" text-gray-600\">18l<="" text-gray-600\">20l<="" text-gray-600\">40l<="" opacity-75="" lg:h-full\">\n="" dialog\n\n="" expand="" collapse="" 000-1.5h-4.5v-4.5z\"="" \"\"\n\n="" \"font-medium="" \"text-gray-500\"\n="" disclosure,\n="" disclosurebutton,\n="" disclosurepanel,\n="" menu,\n="" menubutton,\n="" menuitem,\n="" menuitems,\n}="" chevrondownicon,="" funnelicon,="" minusicon,="" plusicon,="" squares2x2icon="" sortoptions="[\n" 'most="" popular',="" 'best="" rating',="" 'newest',="" 'price:="" high',="" low',="" subcategories="[\n" 'totes',="" 'backpacks',="" 'travel="" bags',="" 'hip="" 'laptop="" sleeves',="" 'color',\n="" options:="" value:="" label:="" 'beige',="" 'blue',="" 'brown',="" 'green',="" 'purple',="" 'category',\n="" 'new-arrivals',="" arrivals',="" 'sale',="" 'travel',="" 'organization',="" 'accessories',="" 'size',\n="" '2l',="" '6l',="" '12l',="" '18l',="" '20l',="" '40l',="" [mobilefiltersopen,="" setmobilefiltersopen]="useState(false)\n\n" data-[closed]:translate-x-full\"\n="" setmobilefiltersopen(false)}\n="" {subcategories.map((category)=">" py-3\">\n="" {filters.map((section)=">" text-gray-900\">{section.name}<="" <plusicon="" <minusicon="" [.group:not([data-open])_&]:hidden\"="" {section.options.map((option,="" optionidx)=">" defaultchecked="{option.checked}\n" focus:ring-indigo-500\"\n="" text-gray-500\"\n="" {option.label}\n="" hover:text-gray-900\">\n="" <chevrondownicon\n="" {sortoptions.map((option)=">" option.current="" 'font-medium="" 'text-gray-500',\n="" data-[focus]:bg-gray-100',\n="" {option.name}\n="" menu>\n\n="" <squares2x2icon="" setmobilefiltersopen(true)}\n="" <funnelicon="" products\n="" subcategories\"="" py-3\">{{="" filters\"="" py-6\"="" section.options\"="" :name="\"`${section.id}[]`\"" :checked="\"option.checked\"" focus:ring-indigo-500\"="" :for="\"`filter-mobile-${section.id}-${optionIdx}`\"" option.label="" sortoptions\"="" 'text-gray-500',="" text-sm']\">{{="" option.name="" menuitems,\n="" mobilefiltersopen="ref(false)\n"}],"largeWidth":1280,"largeHeight":677,"smallWidth":375,"smallHeight":665,"smallScreenshotUrl":"/plus/img/components/category-filters.04-with-inline-actions-and-expandable-sidebar-filters-xs.png","largeScreenshotUrl":"/plus/img/components/category-filters.04-with-inline-actions-and-expandable-sidebar-filters-xl.png","subcategory":{"name":"Category" filters","url":"="" category-filters","category":{"name":"components","url":"="" tiles","uuid":"abf8794a557c496e493e847c71fc90c7","isnew":false,"downloadable":true,"imagecreditshtml":"<p="" pt-16="" sm:pb-40="" sm:pt-24="" lg:pb-48="" lg:pt-40\">\n="" mx-auto="" sm:text-6xl\">summer="" finally="" here<="" text-xl="" text-gray-500\">this="" year,="" summer="" collection="" shelter="" harsh="" world="" that="" doesn't="" care="" live="" die.<="" decorative="" lg:absolute="" lg:inset-y-0="" lg:mx-auto="" lg:w-full="" lg:max-w-7xl\">\n="" sm:left-1="" sm:top-0="" sm:translate-x-8="" lg:left-1="" lg:top-1="" lg:-translate-y-1="" lg:translate-x-8\">\n="" space-x-6="" lg:space-x-8\">\n="" gap-y-6="" w-44="" sm:opacity-0="" lg:opacity-100\">\n="" hover:bg-indigo-700\">shop="" collection<="" div>\n"},{"language":"react","highlight":"jsx","label":"react","snippet":"export="" sm:text-6xl\">\n="" here\n="" care\n="" die.\n="" <div\n="" lg:max-w-7xl\"\n="" collection\n="" template>\n"}],"largewidth":1280,"largeheight":662,"smallwidth":375,"smallheight":682,"smallscreenshoturl":"="" promo-sections.07-with-image-tiles-xs.png","largescreenshoturl":"="" promo-sections.07-with-image-tiles-xl.png","subcategory":{"name":"promo="" sections","url":"="" promo-sections","category":{"name":"components","url":"="" stats","uuid":"813ce86310c2c337070a66a152012665","isnew":false,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":false,"iframehtml":"<!doctype="" isolate="" sm:py-32\">\n="" -z-10="" object-right="" md:object-center\">\n="" sm:absolute="" sm:-top-10="" sm:right-1="" sm:-z-10="" sm:mr-10="" sm:block="" sm:transform-gpu="" sm:blur-3xl\"="" w-[68.5625rem]="" bg-gradient-to-tr="" from-[#ff4694]="" to-[#776fff]="" opacity-20\"="" polygon(74.1%="" 44.1%,="" 61.6%,="" 97.5%="" 26.9%,="" 85.5%="" 0.1%,="" 80.7%="" 2%,="" 72.5%="" 32.5%,="" 60.2%="" 62.4%,="" 52.4%="" 68.1%,="" 47.5%="" 58.3%,="" 45.2%="" 34.5%,="" 27.5%="" 76.7%,="" 0.1%="" 64.9%,="" 17.9%="" 100%,="" 27.6%="" 76.8%,="" 76.1%="" 97.7%,="" 74.1%="" 44.1%)\"><="" -top-52="" left-1="" -translate-x-1="" transform-gpu="" blur-3xl="" sm:top-[-28rem]="" sm:ml-16="" sm:translate-x-0="" sm:transform-gpu\"="" lg:mx-0\">\n="" sm:text-6xl\">work="" us<="" leading-8="" text-gray-300\">anim="" magna="" aliqua="" non="" sunt.="" lorem="" cupidatat="" commodo.="" elit="" sunt="" amet="" veniam="" occaecat="" aliqua.<="" mt-10="" lg:mx-0="" lg:max-w-none\">\n="" md:flex="" lg:gap-x-10\">\n="" roles="" program="" values="" leadership="" gap-8="" sm:mt-20="" text-gray-300\">offices="" worldwide<="" text-white\">12<="" text-gray-300\">full-time="" colleagues<="" text-white\">300+<="" text-gray-300\">hours="" per="" week<="" text-white\">40<="" text-gray-300\">paid="" time="" off<="" text-white\">unlimited<="" 'open="" roles',="" 'internship="" program',="" 'our="" values',="" 'meet="" leadership',="" stats="[\n" 'offices="" worldwide',="" '12'="" 'full-time="" colleagues',="" '300+'="" 'hours="" week',="" '40'="" 'paid="" off',="" 'unlimited'="" md:object-center\"\n="" sm:blur-3xl\"\n="" clippath:\n="" 'polygon(74.1%="" 44.1%)',\n="" opacity-20\"\n="" sm:transform-gpu\"\n="" amet\n="" aliqua.\n="" {links.map((link)=">" {link.name}="" {stats.map((stat)=">" text-gray-300\">{stat.name}<="" text-white\">{stat.value}<="" md:object-center\"="" 44.1%)\"="" links\"="" link.name="" stats\"="" text-gray-300\">{{="" stat.name="" stat.value="" script>"}],"largewidth":1280,"largeheight":616,"smallwidth":375,"smallheight":1024,"smallscreenshoturl":"="" header-section.01-with-stats-xs.png","largescreenshoturl":"="" header-section.01-with-stats-xl.png","subcategory":{"name":"header="" marketing="" sections="" header","category":{"name":"page="" components#product-marketing-sections","product":{"name":"marketing","url":"="" components#product-marketing"}}}},{"name":"centered","uuid":"986addbc8678313fba5b0dd59c778e9b","isnew":false,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":true,"iframehtml":"<!doctype="" top-[-10rem]="" sm:top-[-20rem]\"="" aspect-[1155="" 678]="" w-[36.125rem]="" max-w-none="" rotate-[30deg]="" from-[#ff80b5]="" to-[#9089fc]="" opacity-30="" sm:left-[calc(50%-40rem)]="" sm:w-[72.1875rem]\"="" text-center\">\n="" sm:text-4xl\">contact="" sales<="" text-gray-600\">aute="" enim="" voluptate.<="" mt-16="" max-w-xl="" sm:mt-20\">\n="" sm:grid-cols-2\">\n="" px-3.5="" text-gray-900\">email<="" text-gray-900\">phone="" number<="" mt-2.5\">\n="" bg-none="" <option>us<="" <option>ca<="" <option>eu<="" right-3="" pl-20="" text-gray-900\">message<="" gap-x-4="" sm:col-span-2\"="" on:="" flex-none="" p-px="" focus-visible:outline-indigo-600\"="" aria-checked="\"false\"" enabled\"="" 'bg-indigo-600':="" on,="" 'bg-gray-200':="" !(on)="" :aria-checked="\"on.toString()\"" !on\">\n="" policies<="" h-4="" ease-in-out\"="" 'translate-x-3.5':="" 'translate-x-0':="" text-gray-600\"="" !on;="" $refs.switch.focus()\">\n="" selecting="" this,="" agree="" our\n="" text-indigo-600\">privacy policy<="" a>.\n="" py-2.5="" focus-visible:outline-indigo-600\">let's="" talk<="" sm:col-span-2\">\n="" enabled:="" \"bg-indigo-600\",="" \"bg-gray-200\"="" \"translate-x-3.5\",="" \"translate-x-0\"="" translate-x-0="" ease-in-out\"><="" field,="" switch="" [agreed,="" setagreed]="useState(false)\n\n" sm:top-[-20rem]\"\n="" sm:w-[72.1875rem]\"\n="" voluptate.\n="" company\n="" phone="" number\n="" message\n="" <field="" <switch\n="" focus-visible:outline-indigo-600="" data-[checked]:bg-indigo-600\"\n="" group-data-[checked]:translate-x-3.5\"\n="" switch>\n="" our{'="" privacy policy\n="" .\n="" field>\n="" let's="" talk\n="" <switchgroup="" <switch="" 'bg-indigo-600'="" 'flex="" focus-visible:outline-indigo-600']\">\n="" 'translate-x-3.5'="" 'translate-x-0',="" 'h-4="" ease-in-out']\"="" <switchlabel="" switchlabel>\n="" switchgroup>\n="" switch,="" switchgroup,="" switchlabel="" agreed="ref(false)\n"}],"largeWidth":1280,"largeHeight":1082,"smallWidth":375,"smallHeight":1152,"smallScreenshotUrl":"/plus/img/components/contact-sections.01-centered-xs.png","largeScreenshotUrl":"/plus/img/components/contact-sections.01-centered-xl.png","subcategory":{"name":"Contact" contact-sections","category":{"name":"page="" components#product-marketing"}}}},{"name":"three-column","uuid":"b8172652fa29dc3eac306c2a8a922323","isnew":false,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":false,"iframehtml":"<!doctype="" sm:text-4xl\">from="" blog<="" text-gray-600\">learn="" how="" grow="" business="" expert="" advice.<="" sm:mt-16="" sm:pt-16="" lg:grid-cols-3\">\n="" <article="" text-xs\">\n="" <time="" datetime="\"2020-03-16\"" 16,="" 2020<="" time>\n="" text-gray-600="" hover:bg-gray-100\">marketing<="" group-hover:text-gray-600\">\n="" boost="" conversion="" rate\n="" line-clamp-3="" text-gray-600\">illo="" voluptas.="" error="" voluptates="" eligendi.="" hic="" vel="" totam="" vitae="" illo.="" aliquid="" explicabo="" necessitatibus="" unde.="" sed="" exercitationem="" placeat="" consectetur="" vel.="" iusto="" corrupti="" dicta.<="" mt-8="" bg-gray-50\">\n="" michael="" foster\n="" cto<="" article>\n="" 10,="" hover:bg-gray-100\">sales<="" engine="" optimization="" drive="" sales\n="" text-gray-600\">optio="" cum="" dolor="" voluptatum="" provident="" commodi="" et.="" aperiam="" nemo="" cumque.<="" lindsay="" walton\n="" 12,="" hover:bg-gray-100\">business<="" improve="" customer="" experience\n="" text-gray-600\">cupiditate="" maiores="" ullam="" eveniet="" adipisci="" doloribus="" minus.="" voluptas="" libero="" rem="" et="" corporis.="" aliqua.="" eu="" labore="" velit="" quis="" dolore.<="" tom="" cook\n="" product<="" article>\n\n="" posts...="" 'boost="" rate',\n="" 'illo="" dicta.',\n="" date:="" 'mar="" 2020',\n="" datetime:="" '2020-03-16',\n="" category:="" 'marketing',="" author:="" 'michael="" foster',\n="" role:="" 'co-founder="" cto',\n="" photo-1519244703995-f4e0f30006d5?ixlib="rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80',\n" posts...\n]\n\nexport="" learn="" advice.\n="" {posts.map((post)=">" {post.date}\n="" hover:bg-gray-100\"\n="" {post.category.title}\n="" {post.title}\n="" text-gray-600\">{post.description}<="" bg-gray-50\"="" {post.author.name}\n="" posts\"="" :datetime="\"post.datetime\"" post.date="" hover:bg-gray-100\">{{="" post.category.title="" post.title="" post.description="" post.author.name="" post.author.role="" posts...\n]\n<="" script>"}],"largewidth":1280,"largeheight":701,"smallwidth":375,"smallheight":1241,"smallscreenshoturl":"="" blog-sections.01-three-column-xs.png","largescreenshoturl":"="" blog-sections.01-three-column-xl.png","subcategory":{"name":"blog="" blog-sections","category":{"name":"page="" components#product-marketing"}}}},{"name":"with="" images","uuid":"1ea7e52a3e89a3cf7b4a0a4fd2dcdf84","isnew":false,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":false,"iframehtml":"<!doctype="" gap-y-20="" xl:grid-cols-3\">\n="" sm:text-4xl\">meet="" leadership<="" text-gray-600\">libero="" fames="" augue="" nisl="" porttitor="" nisi,="" quis.="" ac="" odio="" elementum="" ullamcorper="" suspendisse.<="" gap-y-12="" xl:col-span-2\">\n="" w-16="" text-gray-900\">leslie="" alexander<="" text-indigo-600\">co-founder="" ceo<="" text-gray-900\">michael="" text-gray-900\">dries="" vincent<="" text-indigo-600\">business="" relations<="" text-gray-900\">lindsay="" walton<="" text-indigo-600\">front-end="" text-gray-900\">courtney="" henry<="" text-indigo-600\">designer<="" text-gray-900\">tom="" text-indigo-600\">director="" people...="" 'leslie="" alexander',\n="" ceo',\n="" people...\n]\n\nexport="" ullamcorper\n="" suspendisse.\n="" text-gray-900\">{person.name}<="" text-indigo-600\">{person.role}<="" text-indigo-600\">{{="" person.role="" people...\n]\n<="" script>"}],"largewidth":1280,"largeheight":576,"smallwidth":375,"smallheight":1052,"smallscreenshoturl":"="" team-sections.01-small-images-xs.png","largescreenshoturl":"="" team-sections.01-small-images-xl.png","subcategory":{"name":"team="" team-sections","category":{"name":"page="" components#product-marketing"}}}},{"name":"dark="" app="" screenshot","uuid":"0763876148e2fa400b4f1cf13cdf0093","isnew":false,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":false,"iframehtml":"<!doctype="" sm:rounded-3xl="" sm:px-16="" md:pt-24="" lg:gap-x-20="" lg:px-24="" lg:pt-0\">\n="" 1024="" 1024\"="" h-[64rem]="" w-[64rem]="" -translate-y-1="" [mask-image:radial-gradient(closest-side,white,transparent)]="" sm:left-full="" sm:-ml-80="" lg:ml-0="" lg:-translate-x-1="" lg:translate-y-0\"="" <circle="" cx="\"512\"" cy="\"512\"" r="\"512\"" fill-opacity="\"0.7\">\n" <radialgradient="" <stop="" stop-color="\"#7775D6\">\n" offset="\"1\"" radialgradient>\n="" lg:flex-auto="" lg:py-32="" lg:text-left\">\n="" sm:text-4xl\">boost="" productivity.<br>start="" today.<="" text-gray-300\">ac="" euismod="" maecenas="" pellentesque="" consectetur.="" malesuada="" adipiscing="" sagittis="" nulla.<="" lg:justify-start\">\n="" hover:bg-gray-100="" focus-visible:outline-white\">get="" started<="" text-white\">learn="" lg:mt-8\">\n="" w-[57rem]="" ring-white="" screenshot\"="" 1024\"\n="" lg:translate-y-0\"\n="" fillopacity="\"0.7\"" stopcolor="\"#7775D6\"" sm:text-4xl\">\n="" productivity.\n="" <br="" today.\n="" nulla.\n="" focus-visible:outline-white\"\n="" started\n="" text-white\">\n="" screenshot\"\n="" 10\"\n="" productivity.<br="" >start="" template>\n"}],"largewidth":1280,"largeheight":760,"smallwidth":375,"smallheight":948,"smallscreenshoturl":"="" cta-sections.01-dark-panel-with-app-screenshot-xs.png","largescreenshoturl":"="" cta-sections.01-dark-panel-with-app-screenshot-xl.png","subcategory":{"name":"cta="" cta-sections","category":{"name":"page="" components#product-marketing"}}}},{"name":"simple","uuid":"b5eb58f5c8fd565cc54bf488d647f02b","isnew":false,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":false,"iframehtml":"<!doctype="" gap-y-4\">\n="" text-gray-600\">transactions="" every="" hours<="" text-3xl="" sm:text-5xl\">44="" million<="" text-gray-600\">assets="" under="" holding<="" sm:text-5xl\">$119="" trillion<="" users="" annually<="" sm:text-5xl\">46,000<="" 'transactions="" hours',="" '44="" million'="" 'assets="" holding',="" '$119="" trillion'="" annually',="" '46,000'="" text-gray-600\">{stat.name}<="" sm:text-5xl\">\n="" {stat.value}\n="" sm:text-5xl\">{{="" script>"}],"largewidth":1280,"largeheight":348,"smallwidth":375,"smallheight":560,"smallscreenshoturl":"="" stat-sections.01-simple-xs.png","largescreenshoturl":"="" stat-sections.01-simple-xl.png","subcategory":{"name":"stats","url":"="" stats-sections","category":{"name":"page="" components#product-marketing"}}}},{"name":"three="" column="" bento="" grid","uuid":"dc65cfa183921e10d45c401610332cca","isnew":true,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":false,"iframehtml":"<!doctype="" text-indigo-600\">deploy="" faster<="" text-pretty="" text-4xl="" text-gray-950="" sm:text-5xl\">everything="" deploy="" app.<="" lg:grid-rows-2\">\n="" lg:row-span-2\">\n="" inset-px="" lg:rounded-l-[2rem]\"><="" rounded-[calc(theme(borderradius.lg)+1px)]="" lg:rounded-l-[calc(2rem+1px)]\">\n="" pt-8="" sm:px-10="" sm:pb-0="" sm:pt-10\">\n="" max-lg:text-center\">mobile="" friendly<="" max-lg:text-center\">anim="" commodo.<="" min-h-[30rem]="" [container-type:inline-size]="" max-lg:mx-auto="" max-lg:max-w-sm\">\n="" inset-x-10="" bottom-0="" top-10="" rounded-t-[12cqw]="" border-x-[3cqw]="" border-t-[3cqw]="" shadow-2xl\">\n="" object-top\"="" max-lg:row-start-1\">\n="" max-lg:rounded-t-[2rem]\"><="" max-lg:rounded-t-[calc(2rem+1px)]\">\n="" max-lg:text-center\">performance<="" max-lg:text-center\">lorem="" ipsum,="" impedit.<="" max-lg:pb-12="" max-lg:pt-10="" lg:pb-2\">\n="" max-lg:max-w-xs\"="" max-lg:row-start-3="" lg:col-start-2="" lg:row-start-2\">\n="" rounded-[calc(theme(borderradius.lg)+1px)]\">\n="" max-lg:text-center\">security<="" max-lg:text-center\">morbi="" viverra="" dui="" mi="" arcu="" sed.="" tellus="" semper="" suspendisse="" morbi.<="" max-lg:py-6="" 5\"><="" max-lg:rounded-b-[2rem]="" lg:rounded-r-[2rem]\"><="" max-lg:rounded-b-[calc(2rem+1px)]="" lg:rounded-r-[calc(2rem+1px)]\">\n="" max-lg:text-center\">powerful="" apis<="" max-lg:text-center\">sit="" rutrum="" ultricies="" eget="" sem="" sodales="" gravida.<="" grow\">\n="" left-10="" rounded-tl-xl="" 40="" border-r="" border-b-white="" border-r-white="" text-white\">notificationsetting.jsx<="" border-gray-600="" py-2\">app.jsx<="" pb-14="" <x-placeholder="" message="\"Your" code="" example\">\n="" <pre="" 2\"><code>import="" {="" }="" example<="" span>()="" {\n	const="" [<span="" usestate(<span="" (\n		<<span="" ...="" */<="" span>}\n			</<span="" everything="" app.\n="" max-lg:text-center\">\n="" friendly\n="" commodo.\n="" object-top\"\n="" performance\n="" impedit.\n="" max-lg:max-w-xs\"\n="" morbi="" morbi.\n="" powerful="" apis\n="" gravida.\n="" notificationsetting.jsx\n="" pt-6\">{="" lg:rounded-l-[2rem]\"="" max-lg:rounded-t-[2rem]\"="" bg-white\"="" 5\"="" lg:rounded-r-[2rem]\"="" template>\n"}],"largewidth":1280,"largeheight":1064,"smallwidth":375,"smallheight":2243,"smallscreenshoturl":"="" bento-grids.01-three-column-bento-grid-xs.png","largescreenshoturl":"="" bento-grids.01-three-column-bento-grid-xl.png","subcategory":{"name":"bento="" grids","url":"="" bento-grids","category":{"name":"page="" components#product-marketing"}}}},{"name":"side-by-side="" details","uuid":"82fc139db99143307df48bb9fe6152c5","isnew":false,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":false,"iframehtml":"<!doctype="" lg:grid-cols-2\">\n="" lg:max-w-lg\">\n="" sm:text-4xl\">subscribe="" newsletter.<="" text-gray-300\">nostrud="" ullamco="" nisi="" minim="" duis="" tempor="" flex-auto="" email\">\n="" bg-indigo-500="" hover:bg-indigo-400="" focus-visible:outline-indigo-500\">subscribe<="" lg:pt-2\">\n="" items-start\">\n="" 10\">\n="" 3v2.25m17.25="" 3v2.25m3="" 18.75v7.5a2.25="" 012.25-2.25h13.5a2.25="" 0121="" 7.5v11.25m-18="" 0a2.25="" 005.25="" 21h13.5a2.25="" 18.75m-18="" 0v-7.5a2.25="" 015.25="" 9h13.5a2.25="" 11.25v7.5m-9-6h.008v.008h12v-.008zm12="" 15h.008v.008h12v15zm0="" 2.25h.008v.008h12v-.008zm9.75="" 15h.008v.008h9.75v15zm0="" 2.25h.008v.008h9.75v-.008zm7.5="" 15h.008v.008h7.5v15zm0="" 2.25h.008v.008h7.5v-.008zm6.75-4.5h.008v.008h-.008v-.008zm0="" 2.25h.008v.008h-.008v15zm0="" 2.25h.008v.008h-.008v-.008zm2.25-4.5h.008v.008h16.5v-.008zm0="" 2.25h.008v.008h16.5v15z\"><="" text-white\">weekly="" articles<="" text-gray-400\">non="" laboris="" laborum="" magna.="" eiusmod="" commodo="" amet.<="" 4.575a1.575="" 1.575="" 10-3.15="" 0v3m3.15-3v-1.5a1.575="" 013.15="" 0v1.5m-3.15="" 0l.075="" 5.925m3.075.75v4.575m0="" 0a1.575="" 0v15m6.9="" 7.575a1.575="" 0v8.175a6.75="" 6.75="" 6.75h2.018a5.25="" 5.25="" 003.712-1.538l1.732-1.732a5.25="" 001.538-3.712l.003-2.024a.668.668="" 01.198-.471="" 10-2.228-2.228="" 3.818="" 00-1.12="" 2.687m6.9="" 7.575v12m6.27="" 4.318a4.49="" 4.49="" 0116.35="" 15m.002="" 0h-.002\"><="" text-white\">no="" spam<="" text-gray-400\">officia="" ut="" proident="" adipisicing.="" voluptate="" anim.<="" xl:-top-6\"="" w-[72.1875rem]="" opacity-30\"="" 2.25h.008v.008h16.5v15z\"="" 0h-.002\"="" calendardaysicon,="" handraisedicon="" incididunt\n="" dolore.\n="" email\"\n="" focus-visible:outline-indigo-500\"\n="" subscribe\n="" <calendardaysicon="" amet.\n="" <handraisedicon="" anim.\n="" xl:-top-6\">\n="" opacity-30\"\n="" email\"="" outline'\n<="" script>"}],"largewidth":1280,"largeheight":440,"smallwidth":375,"smallheight":796,"smallscreenshoturl":"="" newsletter-sections.01-side-by-side-with-details-xs.png","largescreenshoturl":"="" newsletter-sections.01-side-by-side-with-details-xl.png","subcategory":{"name":"newsletter="" newsletter-sections","category":{"name":"page="" components#product-marketing"}}}},{"name":"simple="" centered","uuid":"b9bcab4538776a17fff93d18f82a8272","isnew":false,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":true,"iframehtml":"<!doctype="" i="Object.defineProperty;var" k="Object.getOwnPropertyDescriptor;var" b="Object.getOwnPropertyNames;var" s="Object.getPrototypeOf,D=Object.prototype.hasOwnProperty;var" u="(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports);var" n="(r,e,a,t)=>{if(e&&typeof" e="=\"object\"||typeof" b(e))!d.call(r,s)&&s!="=a&&i(r,s,{get:()=>e[s],enumerable:!(t=k(e,s))||t.enumerable});return" r};var="" f="(r,e,a)=>(a=r!=null?A(S(r)):{},N(e||!r||!r.__esModule?i(a,\"default\",{value:r,enumerable:!0}):a,r));var" g="u((O,I)=>{I.exports=window.ReactDOMClient});var" w="u((q,h)=>{h.exports=window.headlessui});var" l({title:r,titleid:e,...a},t){return="" n.createelement(\"svg\",object.assign({xmlns:\"http:="" www.w3.org="" 2000="" svg\",fill:\"none\",viewbox:\"0="" 24\",strokewidth:1.5,stroke:\"currentcolor\",\"aria-hidden\":\"true\",ref:t,\"aria-labelledby\":e},a),r?n.createelement(\"title\",{id:e},r):null,n.createelement(\"path\",{strokelinecap:\"round\",strokelinejoin:\"round\",d:\"m3.75="" 5.25h16.5\"}))}var="" p="n.forwardRef(L),c=P;var" l="f(d(),1);function" m({title:r,titleid:e,...a},t){return="" l.createelement(\"svg\",object.assign({xmlns:\"http:="" 24\",strokewidth:1.5,stroke:\"currentcolor\",\"aria-hidden\":\"true\",ref:t,\"aria-labelledby\":e},a),r?l.createelement(\"title\",{id:e},r):null,l.createelement(\"path\",{strokelinecap:\"round\",strokelinejoin:\"round\",d:\"m6="" 12\"}))}var="" c="[{name:\"Product\",href:\"#\"},{name:\"Features\",href:\"#\"},{name:\"Marketplace\",href:\"#\"},{name:\"Company\",href:\"#\"}];function" y(){let[r,e]="(0,b.useState)(!1);return" o.default.createelement(\"div\",{classname:\"overflow-hidden\"},o.default.createelement(\"div\",{classname:\"bg-white\"},o.default.createelement(\"header\",{classname:\"absolute="" z-50\"},o.default.createelement(\"nav\",{\"aria-label\":\"global\",classname:\"flex="" p-6="" lg:px-8\"},o.default.createelement(\"div\",{classname:\"flex="" lg:flex-1\"},o.default.createelement(\"a\",{href:\"#\",classname:\"-m-1.5="" p-1.5\"},o.default.createelement(\"span\",{classname:\"sr-only\"},\"your="" company\"),o.default.createelement(\"img\",{alt:\"\",src:\"https:="" logos="" mark.svg?color="indigo&shade=600\",className:\"h-8" w-auto\"}))),o.default.createelement(\"div\",{classname:\"flex="" lg:hidden\"},o.default.createelement(\"button\",{type:\"button\",onclick:()=">e(!0),className:\"-m-2.5" p-2.5="" text-gray-700\"},o.default.createelement(\"span\",{classname:\"sr-only\"},\"open="" menu\"),o.default.createelement(c,{\"aria-hidden\":\"true\",classname:\"h-6="" w-6\"}))),o.default.createelement(\"div\",{classname:\"hidden="" lg:gap-x-12\"},c.map(a=">o.default.createElement(\"a\",{key:a.name,href:a.href,className:\"text-sm" text-gray-900\"},a.name))),o.default.createelement(\"div\",{classname:\"hidden="" lg:justify-end\"},o.default.createelement(\"a\",{href:\"#\",classname:\"text-sm="" text-gray-900\"},\"log="" \",o.default.createelement(\"span\",{\"aria-hidden\":\"true\"},\"\\u2192\")))),o.default.createelement(m.dialog,{open:r,onclose:e,classname:\"lg:hidden\"},o.default.createelement(\"div\",{classname:\"fixed="" z-50\"}),o.default.createelement(m.dialogpanel,{classname:\"fixed="" z-50="" sm:max-w-sm="" sm:ring-1="" sm:ring-gray-900="" 10\"},o.default.createelement(\"div\",{classname:\"flex="" justify-between\"},o.default.createelement(\"a\",{href:\"#\",classname:\"-m-1.5="" w-auto\"})),o.default.createelement(\"button\",{type:\"button\",onclick:()=">e(!1),className:\"-m-2.5" text-gray-700\"},o.default.createelement(\"span\",{classname:\"sr-only\"},\"close="" menu\"),o.default.createelement(p,{\"aria-hidden\":\"true\",classname:\"h-6="" w-6\"}))),o.default.createelement(\"div\",{classname:\"mt-6="" flow-root\"},o.default.createelement(\"div\",{classname:\"-my-6="" divide-gray-500="" 10\"},o.default.createelement(\"div\",{classname:\"space-y-2="" py-6\"},c.map(a=">o.default.createElement(\"a\",{key:a.name,href:a.href,className:\"-mx-3" hover:bg-gray-50\"},a.name))),o.default.createelement(\"div\",{classname:\"py-6\"},o.default.createelement(\"a\",{href:\"#\",classname:\"-mx-3="" hover:bg-gray-50\"},\"log="" in\"))))))),o.default.createelement(\"div\",{classname:\"relative="" lg:px-8\"},o.default.createelement(\"div\",{\"aria-hidden\":\"true\",classname:\"absolute="" -top-40="" sm:-top-80\"},o.default.createelement(\"div\",{style:{clippath:\"polygon(74.1%="" 44.1%)\"},classname:\"relative="" left-[calc(50%-11rem)]="" sm:left-[calc(50%-30rem)]="" sm:w-[72.1875rem]\"})),o.default.createelement(\"div\",{classname:\"mx-auto="" py-32="" sm:py-48="" lg:py-56\"},o.default.createelement(\"div\",{classname:\"hidden="" sm:mb-8="" sm:justify-center\"},o.default.createelement(\"div\",{classname:\"relative="" hover:ring-gray-900="" 20\"},\"announcing="" next="" round="" funding.\",\"="" \",o.default.createelement(\"a\",{href:\"#\",classname:\"font-semibold="" text-indigo-600\"},o.default.createelement(\"span\",{\"aria-hidden\":\"true\",classname:\"absolute="" inset-0\"}),\"read="" \",o.default.createelement(\"span\",{\"aria-hidden\":\"true\"},\"\\u2192\")))),o.default.createelement(\"div\",{classname:\"text-center\"},o.default.createelement(\"h1\",{classname:\"text-4xl="" sm:text-6xl\"},\"data="" enrich="" online="" business\"),o.default.createelement(\"p\",{classname:\"mt-6="" text-gray-600\"},\"anim="" aliqua.\"),o.default.createelement(\"div\",{classname:\"mt-10="" gap-x-6\"},o.default.createelement(\"a\",{href:\"#\",classname:\"rounded-md="" focus-visible:outline-indigo-600\"},\"get="" started\"),o.default.createelement(\"a\",{href:\"#\",classname:\"text-sm="" text-gray-900\"},\"learn="" \",o.default.createelement(\"span\",{\"aria-hidden\":\"true\"},\"\\u2192\"))))),o.default.createelement(\"div\",{\"aria-hidden\":\"true\",classname:\"absolute="" top-[calc(100%-13rem)]="" sm:top-[calc(100%-30rem)]\"},o.default.createelement(\"div\",{style:{clippath:\"polygon(74.1%="" left-[calc(50%+3rem)]="" sm:left-[calc(50%+36rem)]="" sm:w-[72.1875rem]\"})))))}document.body.innerhtml="'
" <item.icon="" text-gray-600\">{item.description}<="" {callstoaction.map((item)=">" features\n="" marketplace\n="" popovergroup>\n="" group-data-[open]:rotate-180\"="" space-y-2\">\n="" {[...products,="" ...callstoaction].map((item)=">" translate-y-1\">\n="" item.description="" callstoaction\"="" 'rotate-180'="" flex-none']\"="" [...products,="" ...callstoaction]\"="" actions","uuid":"911576fb54922e5199a9434ca8a273fd","isnew":false,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":true,"iframehtml":"<!doctype="" 712px\">\n="" <span>solutions<="" mt-5="" max-w-max="" customers'="" popoverbutton,="" popoverpanel="" squaresplusicon,\n}="" solutions="[\n" \"your="" customers'="" secure\",="" {solutions.map((item)=">" solutions\"="" popover>\n<="" script>"}],"largewidth":1280,"largeheight":712,"smallwidth":375,"smallheight":712,"smallscreenshoturl":"="" flyout-menus.01-stacked-with-footer-actions-xs.png","largescreenshoturl":"="" flyout-menus.01-stacked-with-footer-actions-xl.png","subcategory":{"name":"flyout="" flyout-menus","category":{"name":"elements","url":"="" components#product-marketing"}}}},{"name":"single="" price="" details","uuid":"56cbd4f191ac0d54e5a5c0287481d5b9","isnew":false,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":false,"iframehtml":"<!doctype="" sm:text-center\">\n="" sm:text-4xl\">simple="" no-tricks="" pricing<="" text-gray-600\">distinctio="" eum="" soluta="" quibusdam.="" saepe="" quasi="" modi="" laborum.<="" ring-gray-200="" sm:p-10="" lg:flex-auto\">\n="" text-gray-900\">lifetime="" membership<="" consect="" etur="" itaque="" indis="" repellendus="" quidem="" assumenda.<="" text-indigo-600\">what’s="" included<="" h4>\n="" bg-gray-100\"><="" sm:gap-6\">\n="" private="" forum="" access\n="" member="" resources\n="" entry="" annual="" conference\n="" official="" t-shirt\n="" lg:mt-0="" lg:max-w-md="" lg:flex-shrink-0\">\n="" py-10="" lg:flex-col="" lg:justify-center="" lg:py-16\">\n="" text-gray-600\">pay="" once,="" own="" forever<="" gap-x-2\">\n="" text-gray-900\">$349<="" tracking-wide="" text-gray-600\">usd<="" access<="" text-gray-600\">invoices="" receipts="" available="" easy="" company="" reimbursement<="" checkicon="" includedfeatures="[\n" 'private="" access',\n="" 'member="" resources',\n="" 'entry="" conference',\n="" 'official="" t-shirt',\n]\n\nexport="" distinctio="" voluptas\n="" laborum.\n="" blanditiis\n="" assumenda.\n="" sm:gap-6\"\n="" {includedfeatures.map((feature)=">" {feature}\n="" invoices="" reimbursement\n="" includedfeatures\"="" feature="" t-shirt',\n]\n<="" script>"}],"largewidth":1280,"largeheight":844,"smallwidth":375,"smallheight":1240,"smallscreenshoturl":"="" pricing.02-single-price-with-details-xs.png","largescreenshoturl":"="" pricing.02-single-price-with-details-xl.png","subcategory":{"name":"pricing="" pricing","category":{"name":"page="" components#product-marketing"}}}},{"name":"centered="" 2x2="" grid","uuid":"64ac58e032276db96bf343a8d4f332a8","isnew":false,"downloadable":true,"imagecreditshtml":null,"requiresjavascript":false,"iframehtml":"<!doctype="" lg:text-center\">\n="" sm:text-4xl\">everything="" app<="" text-gray-600\">quis="" egestas="" pulvinar="" at.="" nunc.<="" lg:mt-24="" lg:gap-y-16\">\n="" pl-16\">\n="" bg-indigo-600\">\n="" 16.5v9.75m0="" 3m-3-3l-3="" 3m6.75="" 19.5a4.5="" 01-1.41-8.775="" 0110.233-2.33="" 013.758="" 3.848a3.752="" 3.752="" 19.5h6.75z\"><="" deploy\n="" text-gray-600\">morbi="" morbi.="" nunc="" massa.<="" 10.5v6.75a4.5="" 10-9="" 0v3.75m-.75="" 11.25h10.5a2.25="" 002.25-2.25v-6.75a2.25="" 00-2.25-2.25h6.75a2.25="" 2.25v6.75a2.25="" certificates\n="" text-gray-600\">sit="" eget.="" gravida="" quam="" simple="" queues\n="" text-gray-600\">quisque="" est="" cursus.="" proin="" lobortis="" congue="" neque.<="" advanced="" text-gray-600\">arcu="" pharetra="" eget.<="" 19.5h6.75z\"="" arrowpathicon,="" fingerprinticon,="" lockclosedicon="" deploy',\n="" 'morbi="" massa.',\n="" certificates',\n="" 'sit="" amet.',\n="" 'simple="" queues',\n="" 'quisque="" neque.',\n="" 'advanced="" security',\n="" 'arcu="" eget.',\n="" app\n="" elementum\n="" nunc.\n="" text-gray-600\">{feature.description}<="" script>"}],"largewidth":1280,"largeheight":820,"smallwidth":375,"smallheight":1228,"smallscreenshoturl":"="" feature-sections.02-centered-2x2-grid-xs.png","largescreenshoturl":"="" feature-sections.02-centered-2x2-grid-xl.png","subcategory":{"name":"feature="" components#product-marketing"}}}}]},"url":"="" preview","version":""}"="">
Component playground Step 1 Find a component Find the perfect component Every component is embedded live directly on the page, and you can even see what they look like at different breakpoints by dragging the slider on the right.
Step 2 Copy the snippet Click the "Code" tab to see the code for a component and grab the part that you need, or click the clipboard button to quickly copy the entire snippet in one step.
Step 3 Make it yours Every component is built entirely out of Tailwind utility classes, so you can easily dive in and adjust anything you want to better fit your use case.