Created
August 20, 2024 21:47
-
-
Save neisdev/864cc1e95eddf8080ccaaf3a4d483b87 to your computer and use it in GitHub Desktop.
Rb3.0 Billing - Plan
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="relative h-screen flex overflow-y-auto lg:overflow-hidden bg-gradient-to-r from-white via-blue-50 to-gray-50"> | |
| <!-- Not in use: Off-canvas menu for mobile, show/hide based on off-canvas menu state. --> | |
| <div class="fixed inset-0 flex z-40 lg:hidden" role="dialog" aria-modal="true" style="display: none;"> | |
| <!-- | |
| Off-canvas menu overlay, show/hide based on off-canvas menu state. | |
| Entering: "transition-opacity ease-linear duration-300" | |
| From: "opacity-0" | |
| To: "opacity-100" | |
| Leaving: "transition-opacity ease-linear duration-300" | |
| From: "opacity-100" | |
| To: "opacity-0" | |
| --> | |
| <div class="fixed inset-0 bg-gray-600 bg-opacity-75" aria-hidden="true"></div> | |
| <!-- | |
| Off-canvas menu, show/hide based on off-canvas menu state. | |
| Entering: "transition ease-in-out duration-300 transform" | |
| From: "-translate-x-full" | |
| To: "translate-x-0" | |
| Leaving: "transition ease-in-out duration-300 transform" | |
| From: "translate-x-0" | |
| To: "-translate-x-full" | |
| --> | |
| <div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-gray-800"> | |
| <!-- | |
| Close button, show/hide based on off-canvas menu state. | |
| Entering: "ease-in-out duration-300" | |
| From: "opacity-0" | |
| To: "opacity-100" | |
| Leaving: "ease-in-out duration-300" | |
| From: "opacity-100" | |
| To: "opacity-0" | |
| --> | |
| <div class="absolute top-0 right-0 -mr-12 pt-2"> | |
| <button type="button" class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"> | |
| <span class="sr-only">Close sidebar</span> | |
| <!-- Heroicon name: outline/x --> | |
| <svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| <div class="flex-shrink-0 flex items-center px-4"> | |
| <img class="h-8 w-auto" src="https://app.rollbar.com//images/common/rollbar-icon-white.svg" alt="Workflow"> | |
| </div> | |
| <div class="mt-5 flex-1 h-0 overflow-y-auto"> | |
| <nav class="px-2"> | |
| <div class="space-y-1 text-base font-normal tracking-wide text-gray-200"> | |
| <a href="#" class="hover:bg-gray-700 hover:text-gray-200 group py-2 px-3 rounded-md flex items-center"> | |
| <!--Heroicon name: outline/chart square--> | |
| <svg class="text-gray-300 group-hover:text-gray-100 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path> | |
| </svg> | |
| <span>Dashboard</span> | |
| </a> | |
| <a href="#" class="hover:bg-gray-700 hover:text-gray-200 group py-2 px-3 rounded-md flex items-center"> | |
| <!-- Heroicon name: outline/view list --> | |
| <svg class="text-gray-300 group-hover:text-gray-100 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path> | |
| </svg> | |
| <span>Items</span> | |
| </a> | |
| <a href="#" class="hover:bg-gray-700 hover:text-gray-200 group py-2 px-3 rounded-md flex items-center"> | |
| <!-- Heroicon name: outline/view list --> | |
| <svg class="text-gray-300 group-hover:text-gray-100 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" fill="currentColor" aria-hidden="true"> | |
| <g fill-rule="evenodd"> | |
| <path d="M6 20a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm0-2a3 3 0 1 1 0 6 3 3 0 0 1 0-6zM6 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm0-2a3 3 0 1 1 0 6 3 3 0 0 1 0-6zM18 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm0-2a3 3 0 1 1 0 6 3 3 0 0 1 0-6z" fill-rule="nonzero"></path> | |
| <path d="M5 8h2v12H5z"></path> | |
| <path d="M7 18H5a6 6 0 0 1 6-6v2a4 4 0 0 0-4 4zM17 8h2a6 6 0 0 1-6 6v-2a4 4 0 0 0 4-4z"></path> | |
| <path d="m15.061 8.99 3.004-3.004 3.003 3.003zM11 12h2v2h-2zM3.061 8.99l3.004-3.004 3.003 3.003z"></path> | |
| </g> | |
| </svg> | |
| <span>Versions</span> | |
| </a><a href="#" class="fill-current hover:bg-gray-700 hover:text-gray-200 group py-2 px-3 rounded-md flex items-center" aria-current="page"> | |
| <!-- Heroicon name: outline/photograph --> | |
| <svg class="text-gray-300 group-hover:text-gray-100 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" aria-hidden="true"> | |
| <g fill-rule="evenodd"> | |
| <path d="m7.862 18.962.024.024a1 1 0 0 1 0 1.414l-.707.707a1 1 0 0 1-1.414 0l-.024-.024a1 1 0 0 1 0-1.414l.707-.707a1 1 0 0 1 1.414 0zm-2.876-2.877.024.024a1 1 0 0 1 0 1.415l-.707.707a1 1 0 0 1-1.415 0l-.024-.024a1 1 0 0 1 0-1.415l.707-.707a1 1 0 0 1 1.415 0zm-.683 3.56.024.024a1 1 0 0 1 0 1.414l-.708.707a1 1 0 0 1-1.414 0l-.024-.024a1 1 0 0 1 0-1.414l.707-.707a1 1 0 0 1 1.415 0z"></path> | |
| <path d="M10.624 16.424c.95-.512 1.615-.844 2.031-1.01.666-.268 1.226-.168 1.733.08.201.097.369.211.536.346.194.156.39.345.616.584.302.32.587.646 1.176 1.34l.03.035.087.102c.3-.497.545-1.011.658-1.374.026-.08.016-.256-.067-.567-.034-.126-.323-1.003-.389-1.292-.203-.896-.138-1.707.613-2.433.466-.45.91-.948 1.335-1.493 1.69-2.17 2.366-4.603 2.04-7.406-2.555-.4-4.945.29-7.292 2.117A16.95 16.95 0 0 0 12.2 6.795c-.752.747-1.569.798-2.494.578-.268-.064-1.095-.332-1.226-.366-.314-.084-.491-.095-.573-.07-.379.115-.907.361-1.417.66l.073.061.03.025c.697.589 1.02.868 1.339 1.166.239.224.427.417.583.607.135.165.248.329.347.526.257.511.364 1.074.091 1.753-.165.413-.493 1.075-.997 2.02l2.669 2.669zM5.462 14.09c.884-1.608 1.423-2.652 1.617-3.134.145-.36-3.708-3.143-3.558-3.473C3.88 6.7 5.947 5.415 7.29 5.007c1.46-.445 3.01.808 3.476.345a18.913 18.913 0 0 1 1.71-1.498c3.211-2.5 6.647-3.228 10.307-2.183.84 3.92.108 7.362-2.2 10.326a16.21 16.21 0 0 1-1.519 1.699c-.449.434.811 1.996.355 3.46-.406 1.303-1.696 3.327-2.485 3.681-.337.152-3.13-3.699-3.5-3.55-.482.193-1.528.738-3.14 1.635l-4.83-4.831z" fill-rule="nonzero"></path> | |
| </g> | |
| </svg> | |
| <span>Deploys</span> | |
| </a> | |
| <a href="#" class="fill-current hover:bg-gray-700 hover:text-gray-200 group py-2 px-3 rounded-md flex items-center" aria-current="page"> | |
| <!-- Heroicon name: outline/photograph --> | |
| <svg class="text-gray-300 group-hover:text-gray-100 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" fill="currentColor" aria-hidden="true"> | |
| <g fill-rule="evenodd"> | |
| <path d="M10.125 10.977a7.022 7.022 0 0 0-1.374 1.865c-1.579-.23-2.905-.694-3.751-1.296v3c.71.505 1.756.913 3.006 1.166a7.122 7.122 0 0 0 .216 2.042C6.876 17.504 5.75 17.08 5 16.546v3.163c.207.167.565.36 1.045.54 1.049.393 2.469.655 4.034.73a6.986 6.986 0 0 0 3.455 1.867c-.796.1-1.648.154-2.534.154-4.418 0-8-1.343-8-3V4c0-1.657 3.582-3 8-3s8 1.343 8 3v6.255a6.972 6.972 0 0 0-2-.965V6.546C15.775 7.417 13.546 8 11 8s-4.775-.583-6-1.454v3c1.082.77 2.948 1.314 5.125 1.43zM5 4.547C6.225 5.416 8.454 6 11 6s4.775-.583 6-1.454v-.255c-.207-.167-.565-.36-1.045-.54C14.705 3.282 12.924 3 11 3s-3.704.282-4.955.751c-.48.18-.838.373-1.045.54v.255z" fill-rule="nonzero"></path> | |
| <path d="M15 21a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path> | |
| <rect transform="rotate(45 19.768 20.768)" x="17.268" y="19.893" width="5" height="1.75" rx=".875"></rect> | |
| </g> | |
| </svg> | |
| <span>RQL</span> | |
| </a><a href="#" class="fill-current hover:bg-gray-700 hover:text-gray-200 group py-2 px-3 rounded-md flex items-center" aria-current="page"> | |
| <!-- Heroicon name: outline/user-group --> | |
| <svg class="text-gray-300 group-hover:text-gray-100 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 26 26" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path> | |
| </svg> | |
| <span>People</span> | |
| </a> | |
| <a href="#" class="fill-current hover:bg-gray-700 hover:text-gray-200 group py-2 px-3 rounded-md flex items-center"> | |
| <!-- Heroicon name: outline/collection --> | |
| <svg class="text-gray-300 group-hover:text-gray-100 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28" aria-hidden="true"> | |
| <path d="M18.707 18.706a1.352 1.352 0 0 0 0-1.893 1.352 1.352 0 0 0-1.894 0 1.354 1.354 0 0 0 0 1.894 1.353 1.353 0 0 0 1.894 0zM21 16.76c.547 0 1 .453 1 1 0 .546-.453 1-1 1h-.053c-.067.187-.133.373-.227.533l.04.04c.387.4.387 1.027 0 1.427a1.01 1.01 0 0 1-1.426-.013l-.027-.027c-.173.08-.36.16-.547.227V21c0 .546-.453 1-1 1-.546 0-1-.454-1-1v-.053a6.688 6.688 0 0 1-.546-.227l-.027.027c-.4.4-1.027.4-1.426.013a.621.621 0 0 1-.12-.16 1.01 1.01 0 0 1 .12-1.267l.04-.04a3.186 3.186 0 0 1-.227-.533h-.054c-.546 0-1-.454-1-1 0-.547.454-1 1-1h.053c.067-.2.147-.374.227-.547l-.04-.04a1.006 1.006 0 0 1 0-1.413 1.022 1.022 0 0 1 1.426 0l.04.04c.174-.094.347-.16.534-.227v-.053c0-.547.453-1 1-1 .546 0 1 .453 1 1v.053c.187.067.36.133.533.227l.04-.04a.99.99 0 0 1 .707-.294c.267 0 .52.094.72.294.387.4.387 1.026 0 1.413l-.04.04c.08.173.16.347.227.547H21z"></path> | |
| <path d="M20 7.427V6.64a1.6 1.6 0 0 0-1.587-1.587H9.467a.999.999 0 0 1-.707-.293.947.947 0 0 1-.293-.707v-.466C8.467 2.72 7.76 2 6.867 2H3.6C2.706 2 2 2.72 2 3.587v3.84a3.576 3.576 0 0 1 1.6-.374h14.813c.574 0 1.107.134 1.587.374zm2-.787V12c0 .56-.453 1-1 1a.982.982 0 0 1-.827-.44A.996.996 0 0 1 20 12v-1.36a1.6 1.6 0 0 0-1.587-1.587H3.6c-.894 0-1.6.72-1.6 1.587v7.76c0 .88.707 1.6 1.6 1.6H12c.413 0 .773.253.92.613A.999.999 0 0 1 12 22H3.6c-2 0-3.6-1.613-3.6-3.6V3.587A3.59 3.59 0 0 1 3.6 0h3.267c1.8 0 3.293 1.333 3.56 3.053h7.986A3.596 3.596 0 0 1 22 6.64z"></path> | |
| </svg> | |
| <span>Projects</span> | |
| </a> | |
| <a href="#" class="hover:bg-gray-700 hover:text-gray-200 group py-2 px-3 rounded-md flex items-center"> | |
| <!-- Heroicon name: outline/cog --> | |
| <svg class="text-gray-300 group-hover:text-gray-100 mr-3 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 26 26" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> | |
| </svg> | |
| <span>Settings</span> | |
| </a> | |
| </div> | |
| <div class="mt-10"> | |
| <p class="px-2 text-xs font-semibold text-gray-400 uppercase tracking-wider"> | |
| Account | |
| </p> | |
| <div class="mt-2 space-y-0 text-gray-300"> | |
| <div class="flex items-center px-2 py-2"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://secure.gravatar.com/avatar/edf8f5994430e63a2477e8af090bb680?d" alt=""> | |
| </div> | |
| <div class="ml-3 min-w-0 flex-1"> | |
| <div class="text-base font-semibold text-gray-50 tracking-wide truncate">atsuko</div> | |
| <div class="text-xs font-medium text-gray-300 tracking-wide truncate">[email protected]</div> | |
| </div> | |
| <a href="#" class="hidden ml-auto flex-shrink-0 bg-white p-2 text-gray-400 hover:text-gray-500"> | |
| <span class="sr-only">View notifications</span> | |
| <!-- Heroicon name: outline/bell --> | |
| <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path> | |
| </svg> | |
| </a> | |
| </div> | |
| <a href="#" class="flex items-center hover:bg-gray-700 hover:text-white px-2 py-2 text-base font-medium rounded-md"> | |
| <span class="truncate">User Settings</span> | |
| </a> | |
| <a href="#" class="flex items-center hover:bg-gray-700 hover:text-white px-2 py-2 text-base font-medium rounded-md"> | |
| <span class="truncate">Account Settings</span> | |
| </a> | |
| <a href="#" class="flex items-center hover:bg-gray-700 hover:text-white px-2 py-2 text-base font-medium rounded-md"> | |
| <span class="truncate">Switch Accounts</span> | |
| </a> | |
| <a href="#" class="flex items-center hover:bg-gray-700 hover:text-white px-2 py-2 text-base font-medium rounded-md"> | |
| <span class="truncate">Sign out</span> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| </div> | |
| </div> | |
| <div class="flex-shrink-0 w-14" aria-hidden="true"> | |
| <!-- Dummy element to force sidebar to shrink to fit close icon --> | |
| </div> | |
| </div> | |
| <!-- Static sidebar for desktop --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-16 lg:w-24"> | |
| <!-- LHS Navigation --> | |
| <div class="flex-1 flex flex-col min-h-0 bg-gradient-to-b from-blue-900 to-blue-900"> | |
| <div class="flex justify-center items-center h-16 flex-shrink-0 px-4 bg-blue-800"> | |
| <svg class="h-7 w-auto text-white" viewBox="0 0 208.75 174.23" fill="currentColor"> | |
| <path xmlns="http://www.w3.org/2000/svg" d="m208.75 5.17a5.54 5.54 0 0 0 -.1-1c0-.1-.05-.19-.08-.29s-.13-.45-.21-.67l-.15-.32a4.37 4.37 0 0 0 -.32-.55c-.07-.11-.14-.22-.22-.33l-.14-.19c-.08-.09-.17-.16-.25-.24l-.2-.24-.16-.11a5.07 5.07 0 0 0 -.46-.35l-.39-.25a5.05 5.05 0 0 0 -.53-.24l-.42-.17c-.19-.06-.39-.09-.58-.13l-.43-.09a5.58 5.58 0 0 0 -.71 0h-.4c-2.68.24-38.09 3.62-77.89 21.37-23.9 10.63-42.4 26.95-54.04 46.76l-3 1.3c-42.61 19.02-68.07 55.99-68.07 98.9v.72a5.19 5.19 0 0 0 3 4.7 5.28 5.28 0 0 0 2.19.48h141.45a4.54 4.54 0 0 0 .82-.07l.36-.09c.17-.05.34-.08.51-.14s.25-.12.38-.18.3-.12.44-.2a5.63 5.63 0 0 0 .75-.53l57-48.06a5.16 5.16 0 0 0 1.84-4v-115.79zm-51.54 148.11-5.47 4.61v-102.25l46.64-39.31v102.25zm-93.12-27.11h77.28v37.69h-122zm65.23-95.32a267.23 267.23 0 0 1 56.81-17.77l-41.69 35.15a264.47 264.47 0 0 0 -56.44 13.29c10.32-12.6 24.24-23.05 41.32-30.67zm-51.23 45.58a267.64 267.64 0 0 1 63.28-17.35v56.72h-73.88a91.66 91.66 0 0 1 10.6-39.37zm-14.23 6.62a102.7 102.7 0 0 0 -6.86 35.51l-46 38.82c3.48-31.54 22.21-57.92 52.86-74.33z"></path> | |
| </svg> | |
| </div> | |
| <div id="slim-scroll" class="flex-1 flex flex-col overflow-y-auto bg-gradient-to-b from-blue-900 via-blue-800 to-blue-900"> | |
| <nav class="flex-1 "> | |
| <div class="flex flex-col items-center px-2 py-2 space-y-1 lg:space-y-0 2xl:space-y-0.0 text-xs font-normal tracking-wide text-blue-200"> | |
| <a href="#" class="group w-full px-1.5 py-2 rounded-md flex flex-col items-center bg-transparent transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-label="Dashboard" title="Dashboard"> | |
| <!--Heroicon name: outline/chart square--> | |
| <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-7 w-7 lg:h-6 lg:w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path> | |
| </svg> | |
| <span class="hidden lg:block mt-0.5">Dashboard</span> | |
| </a> | |
| <a href="#" class="group w-full px-1.5 py-2 rounded-md flex flex-col items-center bg-transparent transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-label="Items" title="Items"> | |
| <!-- Heroicon name: outline/view-list --> | |
| <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-7 w-7 lg:h-6 lg:w-6" xmlns="http://www.w3.org/2000/svg" viewBox="-7 -6 112 112" fill="currentColor" aria-hidden="true"> | |
| <path d="M51.39,22.78h40a4,4,0,0,0,0-8h-40a4,4,0,0,0,0,8Z"></path> | |
| <path d="M51.39,41.22h30a4,4,0,0,0,0-8h-30a4,4,0,0,0,0,8Z"></path> | |
| <path d="M30.61,8h-18a8,8,0,0,0-8,8V34a8,8,0,0,0,8,8h18a8,8,0,0,0,8-8V16A8,8,0,0,0,30.61,8Zm-18,26V16h18V34Z"></path> | |
| <path d="M51.39,72.78h40a4,4,0,0,0,0-8h-40a4,4,0,0,0,0,8Z"></path> | |
| <path d="M51.39,91.22h30a4,4,0,0,0,0-8h-30a4,4,0,0,0,0,8Z"></path> | |
| <path d="M4.61,84a8,8,0,0,0,8,8h18a8,8,0,0,0,8-8V66a8,8,0,0,0-8-8h-18a8,8,0,0,0-8,8Zm8-18h18V84h-18Z"></path> | |
| </svg> | |
| <span class="hidden lg:block mt-0.5">Items</span> | |
| </a> | |
| <a href="#" class="group w-full px-1.5 py-2 rounded-md flex flex-col items-center fill-current bg-transparent transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-current="page" aria-label="Versions" title="Versions"> | |
| <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-7 w-7 lg:h-6 lg:w-6" xmlns="http://www.w3.org/2000/svg" viewBox="-3 -2.5 29 29" aria-hidden="true"> | |
| <g fill-rule="evenodd"> | |
| <path d="M6 20a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm0-2a3 3 0 1 1 0 6 3 3 0 0 1 0-6zM6 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm0-2a3 3 0 1 1 0 6 3 3 0 0 1 0-6zM18 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm0-2a3 3 0 1 1 0 6 3 3 0 0 1 0-6z" fill-rule="nonzero"></path> | |
| <path d="M5 8h2v12H5z"></path> | |
| <path d="M7 18H5a6 6 0 0 1 6-6v2a4 4 0 0 0-4 4zM17 8h2a6 6 0 0 1-6 6v-2a4 4 0 0 0 4-4z"></path> | |
| <path d="m15.061 8.99 3.004-3.004 3.003 3.003zM11 12h2v2h-2zM3.061 8.99l3.004-3.004 3.003 3.003z"></path> | |
| </g> | |
| </svg> | |
| <span class="hidden lg:block mt-0.5">Versions</span> | |
| </a> | |
| <a href="#" class="group w-full px-1.5 py-2 rounded-md flex flex-col items-center fill-current bg-transparent transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-label="Deploys" title="Deploys"> | |
| <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-7 w-7 lg:h-6 lg:w-6" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="-1 -2 27 27" aria-hidden="true"> | |
| <g fill-rule="evenodd"> | |
| <path d="m7.862 18.962.024.024a1 1 0 0 1 0 1.414l-.707.707a1 1 0 0 1-1.414 0l-.024-.024a1 1 0 0 1 0-1.414l.707-.707a1 1 0 0 1 1.414 0zm-2.876-2.877.024.024a1 1 0 0 1 0 1.415l-.707.707a1 1 0 0 1-1.415 0l-.024-.024a1 1 0 0 1 0-1.415l.707-.707a1 1 0 0 1 1.415 0zm-.683 3.56.024.024a1 1 0 0 1 0 1.414l-.708.707a1 1 0 0 1-1.414 0l-.024-.024a1 1 0 0 1 0-1.414l.707-.707a1 1 0 0 1 1.415 0z"></path> | |
| <path d="M10.624 16.424c.95-.512 1.615-.844 2.031-1.01.666-.268 1.226-.168 1.733.08.201.097.369.211.536.346.194.156.39.345.616.584.302.32.587.646 1.176 1.34l.03.035.087.102c.3-.497.545-1.011.658-1.374.026-.08.016-.256-.067-.567-.034-.126-.323-1.003-.389-1.292-.203-.896-.138-1.707.613-2.433.466-.45.91-.948 1.335-1.493 1.69-2.17 2.366-4.603 2.04-7.406-2.555-.4-4.945.29-7.292 2.117A16.95 16.95 0 0 0 12.2 6.795c-.752.747-1.569.798-2.494.578-.268-.064-1.095-.332-1.226-.366-.314-.084-.491-.095-.573-.07-.379.115-.907.361-1.417.66l.073.061.03.025c.697.589 1.02.868 1.339 1.166.239.224.427.417.583.607.135.165.248.329.347.526.257.511.364 1.074.091 1.753-.165.413-.493 1.075-.997 2.02l2.669 2.669zM5.462 14.09c.884-1.608 1.423-2.652 1.617-3.134.145-.36-3.708-3.143-3.558-3.473C3.88 6.7 5.947 5.415 7.29 5.007c1.46-.445 3.01.808 3.476.345a18.913 18.913 0 0 1 1.71-1.498c3.211-2.5 6.647-3.228 10.307-2.183.84 3.92.108 7.362-2.2 10.326a16.21 16.21 0 0 1-1.519 1.699c-.449.434.811 1.996.355 3.46-.406 1.303-1.696 3.327-2.485 3.681-.337.152-3.13-3.699-3.5-3.55-.482.193-1.528.738-3.14 1.635l-4.83-4.831z" fill-rule="nonzero"></path> | |
| </g> | |
| </svg> | |
| <span class="hidden lg:block mt-0.5">Deploys</span> | |
| </a> | |
| <a href="#" class="group w-full px-1.5 py-2 rounded-md flex flex-col items-center fill-current bg-transparent transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-label="RQL" title="RQL"> | |
| <!-- Heroicon name: outline/user-group --> | |
| <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-7 w-7 lg:h-6 lg:w-6" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 28 28" aria-hidden="true"> | |
| <g fill-rule="evenodd"> | |
| <path d="M10.125 10.977a7.022 7.022 0 0 0-1.374 1.865c-1.579-.23-2.905-.694-3.751-1.296v3c.71.505 1.756.913 3.006 1.166a7.122 7.122 0 0 0 .216 2.042C6.876 17.504 5.75 17.08 5 16.546v3.163c.207.167.565.36 1.045.54 1.049.393 2.469.655 4.034.73a6.986 6.986 0 0 0 3.455 1.867c-.796.1-1.648.154-2.534.154-4.418 0-8-1.343-8-3V4c0-1.657 3.582-3 8-3s8 1.343 8 3v6.255a6.972 6.972 0 0 0-2-.965V6.546C15.775 7.417 13.546 8 11 8s-4.775-.583-6-1.454v3c1.082.77 2.948 1.314 5.125 1.43zM5 4.547C6.225 5.416 8.454 6 11 6s4.775-.583 6-1.454v-.255c-.207-.167-.565-.36-1.045-.54C14.705 3.282 12.924 3 11 3s-3.704.282-4.955.751c-.48.18-.838.373-1.045.54v.255z" fill-rule="nonzero"></path> | |
| <path d="M15 21a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path> | |
| <rect transform="rotate(45 19.768 20.768)" x="17.268" y="19.893" width="5" height="1.75" rx=".875"></rect> | |
| </g> | |
| </svg> | |
| <span class="hidden lg:block mt-0.5">RQL</span> | |
| </a> | |
| <a href="#" class="group w-full px-1.5 py-2 rounded-md flex flex-col items-center fill-current bg-transparent transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-label="People" title="People"> | |
| <!-- Heroicon name: outline/user-group --> | |
| <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-7 w-7 lg:h-6 lg:w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-2 -2 28 28" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path> | |
| </svg> | |
| <span class="hidden lg:block mt-0.5">People</span> | |
| </a> | |
| <a href="#" class="group w-full px-1.5 py-2 rounded-md flex flex-col items-center fill-current bg-transparent transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-label="Projects" title="Projects"> | |
| <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-7 w-7 lg:h-6 lg:w-6" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="-4 -4 30 30" aria-hidden="true"> | |
| <path d="M18.707 18.706a1.352 1.352 0 0 0 0-1.893 1.352 1.352 0 0 0-1.894 0 1.354 1.354 0 0 0 0 1.894 1.353 1.353 0 0 0 1.894 0zM21 16.76c.547 0 1 .453 1 1 0 .546-.453 1-1 1h-.053c-.067.187-.133.373-.227.533l.04.04c.387.4.387 1.027 0 1.427a1.01 1.01 0 0 1-1.426-.013l-.027-.027c-.173.08-.36.16-.547.227V21c0 .546-.453 1-1 1-.546 0-1-.454-1-1v-.053a6.688 6.688 0 0 1-.546-.227l-.027.027c-.4.4-1.027.4-1.426.013a.621.621 0 0 1-.12-.16 1.01 1.01 0 0 1 .12-1.267l.04-.04a3.186 3.186 0 0 1-.227-.533h-.054c-.546 0-1-.454-1-1 0-.547.454-1 1-1h.053c.067-.2.147-.374.227-.547l-.04-.04a1.006 1.006 0 0 1 0-1.413 1.022 1.022 0 0 1 1.426 0l.04.04c.174-.094.347-.16.534-.227v-.053c0-.547.453-1 1-1 .546 0 1 .453 1 1v.053c.187.067.36.133.533.227l.04-.04a.99.99 0 0 1 .707-.294c.267 0 .52.094.72.294.387.4.387 1.026 0 1.413l-.04.04c.08.173.16.347.227.547H21z"></path> | |
| <path d="M20 7.427V6.64a1.6 1.6 0 0 0-1.587-1.587H9.467a.999.999 0 0 1-.707-.293.947.947 0 0 1-.293-.707v-.466C8.467 2.72 7.76 2 6.867 2H3.6C2.706 2 2 2.72 2 3.587v3.84a3.576 3.576 0 0 1 1.6-.374h14.813c.574 0 1.107.134 1.587.374zm2-.787V12c0 .56-.453 1-1 1a.982.982 0 0 1-.827-.44A.996.996 0 0 1 20 12v-1.36a1.6 1.6 0 0 0-1.587-1.587H3.6c-.894 0-1.6.72-1.6 1.587v7.76c0 .88.707 1.6 1.6 1.6H12c.413 0 .773.253.92.613A.999.999 0 0 1 12 22H3.6c-2 0-3.6-1.613-3.6-3.6V3.587A3.59 3.59 0 0 1 3.6 0h3.267c1.8 0 3.293 1.333 3.56 3.053h7.986A3.596 3.596 0 0 1 22 6.64z"></path> | |
| </svg> | |
| <span class="hidden lg:block mt-0.5">Projects</span> | |
| </a> | |
| <a href="#" class="group w-full px-1.5 py-2 rounded-md flex flex-col items-center bg-transparent transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-label="Settings" title="Settings"> | |
| <!-- Heroicon name: outline/cog --> | |
| <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-7 w-7 lg:h-6 lg:w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-1 -1 26 26" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> | |
| </svg> | |
| <span class="hidden lg:block mt-0.5">Settings</span> | |
| </a> | |
| </div> | |
| <div class="hidden space-y-1"> | |
| <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" --> | |
| <a href="#" class="bg-gray-900 text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md" aria-current="page"> | |
| <!-- | |
| Heroicon name: outline/home | |
| Current: "text-gray-300", Default: "text-gray-400 group-hover:text-gray-300" | |
| --> | |
| <svg class="text-gray-300 mr-3 flex-shrink-0 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path> | |
| </svg> | |
| All Issues | |
| </a> | |
| <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md"> | |
| <!-- Heroicon name: outline/view-list --> | |
| <svg class="text-gray-400 group-hover:text-gray-300 mr-3 flex-shrink-0 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path> | |
| </svg> | |
| My Issues | |
| </a> | |
| <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md"> | |
| <!-- Heroicon name: outline/user-circle --> | |
| <svg class="text-gray-400 group-hover:text-gray-300 mr-3 flex-shrink-0 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> | |
| </svg> | |
| Assigned | |
| </a> | |
| <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md"> | |
| <!-- Heroicon name: outline/archive --> | |
| <svg class="text-gray-400 group-hover:text-gray-300 mr-3 flex-shrink-0 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path> | |
| </svg> | |
| Closed | |
| </a> | |
| <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md"> | |
| <!-- Heroicon name: outline/clock --> | |
| <svg class="text-gray-400 group-hover:text-gray-300 mr-3 flex-shrink-0 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> | |
| </svg> | |
| Recent | |
| </a> | |
| </div> | |
| <div class="hidden mt-10"> | |
| <p class="px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider"> | |
| Projects | |
| </p> | |
| <div class="mt-2 space-y-1"> | |
| <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium text-gray-300 rounded-md hover:text-white hover:bg-gray-700"> | |
| <span class="truncate"> | |
| GraphQL API | |
| </span> | |
| </a> | |
| <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium text-gray-300 rounded-md hover:text-white hover:bg-gray-700"> | |
| <span class="truncate"> | |
| iOS App | |
| </span> | |
| </a> | |
| <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium text-gray-300 rounded-md hover:text-white hover:bg-gray-700"> | |
| <span class="truncate"> | |
| Marketing Site Redesign | |
| </span> | |
| </a> | |
| <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium text-gray-300 rounded-md hover:text-white hover:bg-gray-700"> | |
| <span class="truncate"> | |
| Customer Portal | |
| </span> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="flex-shrink-0 flex flex-col items-center space-y-0 text-xs font-normal text-blue-200 tracking-wide"> | |
| <a href="#" class="group p-2 rounded-full flex justify-center bg-transparent transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:text-white hover:bg-transparent focus:outline-none focus:ring-0 focus:ring-blue-700" aria-label="Updates" title="Updates"> | |
| <!-- Heroicon name: outline/home --> | |
| <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-7 w-7 lg:h-6 lg:w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"></path> | |
| </svg> | |
| </a> | |
| <a href="#" class="group p-2 rounded-full flex justify-center bg-transparent transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:text-white hover:bg-transparent focus:outline-none focus:text-blue-100" aria-label="”Up" title="Upgrade"> | |
| <!-- Heroicon name: outline/home --> | |
| <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-7 w-7 lg:h-6 lg:w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path> | |
| </svg> | |
| </a> | |
| <a href="#" class="group p-2 rounded-full flex justify-center bg-transparent transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:text-white hover:bg-transparent focus:outline-none focus:text-white" aria-label="Help" title="Help"> | |
| <!-- Heroicon name: outline/home --> | |
| <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-7 w-7 lg:h-6 lg:w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path> | |
| </svg> | |
| </a> | |
| <a href="#" class="group shadow-sm pb-4 px-2 flex flex-col w-full items-center font-semibold tracking-wide transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:border-blue-200 focus:outline-none hidden" aria-label="Manage Settings" title="Manage Settings"> | |
| <img class="block mx-auto mt-2 h-10 w-10 rounded-full border-2 border-transparent group-hover:border-blue-100 group-focus:border-blue-200" src="https://secure.gravatar.com/avatar/edf8f5994430e63a2477e8af090bb680?d=retro&size=50" alt=""> | |
| <span class="hidden xl:block mt-1 text-blue-200 group-hover:text-blue-50">atsuko</span> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="flex-shrink-0 flex flex-col items-center text-xs font-normal text-blue-200 tracking-wide"> | |
| <!-- Profile dropdown --> | |
| <div class="relative flex-shrink-0"> | |
| <div> | |
| <button type="button" class="group shadow-sm pt-0.5 pb-5 px-2 flex flex-col w-full items-center font-semibold tracking-wide transition duration-300 ease-in-out transform hover:-translate-y-0.5 hover:border-blue-200 focus:outline-none" id="user-menu-button" aria-expanded="false" aria-haspopup="true"> | |
| <span class="sr-only">Open user menu</span> | |
| <img class="block mx-auto mt-2 h-10 w-10 rounded-full border-2 border-transparent group-hover:border-blue-100 group-focus:border-blue-200" src="https://secure.gravatar.com/avatar/edf8f5994430e63a2477e8af090bb680?d" alt=""> | |
| </button> | |
| </div> | |
| <!-- | |
| AVATAR POPUP MENU, show/hide based on menu state. | |
| Entering: "transition ease-out duration-100" | |
| From: "transform opacity-0 scale-95" | |
| To: "transform opacity-100 scale-100" | |
| Leaving: "transition ease-in duration-75" | |
| From: "transform opacity-100 scale-100" | |
| To: "transform opacity-0 scale-95" | |
| --> | |
| <div class="origin-bottom-left absolute bottom-11 left-16 mt-2 w-56 rounded-md shadow-xl py-0 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-30" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1" style=" | |
| display: none; | |
| "> | |
| <div class="block flex items-center border-b border-blue-100 rounded-t-md"><a href="#" class="w-full flex flex-col items-start px-4 py-2.5 text-sm text-gray-600 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-600 rounded-t-md" role="menuitem" tabindex="-1" id="user-menu-item-0"><span class="font-semibold text-gray-800 tracking-wide pb-0.5">atsuko</span> | |
| User Settings | |
| </a></div><a href="#" class="block px-4 py-2 text-sm text-gray-600 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-1">Email</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-600 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-2">Security</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-600 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-3">Connected Services</a> | |
| <div class="flex block mt-1 px-4 pt-2 pb-1 uppercase text-xs font-semibold tracking-widest text-gray-900 focus:outline-none border-t border-blue-100 justify-start"><svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-4 w-4 mr-1 text-blue-600 hidden" viewBox="0 0 20 20" fill="currentColor"> | |
| <path d="M8 5a1 1 0 100 2h5.586l-1.293 1.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L13.586 5H8zM12 15a1 1 0 100-2H6.414l1.293-1.293a1 1 0 10-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L6.414 15H12z"></path> | |
| </svg><span class="flex pb-1 border-b border-blue-100">Switch Accounts</span><span class="hidden">Edit</span></div> | |
| <div class="flex items-center justify-between w-full border-l-2 border-transparent hover:border-blue-500 hover:bg-blue-100"><a href="#" class="block w-full px-4 py-2 text-sm text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-3">Hoohoo</a> | |
| <a href="#" class="rounded-full group p-1.5 mr-2.5 ml-4 text-sm text-blue-500 bg-blue-50 hover:bg-blue-700 hover:bg-opacity-90 hover:text-blue-50 focus:outline-none focus:text-blue-800 focus:bg-blue-100" aria-label="Manage Settings" role="menuitem" tabindex="-1" id="user-menu-item-4"><svg aria-hidden="true" fill="none" stroke="currentColor" viewBox="2 1 21.5 21.5" xmlns="http://www.w3.org/2000/svg" x-description="Heroicon name: line/cog" class="h-4 w-4"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> | |
| </svg></a> | |
| </div> | |
| <div class="flex items-center justify-between w-full border-l-2 border-transparent hover:border-blue-500 hover:bg-blue-100"><a href="#" class="block w-full px-4 py-2 text-sm text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-6">personal-test</a> | |
| <a href="#" class="rounded-full group p-1.5 mr-2.5 ml-4 text-sm text-blue-500 bg-blue-50 hover:bg-blue-700 hover:bg-opacity-90 hover:text-blue-50 focus:outline-none focus:text-blue-800 focus:bg-blue-100" aria-label="Manage Settings" role="menuitem" tabindex="-1" id="user-menu-item-7"><svg aria-hidden="true" fill="none" stroke="currentColor" viewBox="2 1 21.5 21.5" xmlns="http://www.w3.org/2000/svg" x-description="Heroicon name: line/cog" class="h-4 w-4"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> | |
| </svg></a> | |
| </div> | |
| <div class="flex items-center justify-between w-full border-l-2 bg-blue-100 border-blue-800 hover:border-blue-500 hover:bg-blue-100"><a href="#" class="block w-full px-4 py-2 text-sm text-blue-600 hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-8">Rollbar</a> | |
| <a href="#" class="rounded-full group p-1.5 mr-2.5 ml-4 text-sm text-blue-700 bg-blue-100 hover:bg-blue-700 hover:bg-opacity-90 hover:text-blue-50 focus:outline-none focus:text-blue-800 focus:bg-blue-100" aria-label="Manage Settings" role="menuitem" tabindex="-1" id="user-menu-item-9"><svg aria-hidden="true" fill="none" stroke="currentColor" viewBox="2 1 21.5 21.5" xmlns="http://www.w3.org/2000/svg" x-description="Heroicon name: line/cog" class="h-4 w-4"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> | |
| </svg></a> | |
| </div> | |
| <div class="flex items-center justify-between w-full border-l-2 border-transparent hover:border-red-600 hidden"><a href="#" class="block w-full px-4 py-2 text-sm text-gray-600 hover:text-red-700 focus:outline-none focus:text-red-800" role="menuitem" tabindex="-1" id="user-menu-item-7">Design-Playground</a> | |
| <a href="#" class="rounded-full group px-2 py-2 mx-2.5 text-sm text-red-500 bg-red-50 hover:bg-red-100 hover:bg-opacity-100 hover:text-red-500 focus:outline-none focus:text-red-600 focus:ring-0 focus:ring-red-300 focus:bg-red-50" aria-label="Manage Settings" role="menuitem" tabindex="-1" id="user-menu-item-8"><svg class="h-4 w-4" aria-hidden="true" fill="currentColor" viewBox="0 0 1192.3578 1120.896" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 2000 2000" xml:space="preserve"> | |
| <path style="" d="m 310.53287,0 c -37.4468,0 -74.1378,6.648 -109.1348,19.714 -14.997,5.613 -26.176,18.486 -29.571,34.146 -3.397,15.657 1.412,31.976 12.732,43.343 l 127.0128,127.059 -18.441,68.909 -68.9988,18.486 L 97.118065,184.599 c -11.319,-11.32 -27.54,-16.274 -43.294,-12.738 -15.752,3.397 -28.582,14.53 -34.195,29.576 -42.542,113.76 -14.6209996,242.658 71.027,328.353 70.181005,70.227 170.783005,102.534 268.883805,86.685 l 13.601,13.603 -200.0878,200.00402 c -71.926,72.018 -82.255005,174.46098 -23.489,233.22598 24.336,24.338 58.153,37.733 95.27,37.733 48.7208,0 99.0438,-22.358 137.8598,-61.267 l 200.07795,-200.03898 228.031,228.05398 c 34.383,34.242 79.99,53.107 128.427,53.107 48.531,0 94.13998,-18.912 128.37998,-53.107 34.383,-34.289 53.246,-79.84898 53.246,-128.37998 0,-48.531 -18.957,-94.091 -53.246,-128.378 L 768.02982,511.451 978.75482,300.839 c 12.724,4.793 26.31698,7.323 40.27698,7.327 30.543,-0.02 59.202,-11.896 80.841,-33.438 l 78.665,-78.715 c 8.866,-8.819 13.82,-20.845 13.82,-33.344 0,-12.498 -4.954,-24.479 -13.82,-33.348 l -95.078,-95.081 c -17.688,-17.688 -49.004,-17.688 -66.691,0 l -78.57798,78.668 c -32.634,32.636 -41.338,80.371 -26.07,121.144 l -210.802,210.688 -84.974,-84.974 c 15.66,-97.723 -16.319,-198.703 -86.685,-268.978 C 471.17582,32.259 393.35287,0 310.53287,0 Z m 4.483,94.381 c 55.936,1.132 108.335,23.44 147.95195,63.105 54.24,54.24 75.319,131.259 56.36,206.062 -4.055,16.13 0.661,33.2 12.358,44.946 l 469.23698,469.23102 c 16.507,16.507 25.609,38.393 25.609,61.692 0,23.299 -9.102,45.136 -25.609,61.64298 -32.96798,32.96 -90.46498,32.913 -123.43198,0.04 L 408.35387,531.867 c -8.914,-8.96 -20.991,-13.82 -33.348,-13.82 l 0,0 c -3.867,0 -7.735,0.426 -11.602,1.463 -73.481,18.629 -152.7138,-3.016 -206.0558,-56.36 -39.902,-39.9 -61.740005,-93.244 -63.014005,-147.907 l 82.349005,82.394 c 11.885,11.934 29.29,16.651 45.609,12.216 l 121.4938,-32.543 c 16.319,-4.338 29.004,-17.072 33.342,-33.344 l 32.595,-121.541 c 4.34,-16.272 -0.285,-33.678 -12.265,-45.564 l -82.442,-82.487 z m 735.14593,39.939 28.341,28.3 -45.321,45.37 c -9.618,9.574 -17.115,10.147 -26.48,1.724 -0.557,-0.616 -1.134,-1.222 -1.728,-1.816 -0.366,-0.367 -0.745,-0.712 -1.122,-1.065 -6.67898,-7.916 -6.42798,-19.773 1.03,-27.233 l 45.28,-45.28 z m -611.95293,564.12602 76.26395,76.268 -198.41995,198.368 c -21.035,21.036 -47.6358,33.63198 -71.2188,33.63198 -8.347,0 -20.138,-1.745 -28.531,-10.04698 -18.065,-18.062 -12.83,-63.532 23.487,-99.894 l 198.4188,-198.327 z m 494.08795,191.298 c -21.743,0 -39.335,17.594 -39.335,39.289 0,21.696 17.592,39.29 39.335,39.29 21.742,0 39.334,-17.594 39.334,-39.29 0,-21.695 -17.592,-39.289 -39.334,-39.289 z"></path> | |
| </svg> | |
| </a> | |
| </div> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-600 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800 hidden" role="menuitem" tabindex="-1" id="user-menu-item-10">Create new account</a> | |
| <div class="flex block mt-1 px-4 pt-2 pb-1 uppercase text-xs font-semibold tracking-widest text-gray-900 focus:outline-none border-t border-blue-100 justify-start"><svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-4 w-4 mr-1 text-blue-600 hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"></path> | |
| </svg> | |
| <span class="pb-1 border-b border-blue-100">Quick Actions</span> | |
| </div> | |
| <div class="flex items-center justify-between w-full border-b-2 border-blue-100 mt-0"> | |
| <div class="flex w-full justify-between divide-x divide-blue-100"> | |
| <span class="flex p-2 w-1/2 place-content-center text-sm hover:bg-blue-100"> | |
| <button type="button" class="group flex flex-col items-center space-y-1 text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-800" aria-label="Create New Account"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-400 group-hover:text-blue-700" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"></path> | |
| </svg> | |
| <span class="font-medium">New Acct.</span> | |
| </button> | |
| </span> | |
| <span class="inline-flex p-2 w-1/2 place-content-center text-sm hover:bg-blue-100"> | |
| <button type="button" class="group flex flex-col items-center space-y-1 text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-800"> | |
| <svg class="h-5 w-5 text-blue-400 group-hover:text-blue-700" xmlns="http://www.w3.org/2000/svg" viewBox="-8 -8 110 110" fill="currentColor" aria-hidden="true"> | |
| <g> | |
| <path d="M98.522,37.664L85.699,14.405c-0.576-1.166-1.91-1.947-3.469-2.303c-0.037-0.011-0.059-0.036-0.104-0.043 c-0.08-0.02-0.166-0.006-0.249-0.025c-0.466-0.083-0.923-0.137-1.414-0.132c-0.488-0.005-0.951,0.05-1.414,0.132 c-0.086,0.019-0.167,0.005-0.251,0.025c-0.042,0.007-0.068,0.032-0.106,0.043c-1.559,0.358-2.892,1.14-3.462,2.303l-9.407,50.362 L55.289,35.621c-0.576-1.165-1.916-1.949-3.476-2.306c-0.034-0.008-0.061-0.03-0.096-0.038c-0.08-0.02-0.15-0.005-0.232-0.022 c-0.467-0.085-0.935-0.143-1.429-0.134c-0.499-0.008-0.962,0.049-1.434,0.134c-0.077,0.017-0.159,0.002-0.235,0.022 c-0.039,0.008-0.061,0.03-0.098,0.041c-1.559,0.357-2.896,1.138-3.471,2.303L34.463,61.735l-10.767-8.414 c-0.086-0.068-0.209-0.093-0.299-0.156c-0.063-0.044-0.088-0.101-0.154-0.142c-0.167-0.104-0.382-0.141-0.559-0.229 c-0.346-0.167-0.678-0.328-1.061-0.436c-0.305-0.085-0.611-0.117-0.929-0.162c-0.354-0.049-0.7-0.104-1.059-0.101 c-0.362-0.004-0.702,0.052-1.055,0.101c-0.319,0.045-0.625,0.077-0.929,0.162c-0.382,0.107-0.717,0.269-1.061,0.436 c-0.182,0.088-0.39,0.124-0.557,0.229c-0.069,0.041-0.097,0.101-0.154,0.142c-0.097,0.063-0.213,0.09-0.301,0.156L2.561,66.89 c-2.003,1.562-1.806,3.955,0.435,5.345c2.239,1.399,5.668,1.265,7.662-0.298l9.558-9.954l12.743,9.954 c1.996,1.562,5.428,1.697,7.666,0.298c0.233-0.142,0.342-0.327,0.528-0.49c0.015-0.008,0.02-0.021,0.037-0.033 c0.36-0.317,0.661-0.641,0.853-1.012c0.058-0.093,0.167-0.158,0.22-0.258l7.562-19.066L62.19,85.599 c0.575,1.164,1.911,1.943,3.468,2.302c0.038,0.012,0.066,0.033,0.106,0.044c0.085,0.02,0.172,0.005,0.257,0.024 c0.465,0.082,0.922,0.137,1.411,0.13c0.484,0.007,0.938-0.048,1.404-0.13c0.088-0.02,0.173-0.005,0.254-0.024 c0.045-0.011,0.071-0.032,0.113-0.044c1.551-0.358,2.888-1.14,3.462-2.302l10.287-55.083l5.302,9.615 c0.975,1.977,4.065,3.027,6.906,2.347C97.996,41.801,99.504,39.644,98.522,37.664z"></path> | |
| </g> | |
| </svg> | |
| <span class="font-medium">Usage</span> | |
| </button> | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between w-full border-t-0 border-blue-100 pb-2.5"> | |
| <div class="flex w-full justify-between divide-x divide-blue-100"> | |
| <span class="flex p-2 w-1/2 place-content-center text-sm hover:bg-blue-100"> | |
| <button type="button" class="group flex flex-col items-center space-y-1 text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-800"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-400 group-hover:text-blue-700" viewBox="0 0 20 20" fill="currentColor"> | |
| <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"></path> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd"></path> | |
| </svg> | |
| <span class="font-medium">Billing</span> | |
| </button> | |
| </span> | |
| <span class="inline-flex p-2 w-1/2 place-content-center text-sm hover:bg-blue-100"> | |
| <button type="button" class="group flex flex-col items-center space-y-1 text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-800"> | |
| <svg class="h-5 w-5 text-blue-400 group-hover:text-blue-700" xmlns="http://www.w3.org/2000/svg" viewBox="-0.8 -0.8 6.5 6.5" fill="currentColor" aria-hidden="true"> | |
| <g transform="translate(-34.926021,-0.52916668)"> | |
| <path transform="scale(0.26458334)" d="m 135,2 c -1.88892,0.0069 -3.00501,1.5484919 -2.99609,3.0058594 v 9.7578126 c 0,1.733148 0.89162,3.349014 2.36132,4.267578 l 4.40625,2.759766 c 1.36016,0.850095 3.22657,-0.189008 3.22657,-1.792969 v -2.001953 h 2 c 1.64501,0 3.00586,-1.351077 3.00586,-2.996094 V 14.003906 A 1.0000006,1.0000006 0 0 0 145.99805,13 a 1.0000006,1.0000006 0 0 0 -0.9961,1.003906 V 15 c 0,0.564136 -0.43977,0.996094 -1.0039,0.996094 h -2 V 8.9980469 c 0,-1.6106249 -0.96296,-3.0706217 -2.44336,-3.7050781 l -3.01172,-1.2910157 h 7.45508 c 0.56396,1.48e-5 1.0039,0.432135 1.0039,0.9960938 v 1.0039062 c 0.002,0.5495974 0.4465,0.9942036 0.9961,0.9960938 0.55247,0.00218 1.00396,-0.4436149 1.00586,-0.9960938 V 4.9980469 C 147.00391,3.3532257 145.64287,2.000043 143.99805,2 Z m -0.99609,3.0859375 4.76171,2.0449219 c 0.75005,0.3214488 1.23243,1.0511637 1.23243,1.8671875 V 17 19.998047 c 0,0.137344 -0.0456,0.168493 -0.16211,0.0957 l -4.41602,-2.761719 c -0.88724,-0.554523 -1.41601,-1.522083 -1.41601,-2.568359 z m 14.96289,1.9121094 a 1.0000006,1.0000006 0 0 0 -0.67188,0.2949219 1.0000006,1.0000006 0 0 0 0,1.4179687 l 0.28711,0.2871094 h -3.58008 a 1.0000006,1.0000006 0 0 0 -1.0039,1.0039061 1.0000006,1.0000006 0 0 0 1.0039,0.996094 h 3.58985 l -0.29688,0.296875 a 1.0000006,1.0000006 0 0 0 0,1.410156 1.0000006,1.0000006 0 0 0 1.41016,0 l 1.94726,-1.949219 A 1.0000006,1.0000006 0 0 0 152,10.001953 a 1.0000006,1.0000006 0 0 0 -0.33008,-0.7460936 1.0000006,1.0000006 0 0 0 -0.01,-0.00977 l -1.95508,-1.953125 A 1.0000006,1.0000006 0 0 0 148.9668,6.9980469 Z"></path> | |
| </g> | |
| </svg> | |
| <span class="font-medium">Logout</span> | |
| </button> | |
| </span> | |
| </div> | |
| </div><a href="#" class="border-b border-blue-100 block mx-3 mb-2 mt-2.5 px-4 py-2.5 text-center text-md font-semibold tracking-wide text-gray-50 bg-gray-700 rounded-full hover:bg-blue-700 hover:text-blue-50 focus:outline-none focus:text-blue-800 hidden" role="menuitem" tabindex="-1" id="user-menu-item-2">Promo CTA</a> | |
| <div class="flex items-center border-t border-blue-100 rounded-b-md hidden"><a href="#" class="block w-full px-4 pt-2 py-2.5 text-sm text-gray-600 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800 rounded-b-md" role="menuitem" tabindex="-1" id="user-menu-item-11">Log Out</a></div> | |
| <div class="flex items-center border-t border-blue-100 hidden"><a href="#" class="block w-full px-4 py-2 text-sm text-gray-600 border-l-2 border-transparent hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-9">Create new account</a></div> | |
| </div> | |
| </div> | |
| <button type="button" class="inline-flex transition duration-300 button-ease items-center px-2.5 md:px-4 py-2.5 border border-transparent text-sm font-medium rounded-full tracking-wide text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-800 focus:border-blue-700 hidden"> | |
| <svg class="md:-ml-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4 text-blue-50" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path> | |
| </svg> | |
| <span class="hidden md:block">New Project</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Wrapper ---> | |
| <div class="relative flex flex-col w-0 flex-1 overflow-y-auto lg:overflow-visible"> | |
| <!-- Top navigation for Tablet + mobile --> | |
| <header class="bg-blue-900 z-30 md:hidden"> | |
| <div class="mx-auto lg:divide-y lg:divide-gray-700"> | |
| <!-- Menu items --> | |
| <div class="flex w-full h-16"> | |
| <div class="relative z-10 flex lg:px-0"> | |
| <div class="h-16 flex-shrink-0 flex justify-center items-center bg-blue-800 "> | |
| <svg class="block px-3.5 sm:px-5 h-7 w-auto text-white" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 208.75 174.23"> | |
| <path d="m208.75 5.17a5.54 5.54 0 0 0 -.1-1c0-.1-.05-.19-.08-.29s-.13-.45-.21-.67l-.15-.32a4.37 4.37 0 0 0 -.32-.55c-.07-.11-.14-.22-.22-.33l-.14-.19c-.08-.09-.17-.16-.25-.24l-.2-.24-.16-.11a5.07 5.07 0 0 0 -.46-.35l-.39-.25a5.05 5.05 0 0 0 -.53-.24l-.42-.17c-.19-.06-.39-.09-.58-.13l-.43-.09a5.58 5.58 0 0 0 -.71 0h-.4c-2.68.24-38.09 3.62-77.89 21.37-23.9 10.63-42.4 26.95-54.04 46.76l-3 1.3c-42.61 19.02-68.07 55.99-68.07 98.9v.72a5.19 5.19 0 0 0 3 4.7 5.28 5.28 0 0 0 2.19.48h141.45a4.54 4.54 0 0 0 .82-.07l.36-.09c.17-.05.34-.08.51-.14s.25-.12.38-.18.3-.12.44-.2a5.63 5.63 0 0 0 .75-.53l57-48.06a5.16 5.16 0 0 0 1.84-4v-115.79zm-51.54 148.11-5.47 4.61v-102.25l46.64-39.31v102.25zm-93.12-27.11h77.28v37.69h-122zm65.23-95.32a267.23 267.23 0 0 1 56.81-17.77l-41.69 35.15a264.47 264.47 0 0 0 -56.44 13.29c10.32-12.6 24.24-23.05 41.32-30.67zm-51.23 45.58a267.64 267.64 0 0 1 63.28-17.35v56.72h-73.88a91.66 91.66 0 0 1 10.6-39.37zm-14.23 6.62a102.7 102.7 0 0 0 -6.86 35.51l-46 38.82c3.48-31.54 22.21-57.92 52.86-74.33z"></path> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="relative flex z-10 flex-1 pl-2 sm:px-2 items-center justify-center"> | |
| <nav class="flex flex-1 relative h-full py-2 mb-1 sm:-mb-1 items-center sm:items-start" aria-label="Main Menu"> | |
| <div class="block relative flex mx-auto w-full h-9 items-center justify-center text-sm font-normal text-blue-200 grid grid-flow-col auto-cols-fr gap-x-1 sm:gap-x-3"> | |
| <a href="#" class="group w-full h-full p-2 rounded-md flex flex-col items-center justify-center bg-transparent transition duration-300 ease-in-out hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-label="Dashboard" title="Dashboard"> | |
| <!--Heroicon name: outline/chart square--> | |
| <svg class="text-blue-300 group-hover:text-blue-100 h-6 w-6 sm:h-7 sm:w-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 8v8m-4-5v5m-4-2v2m-2 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path> | |
| </svg> | |
| <span class="hidden lg:block mt-1">Dashboard</span> | |
| </a> | |
| <a href="#" class="group w-full h-full p-2 rounded-md flex flex-col items-center justify-center bg-transparent transition duration-300 ease-in-out hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-label="Items" title="Items"> | |
| <svg class="text-blue-300 group-hover:text-blue-100 h-6 w-6 sm:h-7 sm:w-7" xmlns="http://www.w3.org/2000/svg" viewBox="-7 -6 112 112" fill="currentColor" aria-hidden="true"> | |
| <path d="M51.39,22.78h40a4,4,0,0,0,0-8h-40a4,4,0,0,0,0,8Z"></path> | |
| <path d="M51.39,41.22h30a4,4,0,0,0,0-8h-30a4,4,0,0,0,0,8Z"></path> | |
| <path d="M30.61,8h-18a8,8,0,0,0-8,8V34a8,8,0,0,0,8,8h18a8,8,0,0,0,8-8V16A8,8,0,0,0,30.61,8Zm-18,26V16h18V34Z"></path> | |
| <path d="M51.39,72.78h40a4,4,0,0,0,0-8h-40a4,4,0,0,0,0,8Z"></path> | |
| <path d="M51.39,91.22h30a4,4,0,0,0,0-8h-30a4,4,0,0,0,0,8Z"></path> | |
| <path d="M4.61,84a8,8,0,0,0,8,8h18a8,8,0,0,0,8-8V66a8,8,0,0,0-8-8h-18a8,8,0,0,0-8,8Zm8-18h18V84h-18Z"></path> | |
| </svg> | |
| <span class="hidden lg:block mt-1">Items</span> | |
| </a> | |
| <a href="#" class="group w-full h-full p-2 rounded-md flex flex-col items-center justify-center fill-current bg-transparent transition duration-300 ease-in-out hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-current="page" aria-label="Versions" title="Versions"> | |
| <svg class="text-blue-300 group-hover:text-blue-100 h-6 w-6 sm:h-7 sm:w-7" xmlns="http://www.w3.org/2000/svg" viewBox="-3.5 -3.2 30 30" aria-hidden="true"> | |
| <g fill-rule="evenodd"> | |
| <path d="M6 20a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm0-2a3 3 0 1 1 0 6 3 3 0 0 1 0-6zM6 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm0-2a3 3 0 1 1 0 6 3 3 0 0 1 0-6zM18 2a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm0-2a3 3 0 1 1 0 6 3 3 0 0 1 0-6z" fill-rule="nonzero"></path> | |
| <path d="M5 8h2v12H5z"></path> | |
| <path d="M7 18H5a6 6 0 0 1 6-6v2a4 4 0 0 0-4 4zM17 8h2a6 6 0 0 1-6 6v-2a4 4 0 0 0 4-4z"></path> | |
| <path d="m15.061 8.99 3.004-3.004 3.003 3.003zM11 12h2v2h-2zM3.061 8.99l3.004-3.004 3.003 3.003z"></path> | |
| </g> | |
| </svg> | |
| <span class="hidden lg:block mt-1">Versions</span> | |
| </a> | |
| <a href="#" class="group w-full h-full p-2 rounded-md flex flex-col items-center justify-center fill-current bg-transparent transition duration-300 ease-in-out hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-label="Deploys" title="Deploys"> | |
| <svg class="text-blue-300 group-hover:text-blue-100 h-6 w-6 sm:h-7 sm:w-7" xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 28 28" aria-hidden="true"> | |
| <g fill-rule="evenodd"> | |
| <path d="m7.862 18.962.024.024a1 1 0 0 1 0 1.414l-.707.707a1 1 0 0 1-1.414 0l-.024-.024a1 1 0 0 1 0-1.414l.707-.707a1 1 0 0 1 1.414 0zm-2.876-2.877.024.024a1 1 0 0 1 0 1.415l-.707.707a1 1 0 0 1-1.415 0l-.024-.024a1 1 0 0 1 0-1.415l.707-.707a1 1 0 0 1 1.415 0zm-.683 3.56.024.024a1 1 0 0 1 0 1.414l-.708.707a1 1 0 0 1-1.414 0l-.024-.024a1 1 0 0 1 0-1.414l.707-.707a1 1 0 0 1 1.415 0z"></path> | |
| <path d="M10.624 16.424c.95-.512 1.615-.844 2.031-1.01.666-.268 1.226-.168 1.733.08.201.097.369.211.536.346.194.156.39.345.616.584.302.32.587.646 1.176 1.34l.03.035.087.102c.3-.497.545-1.011.658-1.374.026-.08.016-.256-.067-.567-.034-.126-.323-1.003-.389-1.292-.203-.896-.138-1.707.613-2.433.466-.45.91-.948 1.335-1.493 1.69-2.17 2.366-4.603 2.04-7.406-2.555-.4-4.945.29-7.292 2.117A16.95 16.95 0 0 0 12.2 6.795c-.752.747-1.569.798-2.494.578-.268-.064-1.095-.332-1.226-.366-.314-.084-.491-.095-.573-.07-.379.115-.907.361-1.417.66l.073.061.03.025c.697.589 1.02.868 1.339 1.166.239.224.427.417.583.607.135.165.248.329.347.526.257.511.364 1.074.091 1.753-.165.413-.493 1.075-.997 2.02l2.669 2.669zM5.462 14.09c.884-1.608 1.423-2.652 1.617-3.134.145-.36-3.708-3.143-3.558-3.473C3.88 6.7 5.947 5.415 7.29 5.007c1.46-.445 3.01.808 3.476.345a18.913 18.913 0 0 1 1.71-1.498c3.211-2.5 6.647-3.228 10.307-2.183.84 3.92.108 7.362-2.2 10.326a16.21 16.21 0 0 1-1.519 1.699c-.449.434.811 1.996.355 3.46-.406 1.303-1.696 3.327-2.485 3.681-.337.152-3.13-3.699-3.5-3.55-.482.193-1.528.738-3.14 1.635l-4.83-4.831z" fill-rule="nonzero"></path> | |
| </g> | |
| </svg> | |
| <span class="hidden lg:block mt-1">Deploys</span> | |
| </a> | |
| <a href="#" class="group w-full h-full p-2 rounded-md flex flex-col items-center justify-center fill-current bg-transparent transition duration-300 ease-in-out hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700" aria-label="RQL" title="RQL"> | |
| <!-- Heroicon name: outline/user-group --> | |
| <svg class="text-blue-300 group-hover:text-blue-100 h-6 w-6 sm:h-7 sm:w-7" xmlns="http://www.w3.org/2000/svg" viewBox="-2.5 -2 28 28" aria-hidden="true"> | |
| <g fill-rule="evenodd"> | |
| <path d="M10.125 10.977a7.022 7.022 0 0 0-1.374 1.865c-1.579-.23-2.905-.694-3.751-1.296v3c.71.505 1.756.913 3.006 1.166a7.122 7.122 0 0 0 .216 2.042C6.876 17.504 5.75 17.08 5 16.546v3.163c.207.167.565.36 1.045.54 1.049.393 2.469.655 4.034.73a6.986 6.986 0 0 0 3.455 1.867c-.796.1-1.648.154-2.534.154-4.418 0-8-1.343-8-3V4c0-1.657 3.582-3 8-3s8 1.343 8 3v6.255a6.972 6.972 0 0 0-2-.965V6.546C15.775 7.417 13.546 8 11 8s-4.775-.583-6-1.454v3c1.082.77 2.948 1.314 5.125 1.43zM5 4.547C6.225 5.416 8.454 6 11 6s4.775-.583 6-1.454v-.255c-.207-.167-.565-.36-1.045-.54C14.705 3.282 12.924 3 11 3s-3.704.282-4.955.751c-.48.18-.838.373-1.045.54v.255z" fill-rule="nonzero"></path> | |
| <path d="M15 21a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-2a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"></path> | |
| <rect transform="rotate(45 19.768 20.768)" x="17.268" y="19.893" width="5" height="1.75" rx=".875"></rect> | |
| </g> | |
| </svg> | |
| <span class="hidden lg:block mt-1">RQL</span> | |
| </a> | |
| <a href="#" class="group w-full h-full p-2 rounded-md flex flex-col items-center justify-center fill-current bg-transparent transition duration-300 ease-in-out hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700 hidden sm:flex" aria-label="People" title="People"> | |
| <!-- Heroicon name: outline/user-group --> | |
| <svg class="text-blue-300 group-hover:text-blue-100 h-6 w-6 sm:h-7 sm:w-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-2 -2 28 28" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path> | |
| </svg> | |
| <span class="hidden lg:block mt-1">People</span> | |
| </a> | |
| <a href="#" class="group w-full h-full p-2 rounded-md flex flex-col items-center justify-center fill-current bg-transparent transition duration-300 ease-in-out hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700 hidden sm:flex" aria-label="Projects" title="Projects"> | |
| <svg class="text-blue-300 group-hover:text-blue-100 h-6 w-6 sm:h-7 sm:w-7" xmlns="http://www.w3.org/2000/svg" viewBox="-4 -3.5 29 29" aria-hidden="true"> | |
| <path d="M18.707 18.706a1.352 1.352 0 0 0 0-1.893 1.352 1.352 0 0 0-1.894 0 1.354 1.354 0 0 0 0 1.894 1.353 1.353 0 0 0 1.894 0zM21 16.76c.547 0 1 .453 1 1 0 .546-.453 1-1 1h-.053c-.067.187-.133.373-.227.533l.04.04c.387.4.387 1.027 0 1.427a1.01 1.01 0 0 1-1.426-.013l-.027-.027c-.173.08-.36.16-.547.227V21c0 .546-.453 1-1 1-.546 0-1-.454-1-1v-.053a6.688 6.688 0 0 1-.546-.227l-.027.027c-.4.4-1.027.4-1.426.013a.621.621 0 0 1-.12-.16 1.01 1.01 0 0 1 .12-1.267l.04-.04a3.186 3.186 0 0 1-.227-.533h-.054c-.546 0-1-.454-1-1 0-.547.454-1 1-1h.053c.067-.2.147-.374.227-.547l-.04-.04a1.006 1.006 0 0 1 0-1.413 1.022 1.022 0 0 1 1.426 0l.04.04c.174-.094.347-.16.534-.227v-.053c0-.547.453-1 1-1 .546 0 1 .453 1 1v.053c.187.067.36.133.533.227l.04-.04a.99.99 0 0 1 .707-.294c.267 0 .52.094.72.294.387.4.387 1.026 0 1.413l-.04.04c.08.173.16.347.227.547H21z"></path> | |
| <path d="M20 7.427V6.64a1.6 1.6 0 0 0-1.587-1.587H9.467a.999.999 0 0 1-.707-.293.947.947 0 0 1-.293-.707v-.466C8.467 2.72 7.76 2 6.867 2H3.6C2.706 2 2 2.72 2 3.587v3.84a3.576 3.576 0 0 1 1.6-.374h14.813c.574 0 1.107.134 1.587.374zm2-.787V12c0 .56-.453 1-1 1a.982.982 0 0 1-.827-.44A.996.996 0 0 1 20 12v-1.36a1.6 1.6 0 0 0-1.587-1.587H3.6c-.894 0-1.6.72-1.6 1.587v7.76c0 .88.707 1.6 1.6 1.6H12c.413 0 .773.253.92.613A.999.999 0 0 1 12 22H3.6c-2 0-3.6-1.613-3.6-3.6V3.587A3.59 3.59 0 0 1 3.6 0h3.267c1.8 0 3.293 1.333 3.56 3.053h7.986A3.596 3.596 0 0 1 22 6.64z"></path> | |
| </svg> | |
| <span class="hidden lg:block mt-1">Projects</span> | |
| </a> | |
| <a href="#" class="group w-full h-full p-2 rounded-md flex flex-col items-center justify-center bg-transparent transition duration-300 ease-in-out hover:bg-blue-700 hover:text-white focus:outline-none focus:bg-blue-700 hidden sm:flex" aria-label="Settings" title="Settings"> | |
| <!-- Heroicon name: outline/cog --> | |
| <svg class="text-blue-300 group-hover:text-blue-100 h-6 w-6 sm:h-7 sm:w-7" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="-1 -0.5 25 25" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> | |
| </svg> | |
| <span class="hidden lg:block mt-1">Settings</span> | |
| </a> | |
| </div> | |
| <div class="hidden space-y-1"> | |
| <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" --> | |
| <a href="#" class="bg-gray-900 text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md" aria-current="page"> | |
| <!-- | |
| Heroicon name: outline/home | |
| Current: "text-gray-300", Default: "text-gray-400 group-hover:text-gray-300" | |
| --> | |
| <svg class="text-gray-300 mr-3 flex-shrink-0 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path> | |
| </svg> | |
| All Issues | |
| </a> | |
| <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md"> | |
| <!-- Heroicon name: outline/view-list --> | |
| <svg class="text-gray-400 group-hover:text-gray-300 mr-3 flex-shrink-0 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"></path> | |
| </svg> | |
| My Issues | |
| </a> | |
| <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md"> | |
| <!-- Heroicon name: outline/user-circle --> | |
| <svg class="text-gray-400 group-hover:text-gray-300 mr-3 flex-shrink-0 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.121 17.804A13.937 13.937 0 0112 16c2.5 0 4.847.655 6.879 1.804M15 10a3 3 0 11-6 0 3 3 0 016 0zm6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path> | |
| </svg> | |
| Assigned | |
| </a> | |
| <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md"> | |
| <!-- Heroicon name: outline/archive --> | |
| <svg class="text-gray-400 group-hover:text-gray-300 mr-3 flex-shrink-0 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4"></path> | |
| </svg> | |
| Closed | |
| </a> | |
| <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white group flex items-center px-2 py-2 text-sm font-medium rounded-md"> | |
| <!-- Heroicon name: outline/clock --> | |
| <svg class="text-gray-400 group-hover:text-gray-300 mr-3 flex-shrink-0 h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path> | |
| </svg> | |
| Recent | |
| </a> | |
| </div> | |
| <div class="hidden mt-10"> | |
| <p class="px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider"> | |
| Projects | |
| </p> | |
| <div class="mt-2 space-y-1"> | |
| <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium text-gray-300 rounded-md hover:text-white hover:bg-gray-700"> | |
| <span class="truncate"> | |
| GraphQL API | |
| </span> | |
| </a> | |
| <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium text-gray-300 rounded-md hover:text-white hover:bg-gray-700"> | |
| <span class="truncate"> | |
| iOS App | |
| </span> | |
| </a> | |
| <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium text-gray-300 rounded-md hover:text-white hover:bg-gray-700"> | |
| <span class="truncate"> | |
| Marketing Site Redesign | |
| </span> | |
| </a> | |
| <a href="#" class="group flex items-center px-3 py-2 text-sm font-medium text-gray-300 rounded-md hover:text-white hover:bg-gray-700"> | |
| <span class="truncate"> | |
| Customer Portal | |
| </span> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="w-full mr-14 sm:max-w-xs hidden xl:block"> | |
| <label for="search" class="sr-only">Search</label> | |
| <div class="relative"> | |
| <div class="pointer-events-none absolute inset-y-0 left-0 pl-3 flex items-center"> | |
| <!-- Heroicon name: solid/search --> | |
| <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path> | |
| </svg> | |
| </div> | |
| <input id="search" name="search" class="block w-full bg-gray-700 border border-transparent rounded-md py-2 pl-10 pr-3 text-sm placeholder-gray-400 focus:outline-none focus:bg-white focus:border-white focus:ring-white focus:text-gray-900 focus:placeholder-gray-500 sm:text-sm" placeholder="Search" type="search"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="relative z-10 flex sm:hidden"> | |
| <!-- Mobile menu button --> | |
| <button type="button" class="rounded-md p-1.5 text-blue-300 hover:text-blue-100 focus:outline-none focus:text-blue-100" aria-controls="mobile-menu" aria-expanded="false"> | |
| <span class="sr-only">Open menu</span> | |
| <!-- | |
| Icon when menu is closed. | |
| Heroicon name: outline/menu | |
| Menu open: "hidden", Menu closed: "block" | |
| --> | |
| <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path> | |
| </svg> | |
| <!-- | |
| Icon when menu is open. | |
| Heroicon name: outline/x | |
| Menu open: "block", Menu closed: "hidden" | |
| --> | |
| <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| <!-- Avatar + dropdown menu --> | |
| <div class="ml-2 mr-5 flex items-center max-w-xs"> | |
| <!-- Profile dropdown --> | |
| <div class="relative flex-shrink-0"> | |
| <div> | |
| <button type="button" class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-blue-100" id="user-menu-button" aria-expanded="false" aria-haspopup="true"> | |
| <span class="sr-only">Open user menu</span> | |
| <img class="h-9 w-9 rounded-full" src="https://secure.gravatar.com/avatar/edf8f5994430e63a2477e8af090bb680?d" alt=""> | |
| </button> | |
| </div> | |
| <!-- | |
| Dropdown menu, show/hide based on menu state. | |
| Entering: "transition ease-out duration-100" | |
| From: "transform opacity-0 scale-95" | |
| To: "transform opacity-100 scale-100" | |
| Leaving: "transition ease-in duration-75" | |
| From: "transform opacity-100 scale-100" | |
| To: "transform opacity-0 scale-95" | |
| --> | |
| <div class="origin-top-right absolute right-0 top-12 w-56 rounded-md shadow-lg py-0 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1" style=" | |
| display: none; | |
| "> | |
| <div class="block flex items-center border-b border-blue-100 rounded-t-md"><a href="#" class="w-full flex flex-col items-start px-4 py-2.5 text-sm text-gray-600 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-600 rounded-t-md" role="menuitem" tabindex="-1" id="user-menu-item-0"><span class="font-semibold text-gray-800 tracking-wide pb-0.5">atsuko</span> | |
| User Settings | |
| </a></div><a href="#" class="block px-4 py-2 text-sm text-gray-600 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-1">Email</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-600 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-2">Security</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-600 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-3">Connected Services</a> | |
| <div class="flex block mt-1 px-4 pt-2 pb-1 uppercase text-xs font-semibold tracking-widest text-gray-900 focus:outline-none border-t border-blue-100 justify-start"><svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-4 w-4 mr-1 text-blue-600 hidden" viewBox="0 0 20 20" fill="currentColor"> | |
| <path d="M8 5a1 1 0 100 2h5.586l-1.293 1.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L13.586 5H8zM12 15a1 1 0 100-2H6.414l1.293-1.293a1 1 0 10-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L6.414 15H12z"></path> | |
| </svg><span class="flex pb-1 border-b border-blue-100">Switch Account</span><span class="hidden">Edit</span></div> | |
| <div class="flex items-center justify-between w-full border-l-2 border-transparent hover:border-blue-500 hover:bg-blue-100"><a href="#" class="block w-full px-4 py-2 text-sm text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-3">Hoohoo</a> | |
| <a href="#" class="rounded-full group p-1.5 mr-2.5 ml-4 text-sm text-blue-500 bg-blue-50 hover:bg-blue-800 hover:bg-opacity-90 hover:text-blue-50 focus:outline-none focus:text-blue-800 focus:bg-blue-100" aria-label="Manage Settings" role="menuitem" tabindex="-1" id="user-menu-item-4"><svg aria-hidden="true" fill="none" stroke="currentColor" viewBox="2 1 21.5 21.5" xmlns="http://www.w3.org/2000/svg" x-description="Heroicon name: line/cog" class="h-4 w-4"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> | |
| </svg></a> | |
| </div> | |
| <div class="flex items-center justify-between w-full border-l-2 border-transparent hover:border-blue-500 hover:bg-blue-100"><a href="#" class="block w-full px-4 py-2 text-sm text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-6">personal-test</a> | |
| <a href="#" class="rounded-full group p-1.5 mr-2.5 ml-4 text-sm text-blue-500 bg-blue-50 hover:bg-blue-800 hover:bg-opacity-90 hover:text-blue-50 focus:outline-none focus:text-blue-800 focus:bg-blue-100" aria-label="Manage Settings" role="menuitem" tabindex="-1" id="user-menu-item-7"><svg aria-hidden="true" fill="none" stroke="currentColor" viewBox="2 1 21.5 21.5" xmlns="http://www.w3.org/2000/svg" x-description="Heroicon name: line/cog" class="h-4 w-4"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> | |
| </svg></a> | |
| </div> | |
| <div class="flex items-center justify-between w-full border-l-2 bg-blue-100 border-blue-800 hover:border-blue-500 hover:bg-blue-100"><a href="#" class="block w-full px-4 py-2 text-sm text-blue-800 hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-8">Rollbar</a> | |
| <a href="#" class="rounded-full group p-1.5 mr-2.5 ml-4 text-sm text-blue-700 bg-blue-100 hover:bg-blue-800 hover:bg-opacity-90 hover:text-blue-50 focus:outline-none focus:text-blue-800 focus:bg-blue-100" aria-label="Manage Settings" role="menuitem" tabindex="-1" id="user-menu-item-9"><svg aria-hidden="true" fill="none" stroke="currentColor" viewBox="2 1 21.5 21.5" xmlns="http://www.w3.org/2000/svg" x-description="Heroicon name: line/cog" class="h-4 w-4"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> | |
| </svg></a> | |
| </div> | |
| <div class="flex items-center justify-between w-full border-l-2 border-transparent hover:border-red-600 hidden"><a href="#" class="block w-full px-4 py-2 text-sm text-gray-600 hover:text-red-700 focus:outline-none focus:text-red-800" role="menuitem" tabindex="-1" id="user-menu-item-7">Design-Playground</a> | |
| <a href="#" class="rounded-full group px-2 py-2 mx-2.5 text-sm text-red-500 bg-red-50 hover:bg-red-100 hover:bg-opacity-100 hover:text-red-500 focus:outline-none focus:text-red-600 focus:ring-0 focus:ring-red-300 focus:bg-red-50" aria-label="Manage Settings" role="menuitem" tabindex="-1" id="user-menu-item-8"><svg class="h-4 w-4" aria-hidden="true" fill="currentColor" viewBox="0 0 1192.3578 1120.896" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 2000 2000" xml:space="preserve"> | |
| <path style="" d="m 310.53287,0 c -37.4468,0 -74.1378,6.648 -109.1348,19.714 -14.997,5.613 -26.176,18.486 -29.571,34.146 -3.397,15.657 1.412,31.976 12.732,43.343 l 127.0128,127.059 -18.441,68.909 -68.9988,18.486 L 97.118065,184.599 c -11.319,-11.32 -27.54,-16.274 -43.294,-12.738 -15.752,3.397 -28.582,14.53 -34.195,29.576 -42.542,113.76 -14.6209996,242.658 71.027,328.353 70.181005,70.227 170.783005,102.534 268.883805,86.685 l 13.601,13.603 -200.0878,200.00402 c -71.926,72.018 -82.255005,174.46098 -23.489,233.22598 24.336,24.338 58.153,37.733 95.27,37.733 48.7208,0 99.0438,-22.358 137.8598,-61.267 l 200.07795,-200.03898 228.031,228.05398 c 34.383,34.242 79.99,53.107 128.427,53.107 48.531,0 94.13998,-18.912 128.37998,-53.107 34.383,-34.289 53.246,-79.84898 53.246,-128.37998 0,-48.531 -18.957,-94.091 -53.246,-128.378 L 768.02982,511.451 978.75482,300.839 c 12.724,4.793 26.31698,7.323 40.27698,7.327 30.543,-0.02 59.202,-11.896 80.841,-33.438 l 78.665,-78.715 c 8.866,-8.819 13.82,-20.845 13.82,-33.344 0,-12.498 -4.954,-24.479 -13.82,-33.348 l -95.078,-95.081 c -17.688,-17.688 -49.004,-17.688 -66.691,0 l -78.57798,78.668 c -32.634,32.636 -41.338,80.371 -26.07,121.144 l -210.802,210.688 -84.974,-84.974 c 15.66,-97.723 -16.319,-198.703 -86.685,-268.978 C 471.17582,32.259 393.35287,0 310.53287,0 Z m 4.483,94.381 c 55.936,1.132 108.335,23.44 147.95195,63.105 54.24,54.24 75.319,131.259 56.36,206.062 -4.055,16.13 0.661,33.2 12.358,44.946 l 469.23698,469.23102 c 16.507,16.507 25.609,38.393 25.609,61.692 0,23.299 -9.102,45.136 -25.609,61.64298 -32.96798,32.96 -90.46498,32.913 -123.43198,0.04 L 408.35387,531.867 c -8.914,-8.96 -20.991,-13.82 -33.348,-13.82 l 0,0 c -3.867,0 -7.735,0.426 -11.602,1.463 -73.481,18.629 -152.7138,-3.016 -206.0558,-56.36 -39.902,-39.9 -61.740005,-93.244 -63.014005,-147.907 l 82.349005,82.394 c 11.885,11.934 29.29,16.651 45.609,12.216 l 121.4938,-32.543 c 16.319,-4.338 29.004,-17.072 33.342,-33.344 l 32.595,-121.541 c 4.34,-16.272 -0.285,-33.678 -12.265,-45.564 l -82.442,-82.487 z m 735.14593,39.939 28.341,28.3 -45.321,45.37 c -9.618,9.574 -17.115,10.147 -26.48,1.724 -0.557,-0.616 -1.134,-1.222 -1.728,-1.816 -0.366,-0.367 -0.745,-0.712 -1.122,-1.065 -6.67898,-7.916 -6.42798,-19.773 1.03,-27.233 l 45.28,-45.28 z m -611.95293,564.12602 76.26395,76.268 -198.41995,198.368 c -21.035,21.036 -47.6358,33.63198 -71.2188,33.63198 -8.347,0 -20.138,-1.745 -28.531,-10.04698 -18.065,-18.062 -12.83,-63.532 23.487,-99.894 l 198.4188,-198.327 z m 494.08795,191.298 c -21.743,0 -39.335,17.594 -39.335,39.289 0,21.696 17.592,39.29 39.335,39.29 21.742,0 39.334,-17.594 39.334,-39.29 0,-21.695 -17.592,-39.289 -39.334,-39.289 z"></path> | |
| </svg> | |
| </a> | |
| </div> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-600 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-10">Create new account</a> | |
| <div class="flex block mt-1 px-4 pt-2 pb-1 uppercase text-xs font-semibold tracking-widest text-gray-900 focus:outline-none border-t border-blue-100 justify-start"><svg xmlns="http://www.w3.org/2000/svg" class="flex-shrink-0 h-4 w-4 mr-1 text-blue-600 hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 9l3 3m0 0l-3 3m3-3H8m13 0a9 9 0 11-18 0 9 9 0 0118 0z"></path> | |
| </svg> | |
| <span class="pb-1 border-b border-blue-100">Quick Links</span> | |
| </div> | |
| <div class="flex items-center justify-between w-full border-b-2 border-blue-100 mt-0"> | |
| <div class="flex w-full justify-between divide-x divide-blue-100"> | |
| <span class="flex p-2 w-1/2 place-content-center text-sm hover:bg-blue-100"> | |
| <button type="button" class="group flex flex-col items-center space-y-1 text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-800" aria-label="Create New Account"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-400 group-hover:text-blue-800" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"></path> | |
| </svg> | |
| <span class="font-medium">Account</span> | |
| </button> | |
| </span> | |
| <span class="inline-flex p-2 w-1/2 place-content-center text-sm hover:bg-blue-100"> | |
| <button type="button" class="group flex flex-col items-center space-y-1 text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-800"> | |
| <svg class="h-5 w-5 text-blue-400 group-hover:text-blue-800" xmlns="http://www.w3.org/2000/svg" viewBox="-8 -8 110 110" fill="currentColor" aria-hidden="true"> | |
| <g> | |
| <path d="M98.522,37.664L85.699,14.405c-0.576-1.166-1.91-1.947-3.469-2.303c-0.037-0.011-0.059-0.036-0.104-0.043 c-0.08-0.02-0.166-0.006-0.249-0.025c-0.466-0.083-0.923-0.137-1.414-0.132c-0.488-0.005-0.951,0.05-1.414,0.132 c-0.086,0.019-0.167,0.005-0.251,0.025c-0.042,0.007-0.068,0.032-0.106,0.043c-1.559,0.358-2.892,1.14-3.462,2.303l-9.407,50.362 L55.289,35.621c-0.576-1.165-1.916-1.949-3.476-2.306c-0.034-0.008-0.061-0.03-0.096-0.038c-0.08-0.02-0.15-0.005-0.232-0.022 c-0.467-0.085-0.935-0.143-1.429-0.134c-0.499-0.008-0.962,0.049-1.434,0.134c-0.077,0.017-0.159,0.002-0.235,0.022 c-0.039,0.008-0.061,0.03-0.098,0.041c-1.559,0.357-2.896,1.138-3.471,2.303L34.463,61.735l-10.767-8.414 c-0.086-0.068-0.209-0.093-0.299-0.156c-0.063-0.044-0.088-0.101-0.154-0.142c-0.167-0.104-0.382-0.141-0.559-0.229 c-0.346-0.167-0.678-0.328-1.061-0.436c-0.305-0.085-0.611-0.117-0.929-0.162c-0.354-0.049-0.7-0.104-1.059-0.101 c-0.362-0.004-0.702,0.052-1.055,0.101c-0.319,0.045-0.625,0.077-0.929,0.162c-0.382,0.107-0.717,0.269-1.061,0.436 c-0.182,0.088-0.39,0.124-0.557,0.229c-0.069,0.041-0.097,0.101-0.154,0.142c-0.097,0.063-0.213,0.09-0.301,0.156L2.561,66.89 c-2.003,1.562-1.806,3.955,0.435,5.345c2.239,1.399,5.668,1.265,7.662-0.298l9.558-9.954l12.743,9.954 c1.996,1.562,5.428,1.697,7.666,0.298c0.233-0.142,0.342-0.327,0.528-0.49c0.015-0.008,0.02-0.021,0.037-0.033 c0.36-0.317,0.661-0.641,0.853-1.012c0.058-0.093,0.167-0.158,0.22-0.258l7.562-19.066L62.19,85.599 c0.575,1.164,1.911,1.943,3.468,2.302c0.038,0.012,0.066,0.033,0.106,0.044c0.085,0.02,0.172,0.005,0.257,0.024 c0.465,0.082,0.922,0.137,1.411,0.13c0.484,0.007,0.938-0.048,1.404-0.13c0.088-0.02,0.173-0.005,0.254-0.024 c0.045-0.011,0.071-0.032,0.113-0.044c1.551-0.358,2.888-1.14,3.462-2.302l10.287-55.083l5.302,9.615 c0.975,1.977,4.065,3.027,6.906,2.347C97.996,41.801,99.504,39.644,98.522,37.664z"></path> | |
| </g> | |
| </svg> | |
| <span class="font-medium">Usage</span> | |
| </button> | |
| </span> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between w-full border-t-0 border-blue-100 pb-2.5"> | |
| <div class="flex w-full justify-between divide-x divide-blue-100"> | |
| <span class="flex p-2 w-1/2 place-content-center text-sm hover:bg-blue-100"> | |
| <button type="button" class="group flex flex-col items-center space-y-1 text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-800"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-400 group-hover:text-blue-800" viewBox="0 0 20 20" fill="currentColor"> | |
| <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"></path> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd"></path> | |
| </svg> | |
| <span class="font-medium">Billing</span> | |
| </button> | |
| </span> | |
| <span class="inline-flex p-2 w-1/2 place-content-center text-sm hover:bg-blue-100"> | |
| <button type="button" class="group flex flex-col items-center space-y-1 text-gray-600 hover:text-blue-600 focus:outline-none focus:text-blue-800"> | |
| <svg class="h-5 w-5 text-blue-400 group-hover:text-blue-800" xmlns="http://www.w3.org/2000/svg" viewBox="-0.8 -0.8 6.5 6.5" fill="currentColor" aria-hidden="true"> | |
| <g transform="translate(-34.926021,-0.52916668)"> | |
| <path transform="scale(0.26458334)" d="m 135,2 c -1.88892,0.0069 -3.00501,1.5484919 -2.99609,3.0058594 v 9.7578126 c 0,1.733148 0.89162,3.349014 2.36132,4.267578 l 4.40625,2.759766 c 1.36016,0.850095 3.22657,-0.189008 3.22657,-1.792969 v -2.001953 h 2 c 1.64501,0 3.00586,-1.351077 3.00586,-2.996094 V 14.003906 A 1.0000006,1.0000006 0 0 0 145.99805,13 a 1.0000006,1.0000006 0 0 0 -0.9961,1.003906 V 15 c 0,0.564136 -0.43977,0.996094 -1.0039,0.996094 h -2 V 8.9980469 c 0,-1.6106249 -0.96296,-3.0706217 -2.44336,-3.7050781 l -3.01172,-1.2910157 h 7.45508 c 0.56396,1.48e-5 1.0039,0.432135 1.0039,0.9960938 v 1.0039062 c 0.002,0.5495974 0.4465,0.9942036 0.9961,0.9960938 0.55247,0.00218 1.00396,-0.4436149 1.00586,-0.9960938 V 4.9980469 C 147.00391,3.3532257 145.64287,2.000043 143.99805,2 Z m -0.99609,3.0859375 4.76171,2.0449219 c 0.75005,0.3214488 1.23243,1.0511637 1.23243,1.8671875 V 17 19.998047 c 0,0.137344 -0.0456,0.168493 -0.16211,0.0957 l -4.41602,-2.761719 c -0.88724,-0.554523 -1.41601,-1.522083 -1.41601,-2.568359 z m 14.96289,1.9121094 a 1.0000006,1.0000006 0 0 0 -0.67188,0.2949219 1.0000006,1.0000006 0 0 0 0,1.4179687 l 0.28711,0.2871094 h -3.58008 a 1.0000006,1.0000006 0 0 0 -1.0039,1.0039061 1.0000006,1.0000006 0 0 0 1.0039,0.996094 h 3.58985 l -0.29688,0.296875 a 1.0000006,1.0000006 0 0 0 0,1.410156 1.0000006,1.0000006 0 0 0 1.41016,0 l 1.94726,-1.949219 A 1.0000006,1.0000006 0 0 0 152,10.001953 a 1.0000006,1.0000006 0 0 0 -0.33008,-0.7460936 1.0000006,1.0000006 0 0 0 -0.01,-0.00977 l -1.95508,-1.953125 A 1.0000006,1.0000006 0 0 0 148.9668,6.9980469 Z"></path> | |
| </g> | |
| </svg> | |
| <span class="font-medium">Logout</span> | |
| </button> | |
| </span> | |
| </div> | |
| </div><a href="#" class="border-b border-blue-100 block mx-3 mb-2 mt-2.5 px-4 py-2.5 text-center text-md font-semibold tracking-wide text-gray-50 bg-gray-700 rounded-full hover:bg-blue-700 hover:text-blue-50 focus:outline-none focus:text-blue-800 hidden" role="menuitem" tabindex="-1" id="user-menu-item-2">Promo CTA</a> | |
| <div class="flex items-center border-t border-blue-100 rounded-b-md hidden"><a href="#" class="block w-full px-4 pt-2 py-2.5 text-sm text-gray-600 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800 rounded-b-md" role="menuitem" tabindex="-1" id="user-menu-item-11">Log Out</a></div> | |
| <div class="flex items-center border-t border-blue-100 hidden"><a href="#" class="block w-full px-4 py-2 text-sm text-gray-600 border-l-2 border-transparent hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="user-menu-item-9">Create new account</a></div> | |
| </div> | |
| </div> | |
| <button type="button" class="inline-flex transition duration-300 button-ease items-center px-2.5 md:px-4 py-2.5 border border-transparent text-sm font-medium rounded-full tracking-wide text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-800 focus:border-blue-700 hidden"> | |
| <svg class="md:-ml-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4 text-blue-50" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path> | |
| </svg> | |
| <span class="hidden md:block">New Project</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Submenu bar available ---> | |
| <nav class="bg-gray-50 py-2 flex space-x-8 px-2 sm:px-4 lg:px-8 hidden" aria-label="Sub-menu"> | |
| <a href="#" class="bg-blue-600 text-white rounded-md py-2 px-3 inline-flex items-center text-sm font-medium" aria-current="page">General</a> | |
| <a href="#" class="text-gray-500 hover:bg-blue-100 hover:text-blue-600 rounded-md py-2 px-3 inline-flex items-center text-sm font-medium">Collaborators</a> | |
| <a href="#" class="text-gray-500 hover:bg-blue-100 hover:text-blue-600 rounded-md py-2 px-3 inline-flex items-center text-sm font-medium">Integrations</a> | |
| <a href="#" class="text-gray-500 hover:bg-blue-100 hover:text-blue-600 rounded-md py-2 px-3 inline-flex items-center text-sm font-medium">Link</a> | |
| </nav> | |
| </div> | |
| <!-- Top navigation with condensed popup menu --> | |
| <nav class="sm:hidden bg-blue-900" aria-label="Mobile menu" id="mobile-menu" style=" | |
| /* display: none; */ | |
| "> | |
| <div class="pt-1.5 pb-2 px-2 space-y-0.5 text-blue-200"> | |
| <p class="px-2 pt-1 text-xs font-semibold text-blue-300 uppercase tracking-wider hidden">More</p> | |
| <a href="#" class="group flex items-end block rounded-md py-2 px-3 text-base font-medium hover:bg-blue-800 hover:text-white focus:outline-none focus:bg-blue-700"> | |
| <svg class="text-blue-300 group-hover:text-blue-100 h-5 w-5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path> | |
| </svg> | |
| People</a><a href="#" class="group flex fill-current bg-black bg-opacity-20 block rounded-md py-2 px-3 text-base font-medium flex items-end hover:bg-blue-800 hover:text-white focus:outline-none focus:bg-blue-700" aria-current="page"> | |
| <svg class="text-blue-300 group-hover:text-blue-100 mr-3 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true"> | |
| <path d="M18.707 18.706a1.352 1.352 0 0 0 0-1.893 1.352 1.352 0 0 0-1.894 0 1.354 1.354 0 0 0 0 1.894 1.353 1.353 0 0 0 1.894 0zM21 16.76c.547 0 1 .453 1 1 0 .546-.453 1-1 1h-.053c-.067.187-.133.373-.227.533l.04.04c.387.4.387 1.027 0 1.427a1.01 1.01 0 0 1-1.426-.013l-.027-.027c-.173.08-.36.16-.547.227V21c0 .546-.453 1-1 1-.546 0-1-.454-1-1v-.053a6.688 6.688 0 0 1-.546-.227l-.027.027c-.4.4-1.027.4-1.426.013a.621.621 0 0 1-.12-.16 1.01 1.01 0 0 1 .12-1.267l.04-.04a3.186 3.186 0 0 1-.227-.533h-.054c-.546 0-1-.454-1-1 0-.547.454-1 1-1h.053c.067-.2.147-.374.227-.547l-.04-.04a1.006 1.006 0 0 1 0-1.413 1.022 1.022 0 0 1 1.426 0l.04.04c.174-.094.347-.16.534-.227v-.053c0-.547.453-1 1-1 .546 0 1 .453 1 1v.053c.187.067.36.133.533.227l.04-.04a.99.99 0 0 1 .707-.294c.267 0 .52.094.72.294.387.4.387 1.026 0 1.413l-.04.04c.08.173.16.347.227.547H21z"></path> | |
| <path d="M20 7.427V6.64a1.6 1.6 0 0 0-1.587-1.587H9.467a.999.999 0 0 1-.707-.293.947.947 0 0 1-.293-.707v-.466C8.467 2.72 7.76 2 6.867 2H3.6C2.706 2 2 2.72 2 3.587v3.84a3.576 3.576 0 0 1 1.6-.374h14.813c.574 0 1.107.134 1.587.374zm2-.787V12c0 .56-.453 1-1 1a.982.982 0 0 1-.827-.44A.996.996 0 0 1 20 12v-1.36a1.6 1.6 0 0 0-1.587-1.587H3.6c-.894 0-1.6.72-1.6 1.587v7.76c0 .88.707 1.6 1.6 1.6H12c.413 0 .773.253.92.613A.999.999 0 0 1 12 22H3.6c-2 0-3.6-1.613-3.6-3.6V3.587A3.59 3.59 0 0 1 3.6 0h3.267c1.8 0 3.293 1.333 3.56 3.053h7.986A3.596 3.596 0 0 1 22 6.64z"></path> | |
| </svg> | |
| Projects</a> | |
| <a href="#" class="group flex items-center hover:bg-blue-800 hover:text-white block rounded-md py-2 px-3 text-base font-medium hover:bg-blue-800 hover:text-white focus:outline-none focus:bg-blue-700"> | |
| <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-5 w-5 mr-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="2 0 21 21" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> | |
| </svg> | |
| Settings</a> | |
| </div> | |
| <div class="pt-1.5 pb-2 px-2 space-y-0.5 border-t border-blue-800 text-blue-200"> | |
| <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" --> | |
| <a href="#" class="group block rounded-md py-2 px-3 text-base font-medium flex items-center hover:bg-blue-800 hover:text-white focus:outline-none focus:bg-blue-700"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="mr-3 h-5 w-5 text-yellow-400 group-hover:text-blue-100 group-focus:text-yellow-500 self-end" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M5 2a1 1 0 011 1v1h1a1 1 0 010 2H6v1a1 1 0 01-2 0V6H3a1 1 0 010-2h1V3a1 1 0 011-1zm0 10a1 1 0 011 1v1h1a1 1 0 110 2H6v1a1 1 0 11-2 0v-1H3a1 1 0 110-2h1v-1a1 1 0 011-1zM12 2a1 1 0 01.967.744L14.146 7.2 17.5 9.134a1 1 0 010 1.732l-3.354 1.935-1.18 4.455a1 1 0 01-1.933 0L9.854 12.8 6.5 10.866a1 1 0 010-1.732l3.354-1.935 1.18-4.455A1 1 0 0112 2z" clip-rule="evenodd"></path> | |
| </svg> | |
| Upgrade</a> | |
| <a href="#" class="group block rounded-md py-2 px-3 text-base font-medium flex items-center hover:bg-blue-800 hover:text-white focus:outline-none focus:bg-blue-700"> | |
| <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-5 w-5 mr-3 self-end" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 21" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"></path> | |
| </svg> | |
| Updates</a> | |
| <a href="#" class="group block rounded-md py-2 px-3 text-base font-medium flex items-center hover:bg-blue-800 hover:text-white focus:outline-none focus:bg-blue-700"> | |
| <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-5 w-5 mr-3 self-end" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="2 1 22 22" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path> | |
| </svg> | |
| Documentation</a><a href="#" class="group block rounded-md py-2 px-3 text-base font-medium flex items-center hover:bg-blue-800 hover:text-white focus:outline-none focus:bg-blue-700"> | |
| <svg class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-5 w-5 mr-3 self-end" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="1 1 22 22" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"></path>> | |
| </svg> | |
| Knowledge Base</a><a href="#" class="group block rounded-md py-2 px-3 text-base font-medium flex items-center hover:bg-blue-800 hover:text-white focus:outline-none focus:bg-blue-700 hidden"> | |
| <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="-0.4 0 5.7 5.7" class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-5 w-5 mr-3 self-end"> | |
| <g transform="translate(-34.926021,-0.52916668)"> | |
| <path transform="scale(0.26458334)" d="m 135,2 c -1.88892,0.0069 -3.00501,1.5484919 -2.99609,3.0058594 v 9.7578126 c 0,1.733148 0.89162,3.349014 2.36132,4.267578 l 4.40625,2.759766 c 1.36016,0.850095 3.22657,-0.189008 3.22657,-1.792969 v -2.001953 h 2 c 1.64501,0 3.00586,-1.351077 3.00586,-2.996094 V 14.003906 A 1.0000006,1.0000006 0 0 0 145.99805,13 a 1.0000006,1.0000006 0 0 0 -0.9961,1.003906 V 15 c 0,0.564136 -0.43977,0.996094 -1.0039,0.996094 h -2 V 8.9980469 c 0,-1.6106249 -0.96296,-3.0706217 -2.44336,-3.7050781 l -3.01172,-1.2910157 h 7.45508 c 0.56396,1.48e-5 1.0039,0.432135 1.0039,0.9960938 v 1.0039062 c 0.002,0.5495974 0.4465,0.9942036 0.9961,0.9960938 0.55247,0.00218 1.00396,-0.4436149 1.00586,-0.9960938 V 4.9980469 C 147.00391,3.3532257 145.64287,2.000043 143.99805,2 Z m -0.99609,3.0859375 4.76171,2.0449219 c 0.75005,0.3214488 1.23243,1.0511637 1.23243,1.8671875 V 17 19.998047 c 0,0.137344 -0.0456,0.168493 -0.16211,0.0957 l -4.41602,-2.761719 c -0.88724,-0.554523 -1.41601,-1.522083 -1.41601,-2.568359 z m 14.96289,1.9121094 a 1.0000006,1.0000006 0 0 0 -0.67188,0.2949219 1.0000006,1.0000006 0 0 0 0,1.4179687 l 0.28711,0.2871094 h -3.58008 a 1.0000006,1.0000006 0 0 0 -1.0039,1.0039061 1.0000006,1.0000006 0 0 0 1.0039,0.996094 h 3.58985 l -0.29688,0.296875 a 1.0000006,1.0000006 0 0 0 0,1.410156 1.0000006,1.0000006 0 0 0 1.41016,0 l 1.94726,-1.949219 A 1.0000006,1.0000006 0 0 0 152,10.001953 a 1.0000006,1.0000006 0 0 0 -0.33008,-0.7460936 1.0000006,1.0000006 0 0 0 -0.01,-0.00977 l -1.95508,-1.953125 A 1.0000006,1.0000006 0 0 0 148.9668,6.9980469 Z"></path> | |
| </g> | |
| </svg> | |
| Sign Out</a> | |
| </div> | |
| <div class="pt-1.5 pb-2.5 px-2 space-y-0.5 border-t border-blue-800 text-blue-200"> | |
| <!-- Current: "bg-gray-900 text-white", Default: "text-gray-300 hover:bg-gray-700 hover:text-white" --> | |
| <a href="#" class="group block rounded-md py-2 px-3 text-base font-medium flex items-center hover:bg-blue-800 hover:text-white focus:outline-none focus:bg-blue-700"> | |
| <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="-0.4 0 5.7 5.7" class="text-blue-300 group-hover:text-blue-100 group-focus:text-blue-100 h-5 w-5 mr-3 self-end"> | |
| <g transform="translate(-34.926021,-0.52916668)"> | |
| <path transform="scale(0.26458334)" d="m 135,2 c -1.88892,0.0069 -3.00501,1.5484919 -2.99609,3.0058594 v 9.7578126 c 0,1.733148 0.89162,3.349014 2.36132,4.267578 l 4.40625,2.759766 c 1.36016,0.850095 3.22657,-0.189008 3.22657,-1.792969 v -2.001953 h 2 c 1.64501,0 3.00586,-1.351077 3.00586,-2.996094 V 14.003906 A 1.0000006,1.0000006 0 0 0 145.99805,13 a 1.0000006,1.0000006 0 0 0 -0.9961,1.003906 V 15 c 0,0.564136 -0.43977,0.996094 -1.0039,0.996094 h -2 V 8.9980469 c 0,-1.6106249 -0.96296,-3.0706217 -2.44336,-3.7050781 l -3.01172,-1.2910157 h 7.45508 c 0.56396,1.48e-5 1.0039,0.432135 1.0039,0.9960938 v 1.0039062 c 0.002,0.5495974 0.4465,0.9942036 0.9961,0.9960938 0.55247,0.00218 1.00396,-0.4436149 1.00586,-0.9960938 V 4.9980469 C 147.00391,3.3532257 145.64287,2.000043 143.99805,2 Z m -0.99609,3.0859375 4.76171,2.0449219 c 0.75005,0.3214488 1.23243,1.0511637 1.23243,1.8671875 V 17 19.998047 c 0,0.137344 -0.0456,0.168493 -0.16211,0.0957 l -4.41602,-2.761719 c -0.88724,-0.554523 -1.41601,-1.522083 -1.41601,-2.568359 z m 14.96289,1.9121094 a 1.0000006,1.0000006 0 0 0 -0.67188,0.2949219 1.0000006,1.0000006 0 0 0 0,1.4179687 l 0.28711,0.2871094 h -3.58008 a 1.0000006,1.0000006 0 0 0 -1.0039,1.0039061 1.0000006,1.0000006 0 0 0 1.0039,0.996094 h 3.58985 l -0.29688,0.296875 a 1.0000006,1.0000006 0 0 0 0,1.410156 1.0000006,1.0000006 0 0 0 1.41016,0 l 1.94726,-1.949219 A 1.0000006,1.0000006 0 0 0 152,10.001953 a 1.0000006,1.0000006 0 0 0 -0.33008,-0.7460936 1.0000006,1.0000006 0 0 0 -0.01,-0.00977 l -1.95508,-1.953125 A 1.0000006,1.0000006 0 0 0 148.9668,6.9980469 Z"></path> | |
| </g> | |
| </svg>Log Out</a> | |
| </div> | |
| <div class="border-t border-blue-800 pt-3 pb-3 hidden"> | |
| <p class="px-4 pb-1 text-xs font-semibold text-blue-300 uppercase tracking-wider"> | |
| Account | |
| </p> | |
| <div class="px-2 space-y-0.5 text-blue-200"> | |
| <div class="flex items-center px-2 py-2"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-10 w-10 rounded-full" src="https://secure.gravatar.com/avatar/edf8f5994430e63a2477e8af090bb680?d" alt=""> | |
| </div> | |
| <div class="ml-3 min-w-0 flex-1"> | |
| <div class="text-base font-semibold text-gray-50 tracking-wide truncate">atsuko</div> | |
| <div class="text-xs font-medium text-blue-300 tracking-wide truncate">[email protected]</div> | |
| </div> | |
| <a href="#" class="hidden ml-auto flex-shrink-0 bg-white p-2 text-gray-400 hover:text-gray-500"> | |
| <span class="sr-only">View notifications</span> | |
| <!-- Heroicon name: outline/bell --> | |
| <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path> | |
| </svg> | |
| </a> | |
| </div> | |
| <a href="#" class="flex items-center hover:bg-blue-800 hover:text-white px-3 py-2 text-base font-medium rounded-md"> | |
| <span class="truncate">User Settings</span> | |
| </a> | |
| <a href="#" class="flex items-center hover:bg-blue-800 hover:text-white px-3 py-2 text-base font-medium rounded-md"> | |
| <span class="truncate">Account Settings</span> | |
| </a> | |
| <a href="#" class="flex items-center hover:bg-blue-800 hover:text-white px-3 py-2 text-base font-medium rounded-md"> | |
| <span class="truncate">Switch Accounts</span> | |
| </a> | |
| <a href="#" class="flex items-center hover:bg-blue-800 hover:text-white px-3 py-2 text-base font-medium rounded-md"> | |
| <span class="truncate">Sign out</span> | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| </header><!-- Mobile menu for L2 / not shown on Metrics --> | |
| <div class="relative z-20 flex-shrink-0 flex pl-1 sm:pl-2 h-16 bg-white border-b border-gray-200 lg:hidden" style="display: none;"> | |
| <button type="button" class="px-4 border-r border-gray-200 text-gray-500 hover:text-white hover:border-gray-600 hover:bg-gray-700 focus:outline-none focus:bg-gray-800 focus:text-white lg:hidden hidden"> | |
| <span class="sr-only">Open sidebar</span> | |
| <!-- Heroicon name: outline/menu-alt-2 --> | |
| <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path> | |
| </svg> | |
| </button> | |
| <div class="flex-1 pr-2 sm:pr-4 flex justify-between" style=" | |
| "> | |
| <div class="w-64 flex border-t-0 border-b-0 border-gray-100 bg-white px-3 2xl:px-4 py-2.5 text-sm font-medium text-gray-500"> | |
| <button data-testid="dropdown-button" class="group relative w-full pl-2 pr-8 py-2 text-left cursor-default bg-gray-50 shadow-none border border-transparent text-gray-700 text-sm leading-5 font-semibold tracking-wide placeholder-gray-400 hover:bg-blue-100 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 focus:border-blue-400 focus:bg-blue-100 rounded-md" id="headlessui-listbox-button-2" type="button" aria-haspopup="true" aria-labelledby="headlessui-listbox-label-1 headlessui-listbox-button-2"><span class="flex items-center justify-between"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="flex-shrink-0 h-6 w-6 rounded-md svgicon svgicon-frameworkpyramid hidden"> | |
| <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path> | |
| <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path> | |
| <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path> | |
| <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path> | |
| </svg> | |
| <img src="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" alt="" class="flex-shrink-0 h-6 w-6 rounded-full hidden"> | |
| <span class="block truncate">mox-web</span><span class="flex flex-shrink-0 ml-3 mr-1.5 -space-x-2 overflow-hidden"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworkpyramid"> | |
| <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path> | |
| <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path> | |
| <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path> | |
| <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-node-js" class="bg-white inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworknodejs"> | |
| <path fill="#83cd29" d="M463.6 113.4L276.9 5c-11.8-6.7-27.1-6.7-39 0L49.2 113.4c-12.2 7-20.8 20.1-20.8 34.2v216.5c0 14.1 8.8 27.2 21 34.2l49.9 28.3c23.8 11.7 32.3 11.7 43.1 11.7 35.3 0 55.4-21.3 55.4-58.6V166.1c0-3-1.6-7.5-4.5-7.5h-23.8c-3 0-9.8 4.5-9.8 7.5v213.8c0 16.5-14.9 32.9-42.8 19l-51.5-29.7c-1.8-1-3.1-2.9-3.1-5V147.6c0-2 2.4-4.1 4.2-5.1L254.6 34.3c1.8-1 4.3-1 6.1 0l185.8 108.2c1.8 1.1 1.2 3.1 1.2 5.2v216.5c0 2.1.8 4.1-1 5.1L260 477.5c-1.6 1-3.6 1-5.3 0L206.8 449c-1.4-.8-3.2-1.1-4.5-.4-13.3 7.5-15.8 8.6-28.3 12.9-3.1 1.1-7.6 2.9 1.7 8.2l62.7 37.1c6 3.5 12.8 5.3 19.7 5.3 7 0 13.8-1.8 19.8-5.3l185.8-108.3c12.2-7.1 17.9-20.2 17.9-34.2V147.6c-.1-14-5.8-27.1-18-34.2zM316 329.9c-49.7 0-60.6-13.7-64.2-38.4-.4-2.7-2.7-5.8-5.4-5.8h-24.3c-3 0-5.4 3.6-5.4 6.6 0 31.6 17.2 69.9 99.3 69.9 59.4 0 93.5-23.1 93.5-64 0-40.5-27.4-51.2-85-58.8-58.3-7.7-64.2-11.6-64.2-25.2 0-11.3 5-26.3 48.2-26.3 38.6 0 52.8 8.3 58.6 34.3.5 2.4 2.7 4.2 5.3 4.2h24.4c1.5 0 2.9-.6 4-1.7 1-1.2 1.6-2.6 1.4-4.1-3.8-44.7-33.5-65.6-93.6-65.6-53.5 0-85.4 22.6-85.4 60.4 0 41.1 31.7 52.4 83.1 57.5 61.4 6 66.2 15 66.2 27.1-.1 20.9-17 29.9-56.5 29.9z"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-browser-js" class="bg-white inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworkbrowserjs "> | |
| <path fill="#f0db4f" d="M0 0h512v512H0z"></path> | |
| <path fill="#323330" d="M470.1 389.89c-3.75-23.36-19-43-64.1-61.28-15.67-7.2-33.15-12.35-38.35-24.23-1.85-6.91-2.1-10.81-.93-15 3.36-13.58 19.57-17.81 32.42-13.92 8.27 2.77 16.1 9.15 20.83 19.32 22.09-14.31 22-14.21 37.47-24-5.64-8.76-8.66-12.8-12.36-16.55-13.28-14.84-31.39-22.48-60.35-21.9l-15.08 1.95c-14.46 3.65-28.23 11.24-36.31 21.41-24.24 27.5-17.32 75.63 12.17 95.44 29.05 21.81 71.74 26.77 77.19 47.16 5.3 25-18.35 33.05-41.86 30.18-17.32-3.6-27-12.41-37.38-28.42-19.17 11.09-19.17 11.09-38.88 22.43 4.67 10.22 9.58 14.85 17.42 23.7 37.09 37.62 129.9 35.77 146.54-21.17.68-2.01 5.16-15.01 1.56-35.12zM278.34 235.32h-47.89l-.2 123.81c0 26.33 1.37 50.47-2.92 57.86-7 14.56-25.16 12.75-33.43 9.93-8.42-4.14-12.71-10-17.67-18.34-1.36-2.39-2.38-4.24-2.72-4.38L134.57 428c6.47 13.29 16 24.82 28.23 32.32 18.25 10.95 42.77 14.31 68.43 8.42 16.69-4.87 31.1-14.94 38.64-30.27 10.9-20.1 8.56-44.44 8.47-71.35.24-43.86 0-87.76 0-131.8z"></path> | |
| </svg> | |
| </span></span><span class="group ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400 group-hover:text-gray-600" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> | |
| </svg></span></button> | |
| </div> | |
| <div class="flex-1 flex hidden"> | |
| <form class="group w-full flex lg:ml-0" action="#" method="GET"> | |
| <label for="search-field" class="sr-only">Search</label> | |
| <div class="relative w-full text-gray-400 focus-within:text-gray-600"> | |
| <div class="absolute inset-y-0 left-0 flex items-center pointer-events-none"> | |
| <!-- Heroicon name: solid/search --> | |
| <svg class="h-5 w-5 text-gray-400 group-hover:text-gray-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path> | |
| </svg> | |
| </div> | |
| <input id="search-field" class="block w-full h-full pl-8 pr-3 py-2 border-transparent text-gray-900 focus:border-transparent text-md tracking-wide placeholder-gray-400 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:text-gray-900 focus:ring-0" placeholder="Search items" type="search" name="search"> | |
| </div> | |
| </form> | |
| </div> | |
| <!--- Projects mobile menu ---> | |
| <div class="flex pl-2 lg:px-0" style=" | |
| "> | |
| <div class="flex px-2 lg:px-0"> | |
| <div class="flex items-center lg:hidden"> | |
| <!-- Mobile menu button --> | |
| <button type="button" class="p-1.5 bg-white rounded-lg flex text-sm text-gray-400 hover:text-gray-600 hover:border-blue-300 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-200 focus:bg-gray-100 focus:text-gray-600" id="user-menu-button" aria-expanded="false"> | |
| <span class="sr-only">Open projects menu</span> | |
| <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Open Projects menu when no LHS menu --> | |
| <div class="lg:hidden" style=" | |
| display: none; | |
| "> | |
| <!-- | |
| Mobile menu overlay, show/hide based on mobile menu state. | |
| Entering: "duration-150 ease-out" | |
| From: "opacity-0" | |
| To: "opacity-100" | |
| Leaving: "duration-150 ease-in" | |
| From: "opacity-100" | |
| To: "opacity-0" | |
| --> | |
| <div class="z-20 fixed inset-0 bg-black bg-opacity-25" aria-hidden="true"></div> | |
| <!-- | |
| Mobile menu, show/hide based on mobile menu state. | |
| Entering: "duration-150 ease-out" | |
| From: "opacity-0 scale-95" | |
| To: "opacity-100 scale-100" | |
| Leaving: "duration-150 ease-in" | |
| From: "opacity-100 scale-100" | |
| To: "opacity-0 scale-95" | |
| --> | |
| <div class="z-30 absolute top-0 right-0 max-w-none w-full p-2 transition transform origin-top"> | |
| <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white"> | |
| <div class="flex pt-2 pb-1"> | |
| <div class="flex items-start justify-start mr-4 order-last"> | |
| <div class="-mr-2 absolute inset-y-4 right-6 lg:static lg:flex-shrink-0"> | |
| <button type="button" class="bg-white rounded-lg p-1.5 inline-flex items-center justify-center text-gray-400 hover:text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-200 focus:bg-gray-100 focus:text-gray-500"> | |
| <span class="sr-only">Close menu</span> | |
| <!-- Heroicon name: outline/x --> | |
| <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <ul role="list" class="w-full border-b-0 border-gray-100 divide-y divide-blue-50 py-3"> | |
| <li class="relative pb-4 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="flex justify-between space-x-3 pl-5"> | |
| <div class="min-w-0 flex-1"> | |
| <div class="block focus:outline-none"> | |
| <span class="hidden absolute inset-0" aria-hidden="true"></span> | |
| <div class="flex space-x-2"> | |
| <svg class="flex-shrink-0 h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path> | |
| </svg> | |
| <span class="text-sm uppercase font-semibold tracking-widest text-gray-500 pb-1 border-b-0 border-blue-100"> | |
| Project | |
| </span> | |
| </div> | |
| <p class="hidden text-xs uppercase font-semibold tracking-widest text-blue-600 pb-1">Project</p> | |
| <p class="hidden text-sm text-gray-500 truncate">Velit placeat sit ducimus non sed</p> | |
| </div> | |
| </div> | |
| <time datetime="2021-01-27T16:35" class="hidden flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time> | |
| </div> | |
| <div class="flex mt-1 grid space-y-0.5 text-base font-normal text-gray-800"> | |
| <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="General" title="General">General</a> | |
| <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="Integrations" title="Integrations">Integrations</a> | |
| <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="Collaborators" title="Collaborators">Collaborators</a> | |
| </div> | |
| </li> | |
| <li class="relative bg-white py-4 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="flex justify-between space-x-3 pl-5"> | |
| <div class="min-w-0 flex-1"> | |
| <div class="block focus:outline-none"> | |
| <span class="hidden absolute inset-0" aria-hidden="true"></span> | |
| <div class="flex space-x-2"> | |
| <svg class="flex-shrink-0 h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> | |
| </svg> | |
| <span class="text-sm uppercase font-semibold tracking-widest text-gray-500 pb-1 border-b-0 border-blue-100">Symbol Mapping</span> | |
| </div> | |
| <p class="hidden text-xs uppercase font-semibold tracking-widest text-blue-600 pb-1">Symbol Mapping</p> | |
| <p class="hidden text-sm text-gray-500 truncate">Velit placeat sit ducimus non sed</p> | |
| </div> | |
| </div> | |
| <time datetime="2021-01-27T16:35" class="hidden flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time> | |
| </div> | |
| <div class="flex mt-1 grid space-y-0.5 text-base font-normal text-gray-800"> | |
| <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="Source Maps" title="Source Maps">Source Maps</a> | |
| <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="dSYMs" title="dSYMs">dSYMs</a> | |
| <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="ProGuard" title="ProGuard">ProGuard</a> | |
| </div> | |
| </li> | |
| <li class="relative bg-white pt-4 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="flex justify-between space-x-3 pl-5"> | |
| <div class="min-w-0 flex-1"> | |
| <div class="block focus:outline-none"> | |
| <span class="hidden absolute inset-0" aria-hidden="true"></span> | |
| <div class="flex space-x-2"> | |
| <svg class="flex-shrink-0 h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path> | |
| </svg> | |
| <span class="text-sm uppercase font-semibold tracking-widest text-gray-500 pb-1 border-b-0 border-blue-100">Advanced</span> | |
| </div> | |
| <p class="hidden text-sm uppercase font-semibold tracking-widest text-blue-600 pb-1">Advanced</p> | |
| <p class="hidden text-sm text-gray-500 truncate">Velit placeat sit ducimus non sed</p> | |
| </div> | |
| </div> | |
| <time datetime="2021-01-27T16:35" class="hidden flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time> | |
| </div> | |
| <div class="flex mt-1.5 grid space-y-0.5 text-base font-normal text-gray-800"> | |
| <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="Custom Grouping" title="Custom Grouping">Custom Grouping</a> | |
| <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="IP Blocklist" title="IP Blocklist">IP Blocklist</a> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- End projects mobile menu ---> | |
| </div> | |
| </div> | |
| <!--- Not in use: Top searchbar full ---> | |
| <div class="relative z-20 flex-shrink-0 flex h-16 bg-white border-b border-gray-200 hidden"> | |
| <button type="button" class="px-4 border-r border-gray-200 text-gray-500 hover:text-white hover:border-gray-600 hover:bg-gray-700 focus:outline-none focus:bg-gray-800 focus:text-white lg:hidden hidden"> | |
| <span class="sr-only">Open sidebar</span> | |
| <!-- Heroicon name: outline/menu-alt-2 --> | |
| <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path> | |
| </svg> | |
| </button> | |
| <div class="flex-1 px-4 sm:pr-6 lg:pr-8 flex justify-between"> | |
| <div class="flex-1 flex"> | |
| <form class="group w-full flex lg:ml-0" action="#" method="GET"> | |
| <label for="search-field" class="sr-only">Search</label> | |
| <div class="relative w-full text-gray-400 focus-within:text-gray-600"> | |
| <div class="absolute inset-y-0 left-0 flex items-center pointer-events-none"> | |
| <!-- Heroicon name: solid/search --> | |
| <svg class="h-5 w-5 text-gray-400 group-hover:text-gray-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path> | |
| </svg> | |
| </div> | |
| <input id="search-field" class="block w-full h-full pl-8 pr-3 py-2 border-transparent text-gray-900 focus:border-transparent text-md tracking-wide placeholder-gray-400 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:text-gray-900 focus:ring-0" placeholder="Search items" type="search" name="search"> | |
| </div> | |
| </form> | |
| </div> | |
| <div class="ml-4 flex items-center lg:ml-6 space-x-4 hidden"> | |
| <!-- Profile dropdown --> | |
| <div class="relative flex-shrink-0 hidden"> | |
| <div> | |
| <button type="button" class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-0 focus:ring-blue-600" id="user-menu-button" aria-expanded="false" aria-haspopup="true"> | |
| <span class="sr-only">Open user menu</span> | |
| <img class="h-9 w-9 rounded-full" src="https://secure.gravatar.com/avatar/edf8f5994430e63a2477e8af090bb680?d" alt=""> | |
| </button> | |
| </div> | |
| <!-- | |
| Dropdown menu, show/hide based on menu state. | |
| Entering: "transition ease-out duration-100" | |
| From: "transform opacity-0 scale-95" | |
| To: "transform opacity-100 scale-100" | |
| Leaving: "transition ease-in duration-75" | |
| From: "transform opacity-100 scale-100" | |
| To: "transform opacity-0 scale-95" | |
| --> | |
| <div class="origin-top-right absolute right-0 mt-2 px-1 w-40 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none hidden" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1"> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:bg-opacity-90 hover:text-blue-800 focus:outline-none focus:bg-blue-600 focus:text-white rounded-md" role="menuitem" tabindex="-1" id="user-menu-item-0"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="mr-1 -ml-1 h-4 w-4 text-yellow-400" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M11.3 1.046A1 1 0 0112 2v5h4a1 1 0 01.82 1.573l-7 10A1 1 0 018 18v-5H4a1 1 0 01-.82-1.573l7-10a1 1 0 011.12-.38z" clip-rule="evenodd"></path> | |
| </svg> | |
| Upgrade</a><a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:bg-opacity-90 hover:text-blue-800 focus:outline-none focus:bg-blue-600 focus:text-white rounded-md" role="menuitem" tabindex="-1" id="user-menu-item-1">User Settings</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:bg-opacity-90 hover:text-blue-800 focus:outline-none focus:bg-blue-600 focus:text-white rounded-md" role="menuitem" tabindex="-1" id="user-menu-item-2">Account Settings</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:bg-opacity-90 hover:text-blue-800 focus:outline-none focus:bg-blue-600 focus:text-white rounded-md" role="menuitem" tabindex="-1" id="user-menu-item-3">Switch Accounts</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 border-t border-blue-100 hover:bg-blue-50 hover:bg-opacity-90 hover:text-blue-800 focus:outline-none focus:bg-blue-600 focus:text-white rounded-md" role="menuitem" tabindex="-1" id="user-menu-item-4"> | |
| Sign Out | |
| </a> | |
| </div> | |
| </div> | |
| <button type="button" class="inline-flex transition duration-300 button-ease items-center px-2.5 md:px-4 py-2.5 border border-transparent text-sm font-medium rounded-full tracking-wide text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-800 focus:border-blue-700"> | |
| <svg class="md:-ml-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4 text-blue-50" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path> | |
| </svg> | |
| <span class="hidden md:block">New Project</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!--- Not in use: Top Tabbed menu full --> | |
| <div class="h-12 mt-1 flex space-x-5 sm:space-x-8 px-4 sm:px-6 lg:hidden hidden" aria-label="Tabbed menu"> | |
| <a href="#" class="border-blue-600 text-blue-800 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium focus:outline-none focus:border-blue-600" aria-current="page">General</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-blue-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium focus:outline-none focus:border-blue-600 focus:text-blue-800">Symbol Mapping</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-blue-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium focus:outline-none focus:border-blue-600 focus:text-blue-800">Advanced</a> | |
| </div> | |
| <!--- Layout: Header starts ---> | |
| <header class="w-full flex-shrink-0 relative h-16 flex items-center border-b border-gray-200 z-20 bg-white bg-opacity-50"> | |
| <div class="w-full flex justify-between items-start pl-4 pr-2 sm:px-6 lg:px-8"> | |
| <!-- Header Title + Breadcrumb (optional) --><div class="sm:w-0 mt-1 flex-1"> | |
| <!-- Breadcrumb in-use / Hidden screen:sm --> | |
| <div class="text-smr" style=""> | |
| <nav class="flex" aria-label="Breadcrumb"> | |
| <!-- Breadcrumb: Slash style --><div class="hidden md:block -mb-0.5"> | |
| <ol role="list" class="flex items-center space-x-2"> | |
| <li> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-xs font-normal text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-800">Rollbar</a> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="flex items-center"> | |
| <svg class="flex-shrink-0 h-4 w-4 text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"> | |
| <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z"></path> | |
| </svg> | |
| <a href="#" class="ml-2 text-xs font-normal text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-800">Settings</a> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="flex items-center"> | |
| <svg class="flex-shrink-0 h-4 w-4 text-gray-300" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"> | |
| <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z"></path> | |
| </svg> | |
| <a href="#" class="ml-2 text-xs font-normal text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-800" aria-current="page">Subscription</a> | |
| </div> | |
| </li> | |
| </ol> | |
| </div><!-- Alternative mobile back navigation / breadcrumb - not in use --><div class="flex md:hidden -mb-0.5" style="display: none;"> | |
| <a href="#" class="group inline-flex space-x-2.5 items-center text-smr font-normal text-gray-500 hover:text-blue-600"> | |
| <svg class="flex-shrink-0 -mr-1 h-4 w-4 text-gray-400 group-hover:text-gray-600" x-description="Heroicon name: solid/arrow-sm-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22" stroke="currentColor" fill="none" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12"></path> | |
| </svg> | |
| <span>Back to Projects</span> | |
| </a> | |
| </div> | |
| </nav> | |
| </div><h1 id="projects-heading" class="text-2xl font-normal text-gray-900">My Plan</h1> | |
| <p class="mt-0.5 text-gray-500 truncate hidden">Subtext here, you can also use pill tags instead of text</p><!-- Not in use: Pills --><span class="mt-0.5 block hidden"> | |
| <a href="#" class="relative inline-flex items-center rounded-full bg-gray-100 pl-2 pr-3 py-0.5 text-xs"> | |
| <span class="absolute flex-shrink-0 flex items-center justify-center"> | |
| <span class="h-1.5 w-1.5 rounded-full bg-gray-400" aria-hidden="true"></span> | |
| </span> | |
| <span class="ml-3 font-medium text-gray-600 tracking-wide">Node.JS</span> | |
| </a> | |
| <a href="#" class="relative inline-flex items-center rounded-full bg-gray-100 pl-2 pr-3 py-0.5 text-xs"> | |
| <span class="absolute flex-shrink-0 flex items-center justify-center"> | |
| <span class="h-1.5 w-1.5 rounded-full bg-gray-400" aria-hidden="true"></span> | |
| </span> | |
| <span class="ml-3 font-medium text-gray-600 tracking-wide">Pyramid</span> | |
| </a> | |
| </span> | |
| <!-- Not in use: Alternative breadcrumb - Caret style --><nav class="flex" aria-label="Breadcrumb" style="display: none;"> | |
| <ol role="list" class="flex items-center space-x-2"> | |
| <li> | |
| <div class="flex items-center"> | |
| <a href="#" class="text-xs font-normal text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-800"> | |
| Projects | |
| </a> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="flex items-center"> | |
| <svg class="flex-shrink-0 h-4 w-4 text-gray-400 mt-0.5" x-description="Heroicon name: solid/chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path> | |
| </svg> | |
| <a href="#" class="ml-2 text-xs font-normal text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-800">mox-web</a> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="flex items-center"> | |
| <svg class="flex-shrink-0 h-4 w-4 text-gray-400 mt-0.5" x-description="Heroicon name: solid/chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path> | |
| </svg> | |
| <a href="#" class="ml-2 text-xs font-normal text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-800" aria-current="page">General</a> | |
| </div> | |
| </li> | |
| </ol> | |
| </nav> | |
| </div> | |
| <!-- Header timeframe selector: Middle --><div class="w-auto flex flex-auto justify-center hidden" style=" | |
| "> | |
| <button data-testid="dropdown-button" class="transition duration-300 button-ease group relative w-auto lg:w-96 pl-2.5 pr-8 py-2 my-auto text-left cursor-default bg-blue-100 shadow-none border border-transparent text-gray-700 text-xs lg:text-sm leading-normal font-semibold tracking-wide placeholder-gray-400 hover:bg-blue-300 hover:bg-opacity-30 hover:text-gray-800 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:text-gray-800 focus:ring-1 focus:ring-blue-600 focus:border-blue-400 focus:bg-blue-100 rounded-md" id="headlessui-listbox-button-2" type="button" aria-haspopup="true" aria-labelledby="headlessui-listbox-label-1 headlessui-listbox-button-2"><span class="inline-flex items-center"> | |
| <span class="transition duration-200 button-ease inline-flex items-center mr-1 px-2.5 py-1 rounded-full text-xs font-normal bg-blue-600 text-white group-hover:bg-blue-700 group-hover:text-white group-focus:bg-blue-700 group-focus:text-white focus:outline-none"> | |
| <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path> | |
| </svg> | |
| 30d | |
| </span> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="flex-shrink-0 h-6 w-6 mr-2 text-gray-300 hidden"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path> | |
| </svg> | |
| <img src="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" alt="" class="flex-shrink-0 h-6 w-6 rounded-full hidden"> | |
| <span class="mx-1 font-semibold uppercase leading-tight">Jan 1, 2022<span class="ml-1 text-xs text-gray-400 font-normal group-hover:text-gray-500">7:00am</span></span> | |
| <span class="mx-1 font-normal text-gray-600">−</span> | |
| <span class="mx-1 font-semibold uppercase leading-tight">Feb 2, 2022<span class="ml-1 text-xs text-gray-400 font-normal group-hover:text-gray-500">7:00am</span></span> | |
| <span class="flex flex-shrink-0 -space-x-2 overflow-hidden ml-3 mr-1.5 hidden"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworkpyramid"> | |
| <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path> | |
| <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path> | |
| <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path> | |
| <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-node-js" class="bg-white inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworknodejs"> | |
| <path fill="#83cd29" d="M463.6 113.4L276.9 5c-11.8-6.7-27.1-6.7-39 0L49.2 113.4c-12.2 7-20.8 20.1-20.8 34.2v216.5c0 14.1 8.8 27.2 21 34.2l49.9 28.3c23.8 11.7 32.3 11.7 43.1 11.7 35.3 0 55.4-21.3 55.4-58.6V166.1c0-3-1.6-7.5-4.5-7.5h-23.8c-3 0-9.8 4.5-9.8 7.5v213.8c0 16.5-14.9 32.9-42.8 19l-51.5-29.7c-1.8-1-3.1-2.9-3.1-5V147.6c0-2 2.4-4.1 4.2-5.1L254.6 34.3c1.8-1 4.3-1 6.1 0l185.8 108.2c1.8 1.1 1.2 3.1 1.2 5.2v216.5c0 2.1.8 4.1-1 5.1L260 477.5c-1.6 1-3.6 1-5.3 0L206.8 449c-1.4-.8-3.2-1.1-4.5-.4-13.3 7.5-15.8 8.6-28.3 12.9-3.1 1.1-7.6 2.9 1.7 8.2l62.7 37.1c6 3.5 12.8 5.3 19.7 5.3 7 0 13.8-1.8 19.8-5.3l185.8-108.3c12.2-7.1 17.9-20.2 17.9-34.2V147.6c-.1-14-5.8-27.1-18-34.2zM316 329.9c-49.7 0-60.6-13.7-64.2-38.4-.4-2.7-2.7-5.8-5.4-5.8h-24.3c-3 0-5.4 3.6-5.4 6.6 0 31.6 17.2 69.9 99.3 69.9 59.4 0 93.5-23.1 93.5-64 0-40.5-27.4-51.2-85-58.8-58.3-7.7-64.2-11.6-64.2-25.2 0-11.3 5-26.3 48.2-26.3 38.6 0 52.8 8.3 58.6 34.3.5 2.4 2.7 4.2 5.3 4.2h24.4c1.5 0 2.9-.6 4-1.7 1-1.2 1.6-2.6 1.4-4.1-3.8-44.7-33.5-65.6-93.6-65.6-53.5 0-85.4 22.6-85.4 60.4 0 41.1 31.7 52.4 83.1 57.5 61.4 6 66.2 15 66.2 27.1-.1 20.9-17 29.9-56.5 29.9z"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-browser-js" class="bg-white inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworkbrowserjs "> | |
| <path fill="#f0db4f" d="M0 0h512v512H0z"></path> | |
| <path fill="#323330" d="M470.1 389.89c-3.75-23.36-19-43-64.1-61.28-15.67-7.2-33.15-12.35-38.35-24.23-1.85-6.91-2.1-10.81-.93-15 3.36-13.58 19.57-17.81 32.42-13.92 8.27 2.77 16.1 9.15 20.83 19.32 22.09-14.31 22-14.21 37.47-24-5.64-8.76-8.66-12.8-12.36-16.55-13.28-14.84-31.39-22.48-60.35-21.9l-15.08 1.95c-14.46 3.65-28.23 11.24-36.31 21.41-24.24 27.5-17.32 75.63 12.17 95.44 29.05 21.81 71.74 26.77 77.19 47.16 5.3 25-18.35 33.05-41.86 30.18-17.32-3.6-27-12.41-37.38-28.42-19.17 11.09-19.17 11.09-38.88 22.43 4.67 10.22 9.58 14.85 17.42 23.7 37.09 37.62 129.9 35.77 146.54-21.17.68-2.01 5.16-15.01 1.56-35.12zM278.34 235.32h-47.89l-.2 123.81c0 26.33 1.37 50.47-2.92 57.86-7 14.56-25.16 12.75-33.43 9.93-8.42-4.14-12.71-10-17.67-18.34-1.36-2.39-2.38-4.24-2.72-4.38L134.57 428c6.47 13.29 16 24.82 28.23 32.32 18.25 10.95 42.77 14.31 68.43 8.42 16.69-4.87 31.1-14.94 38.64-30.27 10.9-20.1 8.56-44.44 8.47-71.35.24-43.86 0-87.76 0-131.8z"></path> | |
| </svg> | |
| </span></span><span class="group ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400 group-hover:text-gray-600" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> | |
| </svg></span></button> | |
| </div> | |
| <!-- Header buttons: Right --><div class="w-auto flex items-center justify-end self-center px-3 sm:flex-shrink-0 space-x-3"> | |
| <!-- Primary button --><div class="relative"> | |
| <button type="button" class="inline-flex transition duration-300 button-ease items-center px-3 md:px-4 py-2 md:py-2.5 border border-transparent text-sm font-normal rounded-full tracking-wide text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-800 focus:border-blue-700"> | |
| <span class="block tracking-wide">Change Plan</span> | |
| </button> | |
| <div class="origin-top-right absolute right-0 mt-2 w-max rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-download-button" tabindex="-1" style=" | |
| display: none; | |
| "> | |
| <div class="py-1" role="none"> | |
| <!-- | |
| Active: "bg-gray-100", Not Active: "" | |
| Selected: "font-medium text-gray-900", Not Selected: "text-gray-500" | |
| --> | |
| <span class="block text-xs uppercase font-semibold tracking-widest text-gray-400 px-4 py-2 focus:outline-none" role="menuitem" tabindex="-1" id="menu-item-0">Download Filtered Data</span> | |
| <a href="#" class="group flex text-blue-600 block px-4 py-2 text-sm hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="menu-item-1"><svg class="-ml-1 mr-1.5 h-5 w-5 text-gray-500 self-center group-hover:text-gray-500" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M5 4a3 3 0 00-3 3v6a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H5zm-1 9v-1h5v2H5a1 1 0 01-1-1zm7 1h4a1 1 0 001-1v-1h-5v2zm0-4h5V8h-5v2zM9 8H4v2h5V8z" clip-rule="evenodd"></path> | |
| </svg>Chart Data (CSV)</a> | |
| <a href="#" class="group flex text-gray-500 block px-4 py-2 text-sm hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="menu-item-1"><svg class="-ml-1 mr-1.5 h-5 w-5 text-gray-400 self-center group-hover:text-gray-500" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm9 4a1 1 0 10-2 0v6a1 1 0 102 0V7zm-3 2a1 1 0 10-2 0v4a1 1 0 102 0V9zm-3 3a1 1 0 10-2 0v1a1 1 0 102 0v-1z" clip-rule="evenodd"></path> | |
| </svg> | |
| Chart Snapshot (PNG)</a><a href="#" class="group flex text-gray-500 block px-4 py-2 text-sm hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="menu-item-1"><svg class="-ml-1 mr-1.5 h-5 w-5 text-gray-400 self-center group-hover:text-gray-500" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M5 4a3 3 0 00-3 3v6a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H5zm-1 9v-1h5v2H5a1 1 0 01-1-1zm7 1h4a1 1 0 001-1v-1h-5v2zm0-4h5V8h-5v2zM9 8H4v2h5V8z" clip-rule="evenodd"></path> | |
| </svg>Items Metrics (CSV)</a> | |
| <span href="#" class="block text-xs uppercase font-semibold tracking-widest text-gray-400 block px-4 py-2 mt-2 border-t border-gray-100 focus:outline-none" role="menuitem" tabindex="-1" id="menu-item-3">Consume Data From Our API</span> | |
| <a href="#" class="group flex text-gray-500 block px-4 py-2 text-sm hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="menu-item-1"><svg class="-ml-1 mr-1.5 h-5 w-5 text-gray-400 self-center group-hover:text-gray-500" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" viewBox="-1 -2 22 22" fill="currentColor" aria-hidden="true"> | |
| <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path> | |
| <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path> | |
| </svg> | |
| API Metrics Doc</a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Secondary button --><!-- Settings + Popup menu --><div class="relative"> | |
| <button type="button" class="group inline-flex transition duration-300 button-ease justify-center px-2 py-2 border border-gray-300 text-sm font-medium rounded-full text-gray-600 bg-transparent hover:text-gray-700 hover:border-gray-500 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400"> | |
| <svg class="h-5 w-5 text-gray-400 transition duration-300 button-ease group-hover:text-gray-600 group-focus:text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> | |
| </svg> | |
| <span class="hidden tracking-wide">Settings</span></button> | |
| <div class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-download-button" tabindex="-1" style=" | |
| display: none; | |
| "> | |
| <div class="py-2.5" role="none"> | |
| <!-- | |
| Active: "bg-gray-100", Not Active: "" | |
| Selected: "font-medium text-gray-900", Not Selected: "text-gray-500" | |
| --> | |
| <span class="block text-xs uppercase font-semibold tracking-widest text-gray-400 px-4 py-0.5 focus:outline-none" role="menuitem" tabindex="-1" id="menu-item-0">Settings</span> | |
| <a href="#" class="group flex text-gray-600 block pl-5 pr-4 py-1.5 text-sm hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="menu-item-1">Setup</a> | |
| <a href="#" class="group flex text-gray-600 block pl-5 pr-4 py-1.5 text-sm hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="menu-item-1">Security</a><a href="#" class="group flex text-blue-600 block pl-5 pr-4 py-1.5 text-sm hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="menu-item-1">Subscription</a> | |
| <span href="#" class="block text-xs uppercase font-semibold tracking-widest text-gray-400 block px-4 pt-3 pb-0.5 mt-2 border-t border-gray-100 focus:outline-none" role="menuitem" tabindex="-1" id="menu-item-3">Switch Accounts</span> | |
| <a href="#" class="justify-between group flex text-blue-600 block pl-5 pr-4 py-1.5 text-sm hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="menu-item-1">Rollbar | |
| <svg class="h-5 w-5 text-blue-600 self-center group-hover:text-blue-700" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> | |
| </svg> | |
| </a> | |
| <a href="#" class="group flex text-gray-600 block pl-5 pr-4 py-1.5 text-sm hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="menu-item-1">Playground</a></div> | |
| </div> | |
| </div><!-- Notifications --><button type="button" class="group inline-flex transition duration-300 button-ease justify-center px-2 py-2 border border-gray-300 text-sm font-medium rounded-full text-gray-600 bg-transparent hover:text-gray-700 hover:border-gray-500 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400"> | |
| <svg class="h-5 w-5 text-gray-400 transition duration-300 button-ease group-hover:text-gray-600 group-focus:text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path> | |
| </svg> | |
| <span class="hidden tracking-wide">Notification</span> | |
| </button><!-- Export + Popup menu (old) --><div class="relative" style=" | |
| display: none; | |
| "> | |
| <button type="button" class="inline-flex transition duration-300 button-ease items-center px-3 md:px-4 py-2 md:py-2.5 border border-transparent text-sm font-normal rounded-full tracking-wide text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-800 focus:border-blue-700"> | |
| <svg class="md:-ml-1 mr-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4 text-blue-50" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path> | |
| </svg> | |
| <span class="hidden md:block tracking-wide">Export</span> | |
| <svg class="md:-mr-1 md:ml-1.5 h-5 w-5 md:h-4 md:w-4 text-blue-50" x-description="Heroicon name: solid/chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> | |
| </svg> | |
| </button> | |
| <div class="origin-top-right absolute right-0 mt-2 w-max rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-download-button" tabindex="-1" style=" | |
| /* display: none; */ | |
| "> | |
| <div class="py-1" role="none"> | |
| <!-- | |
| Active: "bg-gray-100", Not Active: "" | |
| Selected: "font-medium text-gray-900", Not Selected: "text-gray-500" | |
| --> | |
| <span class="block text-xs uppercase font-semibold tracking-widest text-gray-400 px-4 py-2 focus:outline-none" role="menuitem" tabindex="-1" id="menu-item-0">Download Filtered Data</span> | |
| <a href="#" class="group flex text-blue-600 block px-4 py-2 text-sm hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="menu-item-1"><svg class="-ml-1 mr-1.5 h-5 w-5 text-gray-500 self-center group-hover:text-gray-500" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M5 4a3 3 0 00-3 3v6a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H5zm-1 9v-1h5v2H5a1 1 0 01-1-1zm7 1h4a1 1 0 001-1v-1h-5v2zm0-4h5V8h-5v2zM9 8H4v2h5V8z" clip-rule="evenodd"></path> | |
| </svg>Chart Data (CSV)</a> | |
| <a href="#" class="group flex text-gray-500 block px-4 py-2 text-sm hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="menu-item-1"><svg class="-ml-1 mr-1.5 h-5 w-5 text-gray-400 self-center group-hover:text-gray-500" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M5 3a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2V5a2 2 0 00-2-2H5zm9 4a1 1 0 10-2 0v6a1 1 0 102 0V7zm-3 2a1 1 0 10-2 0v4a1 1 0 102 0V9zm-3 3a1 1 0 10-2 0v1a1 1 0 102 0v-1z" clip-rule="evenodd"></path> | |
| </svg> | |
| Chart Snapshot (PNG)</a><a href="#" class="group flex text-gray-500 block px-4 py-2 text-sm hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="menu-item-1"><svg class="-ml-1 mr-1.5 h-5 w-5 text-gray-400 self-center group-hover:text-gray-500" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M5 4a3 3 0 00-3 3v6a3 3 0 003 3h10a3 3 0 003-3V7a3 3 0 00-3-3H5zm-1 9v-1h5v2H5a1 1 0 01-1-1zm7 1h4a1 1 0 001-1v-1h-5v2zm0-4h5V8h-5v2zM9 8H4v2h5V8z" clip-rule="evenodd"></path> | |
| </svg>Items Metrics (CSV)</a> | |
| <span href="#" class="block text-xs uppercase font-semibold tracking-widest text-gray-400 block px-4 py-2 mt-2 border-t border-gray-100 focus:outline-none" role="menuitem" tabindex="-1" id="menu-item-3">Consume Data From Our API</span> | |
| <a href="#" class="group flex text-gray-500 block px-4 py-2 text-sm hover:text-blue-600 focus:outline-none focus:text-blue-800" role="menuitem" tabindex="-1" id="menu-item-1"><svg class="-ml-1 mr-1.5 h-5 w-5 text-gray-400 self-center group-hover:text-gray-500" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" viewBox="-1 -2 22 22" fill="currentColor" aria-hidden="true"> | |
| <path d="M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z"></path> | |
| <path d="M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z"></path> | |
| </svg> | |
| API Metrics Doc</a> | |
| </div> | |
| </div> | |
| </div></div> | |
| <!--- Responsive button: Filters / Menu - Show screen:md ---> | |
| <div class="flex self-center" style=" | |
| "> | |
| <div class="flex"> | |
| <div class="flex items-center lg:hidden"> | |
| <!-- Metrics filters mobile menu button --> | |
| <button type="button" class="transition duration-300 button-ease p-1.5 bg-transparent rounded-full flex text-sm text-gray-400 border border-transparent hover:text-gray-700 hover:bg-transparent focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400 focus:text-gray-600" id="user-menu-button" aria-expanded="false"> | |
| <span class="sr-only">Open projects menu</span> | |
| <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Show menu popup / change to md:hidden for impl. sm: for demo only --> | |
| <div class="sm:hidden" style=" | |
| /* display: none; */ | |
| "> | |
| <!-- | |
| Mobile menu overlay, show/hide based on mobile menu state. | |
| Entering: "duration-150 ease-out" | |
| From: "opacity-0" | |
| To: "opacity-100" | |
| Leaving: "duration-150 ease-in" | |
| From: "opacity-100" | |
| To: "opacity-0" | |
| --> | |
| <div class="z-20 fixed inset-0 bg-black bg-opacity-25" aria-hidden="true"></div> | |
| <!-- | |
| Mobile menu, show/hide based on mobile menu state. | |
| Entering: "duration-150 ease-out" | |
| From: "opacity-0 scale-95" | |
| To: "opacity-100 scale-100" | |
| Leaving: "duration-150 ease-in" | |
| From: "opacity-100 scale-100" | |
| To: "opacity-0 scale-95" | |
| --> | |
| <div class="z-30 absolute top-0 right-0 max-w-none w-full p-2 transition transform origin-top"> | |
| <div class="rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 bg-white"> | |
| <div class="flex-shrink-0"> | |
| <!-- Metrics filters - Select timeframe --> | |
| <div class="rounded-t-lg border-t-0 border-b border-gray-100 bg-white pl-3 pr-12 2xl:px-4 py-2.5 h-auto text-md text-gray-500 flex justify-center"> | |
| <button data-testid="dropdown-button" class="group relative w-full pl-2 pr-8 py-2 my-auto text-left cursor-default bg-gray-50 shadow-none border border-transparent text-gray-700 text-md leading-normal font-semibold tracking-wide placeholder-gray-400 hover:bg-blue-100 hover:text-gray-700 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:text-gray-800 focus:ring-1 focus:ring-blue-600 focus:border-blue-400 focus:bg-blue-100 rounded-md" id="headlessui-listbox-button-2" type="button" aria-haspopup="true" aria-labelledby="headlessui-listbox-label-1 headlessui-listbox-button-2"><span class="inline-flex items-center justify-start"> | |
| <span class="transition duration-200 button-ease inline-flex items-center mr-0.5 px-2.5 py-1 rounded-full text-sm font-normal bg-blue-200 text-blue-800 group-hover:bg-blue-500 group-hover:text-white focus:text-blue-700 focus:outline-none"> | |
| <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path> | |
| </svg> | |
| 30d | |
| </span> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="flex-shrink-0 h-6 w-6 mr-2 text-gray-300 hidden"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path> | |
| </svg> | |
| <img src="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" alt="" class="flex-shrink-0 h-6 w-6 rounded-full hidden"> | |
| <span class="mx-1 font-semibold uppercase leading-tight">Aug 22, 2021<span class="ml-1 text-gray-400 font-normal hidden">7:00am</span></span> | |
| <span class="mx-1 font-normal text-gray-600">−</span> | |
| <span class="mx-1 font-semibold uppercase leading-tight">Aug 22, 2021<span class="ml-1 text-gray-400 font-normal hidden">7:00am</span></span> | |
| <span class="flex flex-shrink-0 -space-x-2 overflow-hidden ml-3 mr-1.5 hidden"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworkpyramid"> | |
| <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path> | |
| <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path> | |
| <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path> | |
| <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-node-js" class="bg-white inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworknodejs"> | |
| <path fill="#83cd29" d="M463.6 113.4L276.9 5c-11.8-6.7-27.1-6.7-39 0L49.2 113.4c-12.2 7-20.8 20.1-20.8 34.2v216.5c0 14.1 8.8 27.2 21 34.2l49.9 28.3c23.8 11.7 32.3 11.7 43.1 11.7 35.3 0 55.4-21.3 55.4-58.6V166.1c0-3-1.6-7.5-4.5-7.5h-23.8c-3 0-9.8 4.5-9.8 7.5v213.8c0 16.5-14.9 32.9-42.8 19l-51.5-29.7c-1.8-1-3.1-2.9-3.1-5V147.6c0-2 2.4-4.1 4.2-5.1L254.6 34.3c1.8-1 4.3-1 6.1 0l185.8 108.2c1.8 1.1 1.2 3.1 1.2 5.2v216.5c0 2.1.8 4.1-1 5.1L260 477.5c-1.6 1-3.6 1-5.3 0L206.8 449c-1.4-.8-3.2-1.1-4.5-.4-13.3 7.5-15.8 8.6-28.3 12.9-3.1 1.1-7.6 2.9 1.7 8.2l62.7 37.1c6 3.5 12.8 5.3 19.7 5.3 7 0 13.8-1.8 19.8-5.3l185.8-108.3c12.2-7.1 17.9-20.2 17.9-34.2V147.6c-.1-14-5.8-27.1-18-34.2zM316 329.9c-49.7 0-60.6-13.7-64.2-38.4-.4-2.7-2.7-5.8-5.4-5.8h-24.3c-3 0-5.4 3.6-5.4 6.6 0 31.6 17.2 69.9 99.3 69.9 59.4 0 93.5-23.1 93.5-64 0-40.5-27.4-51.2-85-58.8-58.3-7.7-64.2-11.6-64.2-25.2 0-11.3 5-26.3 48.2-26.3 38.6 0 52.8 8.3 58.6 34.3.5 2.4 2.7 4.2 5.3 4.2h24.4c1.5 0 2.9-.6 4-1.7 1-1.2 1.6-2.6 1.4-4.1-3.8-44.7-33.5-65.6-93.6-65.6-53.5 0-85.4 22.6-85.4 60.4 0 41.1 31.7 52.4 83.1 57.5 61.4 6 66.2 15 66.2 27.1-.1 20.9-17 29.9-56.5 29.9z"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-browser-js" class="bg-white inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworkbrowserjs "> | |
| <path fill="#f0db4f" d="M0 0h512v512H0z"></path> | |
| <path fill="#323330" d="M470.1 389.89c-3.75-23.36-19-43-64.1-61.28-15.67-7.2-33.15-12.35-38.35-24.23-1.85-6.91-2.1-10.81-.93-15 3.36-13.58 19.57-17.81 32.42-13.92 8.27 2.77 16.1 9.15 20.83 19.32 22.09-14.31 22-14.21 37.47-24-5.64-8.76-8.66-12.8-12.36-16.55-13.28-14.84-31.39-22.48-60.35-21.9l-15.08 1.95c-14.46 3.65-28.23 11.24-36.31 21.41-24.24 27.5-17.32 75.63 12.17 95.44 29.05 21.81 71.74 26.77 77.19 47.16 5.3 25-18.35 33.05-41.86 30.18-17.32-3.6-27-12.41-37.38-28.42-19.17 11.09-19.17 11.09-38.88 22.43 4.67 10.22 9.58 14.85 17.42 23.7 37.09 37.62 129.9 35.77 146.54-21.17.68-2.01 5.16-15.01 1.56-35.12zM278.34 235.32h-47.89l-.2 123.81c0 26.33 1.37 50.47-2.92 57.86-7 14.56-25.16 12.75-33.43 9.93-8.42-4.14-12.71-10-17.67-18.34-1.36-2.39-2.38-4.24-2.72-4.38L134.57 428c6.47 13.29 16 24.82 28.23 32.32 18.25 10.95 42.77 14.31 68.43 8.42 16.69-4.87 31.1-14.94 38.64-30.27 10.9-20.1 8.56-44.44 8.47-71.35.24-43.86 0-87.76 0-131.8z"></path> | |
| </svg> | |
| </span></span><span class="group ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400 group-hover:text-gray-600" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> | |
| </svg></span></button> | |
| <button data-testid="dropdown-button" class="group relative w-full pl-2 pr-8 py-2 text-left cursor-default bg-gray-50 shadow-none border border-transparent text-gray-700 text-base leading-5 font-semibold tracking-wide placeholder-gray-400 hover:bg-blue-100 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 focus:border-blue-400 focus:bg-blue-100 rounded-md hidden" id="headlessui-listbox-button-2" type="button" aria-haspopup="true" aria-labelledby="headlessui-listbox-label-1 headlessui-listbox-button-2"><span class="flex items-center justify-start"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="flex-shrink-0 h-6 w-6 mr-2 text-gray-300"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path> | |
| </svg> | |
| <img src="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" alt="" class="flex-shrink-0 h-6 w-6 rounded-full hidden"> | |
| <span class="block truncate">Last 30 days</span><span class="flex flex-shrink-0 -space-x-2 overflow-hidden ml-3 mr-1.5 hidden"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworkpyramid"> | |
| <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path> | |
| <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path> | |
| <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path> | |
| <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-node-js" class="bg-white inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworknodejs"> | |
| <path fill="#83cd29" d="M463.6 113.4L276.9 5c-11.8-6.7-27.1-6.7-39 0L49.2 113.4c-12.2 7-20.8 20.1-20.8 34.2v216.5c0 14.1 8.8 27.2 21 34.2l49.9 28.3c23.8 11.7 32.3 11.7 43.1 11.7 35.3 0 55.4-21.3 55.4-58.6V166.1c0-3-1.6-7.5-4.5-7.5h-23.8c-3 0-9.8 4.5-9.8 7.5v213.8c0 16.5-14.9 32.9-42.8 19l-51.5-29.7c-1.8-1-3.1-2.9-3.1-5V147.6c0-2 2.4-4.1 4.2-5.1L254.6 34.3c1.8-1 4.3-1 6.1 0l185.8 108.2c1.8 1.1 1.2 3.1 1.2 5.2v216.5c0 2.1.8 4.1-1 5.1L260 477.5c-1.6 1-3.6 1-5.3 0L206.8 449c-1.4-.8-3.2-1.1-4.5-.4-13.3 7.5-15.8 8.6-28.3 12.9-3.1 1.1-7.6 2.9 1.7 8.2l62.7 37.1c6 3.5 12.8 5.3 19.7 5.3 7 0 13.8-1.8 19.8-5.3l185.8-108.3c12.2-7.1 17.9-20.2 17.9-34.2V147.6c-.1-14-5.8-27.1-18-34.2zM316 329.9c-49.7 0-60.6-13.7-64.2-38.4-.4-2.7-2.7-5.8-5.4-5.8h-24.3c-3 0-5.4 3.6-5.4 6.6 0 31.6 17.2 69.9 99.3 69.9 59.4 0 93.5-23.1 93.5-64 0-40.5-27.4-51.2-85-58.8-58.3-7.7-64.2-11.6-64.2-25.2 0-11.3 5-26.3 48.2-26.3 38.6 0 52.8 8.3 58.6 34.3.5 2.4 2.7 4.2 5.3 4.2h24.4c1.5 0 2.9-.6 4-1.7 1-1.2 1.6-2.6 1.4-4.1-3.8-44.7-33.5-65.6-93.6-65.6-53.5 0-85.4 22.6-85.4 60.4 0 41.1 31.7 52.4 83.1 57.5 61.4 6 66.2 15 66.2 27.1-.1 20.9-17 29.9-56.5 29.9z"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-browser-js" class="bg-white inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworkbrowserjs "> | |
| <path fill="#f0db4f" d="M0 0h512v512H0z"></path> | |
| <path fill="#323330" d="M470.1 389.89c-3.75-23.36-19-43-64.1-61.28-15.67-7.2-33.15-12.35-38.35-24.23-1.85-6.91-2.1-10.81-.93-15 3.36-13.58 19.57-17.81 32.42-13.92 8.27 2.77 16.1 9.15 20.83 19.32 22.09-14.31 22-14.21 37.47-24-5.64-8.76-8.66-12.8-12.36-16.55-13.28-14.84-31.39-22.48-60.35-21.9l-15.08 1.95c-14.46 3.65-28.23 11.24-36.31 21.41-24.24 27.5-17.32 75.63 12.17 95.44 29.05 21.81 71.74 26.77 77.19 47.16 5.3 25-18.35 33.05-41.86 30.18-17.32-3.6-27-12.41-37.38-28.42-19.17 11.09-19.17 11.09-38.88 22.43 4.67 10.22 9.58 14.85 17.42 23.7 37.09 37.62 129.9 35.77 146.54-21.17.68-2.01 5.16-15.01 1.56-35.12zM278.34 235.32h-47.89l-.2 123.81c0 26.33 1.37 50.47-2.92 57.86-7 14.56-25.16 12.75-33.43 9.93-8.42-4.14-12.71-10-17.67-18.34-1.36-2.39-2.38-4.24-2.72-4.38L134.57 428c6.47 13.29 16 24.82 28.23 32.32 18.25 10.95 42.77 14.31 68.43 8.42 16.69-4.87 31.1-14.94 38.64-30.27 10.9-20.1 8.56-44.44 8.47-71.35.24-43.86 0-87.76 0-131.8z"></path> | |
| </svg> | |
| </span></span><span class="group ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400 group-hover:text-gray-600" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> | |
| </svg></span></button></div> | |
| </div> | |
| <div class="flex pt-2 pb-1"> | |
| <div class="flex items-start justify-start mr-0 order-last"> | |
| <div class="-mr-2 absolute inset-y-4 right-6 lg:static lg:flex-shrink-0"> | |
| <button type="button" class="bg-white rounded-lg p-1.5 inline-flex items-center justify-center text-gray-400 hover:text-gray-700 hover:bg-transparent focus:outline-none focus:text-gray-600"> | |
| <span class="sr-only">Close menu</span> | |
| <!-- Heroicon name: outline/x --> | |
| <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <ul role="list" class="w-full py-3 border-b-0 border-gray-100 divide-y divide-blue-100"> | |
| <li class="relative bg-white pb-3 px-6 space-y-3 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="group flex justify-between focus:outline-none"> | |
| <div class="flex space-x-1"> | |
| <svg class="-ml-1 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> | |
| </svg> | |
| <span class="text-sm uppercase font-semibold tracking-widest text-gray-700 pb-1 border-b border-blue-100 group-hover:text-blue-800">Projects</span> | |
| </div> | |
| <div class="group flex space-x-2 items-end focus:outline-none"> | |
| <span class="inline-flex items-center px-2.5 py-1 rounded-full text-sm font-medium tracking-wide bg-blue-100 text-blue-800"> | |
| <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path> | |
| </svg> | |
| 5 | |
| </span><button type="button" class="h-7 w-7 justify-center inline-flex transition duration-300 button-ease items-center px-0.5 py-0.5 border border-transparent text-sm font-medium rounded-full tracking-wide text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-800 focus:border-blue-700"> | |
| <svg class="h-5 w-5 text-blue-50" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="w-full"> | |
| <div class="mt-1 relative flex rounded-md shadow-none"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path> | |
| </svg></div><input id="project-search" type="search" class="block w-full shadow-none border border-gray-200 text-gray-900 text-md leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md pl-10" data-testid="project-search" placeholder="Search"> | |
| </div> | |
| <p class="mt-2 text-sm text-red-600 invisible hidden" id="project-search-error">&nbsp</p> | |
| </div> | |
| <div class="flex"> | |
| <div class="-mb-2.5 min-w-0 flex-1"> | |
| <div class="block focus:outline-none"> | |
| <span class="hidden absolute inset-0" aria-hidden="true"></span> | |
| <div class="flex justify-between items-center"> | |
| <div class="inline-flex items-center space-x-1"><a class="text-sm font-semibold text-blue-600 hover:text-blue-800 focus:outline-none focus:text-blue-800" href="https://rollbar.com/Rollbar/api-monitoring/settings/general">Select All</a><span class="text-sm tracking-widest text-gray-200">⎥ | |
| </span><a class="text-sm font-semibold text-blue-600 hover:text-blue-800 focus:outline-none focus:text-blue-800" href="https://rollbar.com/Rollbar/api-monitoring/settings/general">Clear All</a></div> | |
| </div> | |
| </div> | |
| </div> | |
| <time datetime="2021-01-27T16:35" class="hidden flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time> | |
| </div> | |
| <div class="w-full"> | |
| <fieldset class="space-y-0.5 border-0"> | |
| <legend class="sr-only">Projects</legend> | |
| <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="project-mox-m" aria-describedby="project-mox" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-md"> | |
| <label for="project-mox-m" class="font-medium text-gray-700">mox</label> | |
| <span id="project-description" class="text-gray-400 text-xs hidden"><span class="sr-only">mox</span>Python, Javascript</span> | |
| </div> | |
| </div> | |
| <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="project-mox-max-m" aria-describedby="project-mox-web" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-md"> | |
| <label for="project-mox-max-m" class="font-medium text-gray-700">mox-max</label> | |
| <span id="project-description" class="text-gray-400 text-xs hidden"><span class="sr-only">mox</span>Languages</span> | |
| </div> | |
| </div> | |
| <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="project-mox-web-m" aria-describedby="project-mox-web" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-md"> | |
| <label for="project-mox-web-m" class="font-medium text-gray-700">mox-web</label> | |
| <span id="project-description" class="text-gray-400 text-xs hidden"><span class="sr-only">mox</span>Languages</span> | |
| </div> | |
| </div> | |
| <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="project-mox-workers-m" aria-describedby="project-mox-workers" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-md"> | |
| <label for="project-mox-workers-m" class="font-medium text-gray-700">mox-workers</label> | |
| <span id="project-description" class="text-gray-400 text-xs hidden"><span class="sr-only">mox</span>Languages</span> | |
| </div> | |
| </div> | |
| <div class="relative flex items-start pl-1 py-1 hover:bg-white hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md hidden"> | |
| <div class="flex items-center h-5"> | |
| <svg class="h-4 w-4 text-gray-300 self-center" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="currentColor" aria-hidden="true"> | |
| <g xmlns="http://www.w3.org/2000/svg"> | |
| <g xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" i:extraneous="self"> | |
| <g> | |
| <path d="M44.3,66.9c-1.5-0.2-3-0.9-4.1-2l-0.8-0.8c-2.7-2.7-2.7-7-0.2-9.8L36,51.1L23.9,63.1c-5.7-1.3-11.9,0.2-16.3,4.6 c-5.1,5.1-6.4,12.5-3.9,18.8l8.7-8.7c2.7-2.7,7.1-2.7,9.7,0c2.7,2.7,2.7,7.1,0,9.7l-8.7,8.7c6.3,2.5,13.7,1.2,18.8-3.9 c4.4-4.4,6-10.6,4.6-16.3l7.7-7.7C44.5,67.9,44.3,67.4,44.3,66.9z"></path> | |
| <path d="M51.7,41.8c1.3-1.2,3-1.9,4.8-1.9c1.9,0,3.7,0.7,5,2.1l0.8,0.8c1.1,1.1,1.8,2.5,2,4.1c0.5,0.1,1,0.2,1.5,0.4l10.4-10.4 c1.3,0.3,2.7,0.5,4,0.5c4.5,0,8.9-1.7,12.3-5.1c5.1-5.1,6.4-12.5,3.9-18.8l-8.7,8.7c-2.7,2.7-7.1,2.7-9.7,0 c-2.7-2.7-2.7-7.1,0-9.7l8.7-8.7c-6.3-2.5-13.7-1.2-18.8,3.9c-4.4,4.4-6,10.6-4.6,16.3L48.4,38.6L51.7,41.8z"></path> | |
| <path d="M65.4,51.8c-1.1-1.1-3-1.1-4.1,0L61.1,52l-2-2l0.2-0.2c1.1-1.1,1.1-3,0-4.1l-0.8-0.8c-1.1-1.1-3-1.1-4.1,0l-2.7,2.7 L27.5,23.5l4.3-3.7l0.9,0.9c0.6,0.6,1.5,0.6,2.1,0l5.3-5.3c0.6-0.6,0.6-1.5,0-2.1L29.6,2.9c-0.6-0.6-1.5-0.6-2.1,0l-5.3,5.3 c-0.6,0.6-0.6,1.5,0,2.1l0.8,0.8c0,0-11.3,11.3-11.7,11.7c-5.3,5.3-5,15.8-2.1,20.4c0.8,1.3,2.7,0.7,2.8-0.8 c0.3-6,4.5-9.7,8.2-12.8L45,54.3L42.3,57c-1.1,1.1-1.1,3,0,4.1l0.8,0.8c1.1,1.1,3,1.1,4.1,0l0.2-0.2l2,2l-0.2,0.2 c-1.1,1.1-1.1,3,0,4.1l28.6,28.6c1.1,1.1,3,1.1,4.1,0L94,84.6c1.1-1.1,1.1-3,0-4.1L65.4,51.8z M78.9,87.3c-0.6,0.6-1.6,0.6-2.2,0 L58.6,69.1c-0.6-0.6-0.6-1.6,0-2.2c0.6-0.6,1.6-0.6,2.2,0l18.1,18.1C79.5,85.7,79.5,86.7,78.9,87.3z M84.6,81.5 c-0.6,0.6-1.6,0.6-2.2,0L64.3,63.4c-0.6-0.6-0.6-1.6,0-2.2c0.6-0.6,1.6-0.6,2.2,0l18.1,18.1C85.2,79.9,85.2,80.9,84.6,81.5z"></path> | |
| </g> | |
| </g> | |
| </g> | |
| </svg> | |
| <input id="project-atsuko-test" aria-describedby="project-mox-workers" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded hidden"> | |
| </div> | |
| <div class="flex w-full ml-3 text-md items-center justify-between"> | |
| <label for="project-atsuko-test" class="font-medium text-gray-400">atsuko-test</label> | |
| <a href="#" id="project-setup" class="font-semibold tracking-wide text-orange-600 text-sm hover:text-orange-800 focus:text-orange-800 focus:outline-none"><span class="sr-only">atsuko-test</span>Set Up</a> | |
| </div> | |
| </div> | |
| <div class="group relative flex items-start pl-1 py-1 hover:bg-white hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <svg class="h-4 w-4 text-gray-300 self-center" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="currentColor" aria-hidden="true"> | |
| <g xmlns="http://www.w3.org/2000/svg"><g xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" i:extraneous="self"><g><path d="M3.4,78c-1.2,1.1-1.2,3,0,4.2l10.7,10.7c1.1,1.1,3,1.1,4.2,0l28.3-28.3L31.7,49.7L3.4,78z"></path><path d="M97.1,26.6l-5.3-5.3c-0.6-0.6-1.5-0.6-2.1,0l-0.8,0.8c0,0-11.3-11.3-11.7-11.7c-5.3-5.3-15.9-5-20.6-2.1 c-1.3,0.8-0.7,2.8,0.8,2.8c6.1,0.3,9.8,4.6,12.9,8.3L53.6,36l6.7,6.7l16.1-16.1l3.8,4.3l-0.9,0.9c-0.6,0.6-0.6,1.5,0,2.1l5.3,5.3 c0.6,0.6,1.5,0.6,2.1,0l10.4-10.4C97.6,28.2,97.6,27.2,97.1,26.6z"></path><path d="M74.3,62.3L37.5,25.5c1.3-5.3-0.2-11.1-4.3-15.3c-4.8-4.8-11.7-6-17.6-3.6l8.2,8.2c2.5,2.5,2.5,6.6,0,9.1 c-2.5,2.5-6.6,2.5-9.1,0l-8.2-8.2C4.1,21.6,5.3,28.6,10,33.3c4.2,4.2,10,5.6,15.3,4.3c0,0,0,0,0,0l36.8,36.8c0,0,0,0,0,0 c-1.3,5.3,0.2,11.2,4.3,15.3c4.8,4.8,11.7,6,17.6,3.6l-8.2-8.2c-2.5-2.5-2.5-6.6,0-9.1c2.5-2.5,6.6-2.5,9.1,0l8.2,8.2 c2.3-5.9,1.1-12.9-3.6-17.6C85.5,62.5,79.6,61,74.3,62.3z"></path></g></g></g> | |
| </svg> | |
| </div> | |
| <div class="flex w-full ml-3 text-md items-center justify-between"> | |
| <label for="project-atsuko-test" class="font-medium text-gray-400">atsuko-test</label> | |
| <a href="#" id="project-setup" class="font-semibold tracking-wide text-orange-600 text-sm hover:text-orange-800 focus:text-orange-800 focus:outline-none"><span class="sr-only">atsuko-test</span>Set Up</a> | |
| </div> | |
| </div> | |
| <div class="group relative flex items-start pl-1 py-1 hover:bg-white hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 rounded-md hidden"> | |
| <div class="flex items-center h-5"> | |
| <span class="mt-0.5 h-5 w-5 bg-orange-100 rounded-full flex items-center justify-center" aria-hidden="true"> | |
| <span class="h-2.5 w-2.5 bg-orange-500 rounded-full"></span> | |
| </span> | |
| <input id="project-atsuko-test" aria-describedby="project-atsuko-test" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded hidden"> | |
| </div> | |
| <div class="flex w-full ml-2 text-md items-center justify-between"> | |
| <label for="project-atsuko-test" class="font-medium text-gray-400">atsuko-test-2</label> | |
| <a href="#" id="project-setup" class="font-semibold tracking-wide text-orange-600 text-sm hover:text-orange-800 focus:text-orange-800 focus:outline-none"><span class="sr-only">atsuko-test</span>Set Up</a> | |
| </div> | |
| </div></fieldset> | |
| </div> | |
| <div class="w-full text-md font-semibold text-blue-600"> | |
| <a class="flex block justify-center hover:text-blue-800 focus:outline-none focus:text-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="General" title="General">Show All <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mt-0 ml-0.5 self-center" fill="currentColor" viewBox="0 0 100 100"> | |
| <path xmlns="http://www.w3.org/2000/svg" d="M62.3,62.6l-8.6,8.6V29.3l8.6,8.6c1.4,1.5,3.8,1.6,5.3,0.2c1.5-1.4,1.6-3.8,0.2-5.3c-0.1-0.1-0.1-0.1-0.2-0.2l-15-15 c-1.5-1.5-3.8-1.5-5.3,0l-15,15c-1.4,1.5-1.3,3.9,0.2,5.3c1.4,1.3,3.7,1.3,5.1,0l8.6-8.6v41.9l-8.6-8.6c-1.4-1.5-3.8-1.6-5.3-0.2 c-1.5,1.4-1.6,3.8-0.2,5.3c0.1,0.1,0.1,0.1,0.2,0.2l15,15c1.5,1.5,3.8,1.5,5.3,0l15-15c1.5-1.4,1.6-3.8,0.2-5.3 c-1.4-1.5-3.8-1.6-5.3-0.2C62.5,62.5,62.4,62.5,62.3,62.6z"></path> | |
| </svg></a> | |
| </div> | |
| </li> | |
| <li class="relative bg-white py-3 px-6 space-y-3 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="group flex justify-between focus:outline-none"> | |
| <div class="flex space-x-1"> | |
| <svg class="-ml-1 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> | |
| </svg> | |
| <span class="text-sm uppercase font-semibold tracking-widest text-gray-700 pb-1 border-b border-blue-100 group-hover:text-blue-800">Environments</span> | |
| </div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-sm font-medium tracking-wide bg-blue-100 text-blue-800"> | |
| <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path> | |
| </svg> | |
| 2 | |
| </span> | |
| </div> | |
| <div class="w-full"> | |
| <div class="mt-1 relative flex rounded-md shadow-none"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path> | |
| </svg></div><input id="project-search" type="search" class="block w-full shadow-none border border-gray-200 text-gray-900 text-md leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md pl-10" data-testid="project-search" placeholder="Search"> | |
| </div> | |
| <p class="mt-2 text-sm text-red-600 invisible hidden" id="project-search-error">&nbsp</p> | |
| </div> | |
| <div class="w-full"> | |
| <fieldset class="space-y-0.5 border-0"> | |
| <legend class="sr-only">Projects</legend> | |
| <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="env-at-product-demo-m" aria-describedby="project-mox" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-md"> | |
| <label for="env-at-product-demo-m" class="font-medium text-gray-700">at-product-demo</label> | |
| </div> | |
| </div> | |
| <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="env-development-m" aria-describedby="project-mox-web" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-md"> | |
| <label for="env-development-m" class="font-medium text-gray-700">development</label> | |
| </div> | |
| </div> | |
| <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="env-production-m" aria-describedby="project-mox-web" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-md"> | |
| <label for="env-production-m" class="font-medium text-gray-700">production</label> | |
| </div> | |
| </div> | |
| <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="env-staging-m" aria-describedby="project-mox-workers" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-md"> | |
| <label for="env-staging-m" class="font-medium text-gray-700">staging</label> | |
| </div> | |
| </div> | |
| </fieldset> | |
| </div> | |
| <div class="w-full text-sm font-normal text-blue-600 hidden"> | |
| <a class="-mt-3 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="General" title="General">Show all...</a> | |
| </div> | |
| </li> | |
| <li class="relative bg-white py-3 px-6 space-y-3 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="group flex justify-between focus:outline-none"> | |
| <div class="flex space-x-1"> | |
| <svg class="-ml-1 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> | |
| </svg> | |
| <span class="text-sm uppercase font-semibold tracking-widest text-gray-700 pb-1 border-b border-blue-100 group-hover:text-blue-800">Severity</span> | |
| </div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-sm font-medium tracking-wide bg-blue-100 text-blue-800"> | |
| <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path> | |
| </svg> | |
| 3 | |
| </span> | |
| </div> | |
| <div class="w-full hidden"> | |
| <div class="mt-1 relative flex rounded-md shadow-none"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path> | |
| </svg></div><input id="project-search" type="search" class="block w-full shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md pl-10" data-testid="project-search" placeholder="Search"> | |
| </div> | |
| <p class="mt-2 text-sm text-red-600 invisible hidden" id="project-search-error">&nbsp</p> | |
| </div> | |
| <div class="w-full hidden"> | |
| <fieldset class="space-y-0.5 border-0"> | |
| <legend class="sr-only">Projects</legend> | |
| <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="env-" aria-describedby="project-mox" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="env-" class="font-medium text-gray-700">at-product-demo</label> | |
| </div> | |
| </div> | |
| <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="env-developmen" aria-describedby="project-mox-web" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="env-developmen" class="font-medium text-gray-700">development</label> | |
| </div> | |
| </div> | |
| <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="env-productio" aria-describedby="project-mox-web" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="env-productio" class="font-medium text-gray-700">production</label> | |
| </div> | |
| </div> | |
| <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="env-stagin" aria-describedby="project-mox-workers" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="env-stagin" class="font-medium text-gray-700">staging</label> | |
| </div> | |
| </div> | |
| </fieldset> | |
| </div> | |
| <div class="w-full text-sm font-normal text-blue-600 hidden"> | |
| <a class="-mt-3 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="General" title="General">Show all...</a> | |
| </div> | |
| </li> | |
| <li class="relative bg-white py-3 px-6 space-y-3 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="group flex justify-between focus:outline-none"> | |
| <div class="flex space-x-1"> | |
| <svg class="-ml-1 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> | |
| </svg> | |
| <span class="text-sm uppercase font-semibold tracking-widest text-gray-700 pb-1 border-b border-blue-100 group-hover:text-blue-800">Frameworks</span> | |
| </div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-sm font-medium tracking-wide bg-blue-100 text-blue-800"> | |
| <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path> | |
| </svg>All</span> | |
| </div> | |
| <div class="w-full hidden"> | |
| <div class="mt-1 relative flex rounded-md shadow-none"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path> | |
| </svg></div><input id="project-search" type="search" class="block w-full shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md pl-10" data-testid="project-search" placeholder="Search"> | |
| </div> | |
| <p class="mt-2 text-sm text-red-600 invisible hidden" id="project-search-error">&nbsp</p> | |
| </div> | |
| <div class="w-full hidden"> | |
| <fieldset class="space-y-0.5 border-0"> | |
| <legend class="sr-only">Projects</legend> | |
| <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="env-at-product-dem" aria-describedby="project-mox" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="env-at-product-dem" class="font-medium text-gray-700">at-product-demo</label> | |
| </div> | |
| </div> | |
| <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="env-developmen" aria-describedby="project-mox-web" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="env-developmen" class="font-medium text-gray-700">development</label> | |
| </div> | |
| </div> | |
| <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="env-productio" aria-describedby="project-mox-web" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="env-productio" class="font-medium text-gray-700">production</label> | |
| </div> | |
| </div> | |
| <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="env-stagin" aria-describedby="project-mox-workers" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="env-stagin" class="font-medium text-gray-700">staging</label> | |
| </div> | |
| </div> | |
| </fieldset> | |
| </div> | |
| <div class="w-full text-sm font-normal text-blue-600 hidden"> | |
| <a class="-mt-3 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="General" title="General">Show all...</a> | |
| </div> | |
| </li> | |
| </ul> | |
| <ul role="list" class="w-full border-b-0 border-gray-100 divide-y divide-blue-50 py-3 hidden"> | |
| <li class="relative pb-4 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="flex justify-between space-x-3 pl-5"> | |
| <div class="min-w-0 flex-1"> | |
| <div class="block focus:outline-none"> | |
| <span class="hidden absolute inset-0" aria-hidden="true"></span> | |
| <div class="flex space-x-2"> | |
| <svg class="flex-shrink-0 h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path> | |
| </svg> | |
| <span class="text-sm uppercase font-semibold tracking-widest text-gray-500 pb-1 border-b-0 border-blue-100"> | |
| Project | |
| </span> | |
| </div> | |
| <p class="hidden text-xs uppercase font-semibold tracking-widest text-blue-600 pb-1">Project</p> | |
| <p class="hidden text-sm text-gray-500 truncate">Velit placeat sit ducimus non sed</p> | |
| </div> | |
| </div> | |
| <time datetime="2021-01-27T16:35" class="hidden flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time> | |
| </div> | |
| <div class="flex mt-1 grid space-y-0.5 text-base font-normal text-gray-800"> | |
| <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="General" title="General">General</a> | |
| <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="Integrations" title="Integrations">Integrations</a> | |
| <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="Collaborators" title="Collaborators">Collaborators</a> | |
| </div> | |
| </li> | |
| <li class="relative bg-white py-4 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="flex justify-between space-x-3 pl-5"> | |
| <div class="min-w-0 flex-1"> | |
| <div class="block focus:outline-none"> | |
| <span class="hidden absolute inset-0" aria-hidden="true"></span> | |
| <div class="flex space-x-2"> | |
| <svg class="flex-shrink-0 h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> | |
| </svg> | |
| <span class="text-sm uppercase font-semibold tracking-widest text-gray-500 pb-1 border-b-0 border-blue-100">Symbol Mapping</span> | |
| </div> | |
| <p class="hidden text-xs uppercase font-semibold tracking-widest text-blue-600 pb-1">Symbol Mapping</p> | |
| <p class="hidden text-sm text-gray-500 truncate">Velit placeat sit ducimus non sed</p> | |
| </div> | |
| </div> | |
| <time datetime="2021-01-27T16:35" class="hidden flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time> | |
| </div> | |
| <div class="flex mt-1 grid space-y-0.5 text-base font-normal text-gray-800"> | |
| <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="Source Maps" title="Source Maps">Source Maps</a> | |
| <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="dSYMs" title="dSYMs">dSYMs</a> | |
| <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="ProGuard" title="ProGuard">ProGuard</a> | |
| </div> | |
| </li> | |
| <li class="relative bg-white pt-4 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="flex justify-between space-x-3 pl-5"> | |
| <div class="min-w-0 flex-1"> | |
| <div class="block focus:outline-none"> | |
| <span class="hidden absolute inset-0" aria-hidden="true"></span> | |
| <div class="flex space-x-2"> | |
| <svg class="flex-shrink-0 h-5 w-5 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path> | |
| </svg> | |
| <span class="text-sm uppercase font-semibold tracking-widest text-gray-500 pb-1 border-b-0 border-blue-100">Advanced</span> | |
| </div> | |
| <p class="hidden text-sm uppercase font-semibold tracking-widest text-blue-600 pb-1">Advanced</p> | |
| <p class="hidden text-sm text-gray-500 truncate">Velit placeat sit ducimus non sed</p> | |
| </div> | |
| </div> | |
| <time datetime="2021-01-27T16:35" class="hidden flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time> | |
| </div> | |
| <div class="flex mt-1.5 grid space-y-0.5 text-base font-normal text-gray-800"> | |
| <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="Custom Grouping" title="Custom Grouping">Custom Grouping</a> | |
| <a class="pl-5 py-1.5 -mr-4 border-l-2 border-transparent hover:bg-blue-100 hover:border-b-2 hover:border-blue-500 hover:text-blue-600 focus:outline-none focus:text-blue-800 focus:border-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="IP Blocklist" title="IP Blocklist">IP Blocklist</a> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ellipsis popup menu ---> | |
| <div class="flex self-start items-center mt-3 sm:flex-shrink-0 hidden"> | |
| <span class="hidden inline-flex items-center ml-6 px-3 py-0.5 rounded-full text-sm font-medium bg-green-100 text-green-800"> | |
| Active | |
| </span> | |
| <div class="ml-3 relative inline-block text-left"> | |
| <div> | |
| <button type="button" class="transition duration-300 button-ease -my-2 p-2 rounded-full bg-transparent flex items-center border border-transparent text-gray-400 hover:text-gray-600 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400" id="menu-3-button" aria-expanded="false" aria-haspopup="true"> | |
| <span class="sr-only">Open options</span> | |
| <!-- Heroicon name: solid/dots-vertical --> | |
| <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| <!-- | |
| Dropdown menu, show/hide based on menu state. | |
| Entering: "transition ease-out duration-100" | |
| From: "transform opacity-0 scale-95" | |
| To: "transform opacity-100 scale-100" | |
| Leaving: "transition ease-in duration-75" | |
| From: "transform opacity-100 scale-100" | |
| To: "transform opacity-0 scale-95" | |
| --> | |
| <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none hidden" role="menu" aria-orientation="vertical" aria-labelledby="menu-3-button" tabindex="-1"> | |
| <div class="py-1" role="none"> | |
| <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" --> | |
| <button type="button" class="text-gray-700 w-full flex justify-between px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-3-item-0"> | |
| <span>Re-authorize Rollbot</span> | |
| </button> | |
| <a href="#" class="text-gray-700 flex justify-between px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-3-item-1"> | |
| <span>View events usage</span> | |
| </a> | |
| <a href="#" class="text-gray-700 flex justify-between px-4 py-2 text-sm" role="menuitem" tabindex="-1" id="menu-3-item-2"> | |
| <span>Manage billing</span> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!--- Layout: Main starts ---><main class="flex-1 sm:overflow-y-auto focus:outline-none lg:flex border-t-0 border-gray-200"> | |
| <!--- Layout: Page content ---><section aria-labelledby="page-content" class="min-w-0 flex-1 lg:h-full flex flex-col overflow-y-auto lg:overflow-hidden lg:order-last"> | |
| <!-- Responsive: Back navigation / breadcrumb --><nav class="flex items-start px-4 pt-2.5 sm:px-6 lg:px-8 /*xl:hidden*/ md:hidden order-first" aria-label="Breadcrumb"> | |
| <a href="#" class="group inline-flex items-center space-x-1 text-sm font-medium text-gray-500 hover:text-blue-600"> | |
| <svg class="-ml-2 h-5 w-5 text-gray-400 group-hover:text-gray-600" x-description="Heroicon name: solid/chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path> | |
| </svg> | |
| <span class="-mt-0.5">Back to Parent-Page</span> | |
| </a> | |
| </nav><!-- Page-content: Fixed header --><div class="flex-shrink-0 bg-transparent border-b-0 border-gray-100"> | |
| <div class="flex flex-col justify-center max-w-screen-2xl mx-auto"> | |
| <div class="pt-4 pb-3 px-4 sm:px-6 lg:px-8 space-y-4"> | |
| <!-- Heading + Subtext --><div class="space-y-0.5"><h2 id="page-heading" class="text-xl leading-7 font-normal text-gray-900 capitalize">Overview</h2><p class="text-sm text-gray-500">Manage your subscription and preferences here.</p></div><!-- Tabbed menu bar --><div class="w-auto /*hidden*/" style=" | |
| "> | |
| <div class="flex justify-start sm:justify-between"> | |
| <!-- Tabbed menu --> | |
| <div class="flex-1 sm:flex" style=" | |
| "> | |
| <div class="sm:hidden"> | |
| <label for="tabs" class="sr-only">Select a tab</label> | |
| <!-- Use an "onChange" listener to redirect the user to the selected tab URL. --> | |
| <select id="tabs" name="tabs" class="block w-full border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 focus:ring-blue-600 focus:border-blue-400 rounded-md"> | |
| <option selected="">My Plan</option> | |
| <option>Billing Info</option> | |
| <option>Usage</option> | |
| <option>Invoices</option> | |
| </select> | |
| </div> | |
| <div class="hidden sm:block"> | |
| <nav class="relative z-0 rounded-lg shadow flex divide-x divide-gray-200" aria-label="Tabs"> | |
| <a href="#" class="transition duration-300 button-ease text-gray-700 rounded-l-lg group relative min-w-0 flex-initial overflow-hidden bg-white pt-2 pb-2.5 px-5 xl:px-8 text-sm font-semibold leading-5 text-center hover:bg-blue-100 hover:text-blue-700 focus:z-10 focus:text-blue-800 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:bg-blue-50" x-state:on="Current" x-state:off="Default" aria-current="page" x-state-description="Current: "text-gray-900", Default: "text-gray-500 hover:text-gray-700""> | |
| <span>My Plan</span> | |
| <span aria-hidden="true" class="bg-blue-600 absolute inset-x-0 bottom-0 h-0.5"></span> | |
| </a> | |
| <a href="#" class="transition duration-300 button-ease text-gray-700 group relative min-w-0 flex-initial overflow-hidden bg-white pt-2 pb-2.5 px-5 xl:px-8 text-sm font-semibold leading-5 text-center hover:bg-blue-100 hover:text-blue-700 focus:z-10 focus:text-blue-800 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:bg-blue-50" x-state-description="undefined: "text-gray-900", undefined: "text-gray-500 hover:text-gray-700""> | |
| <span>Billing Info</span> | |
| <span aria-hidden="true" class="bg-transparent absolute inset-x-0 bottom-0 h-0.5"></span> | |
| </a> | |
| <a href="#" class="transition duration-300 button-ease text-gray-700 group relative min-w-0 flex-initial overflow-hidden bg-white pt-2 pb-2.5 px-5 xl:px-8 text-sm font-semibold leading-5 text-center hover:bg-blue-100 hover:text-blue-700 focus:z-10 focus:text-blue-800 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:bg-blue-50" x-state-description="undefined: "text-gray-900", undefined: "text-gray-500 hover:text-gray-700""> | |
| <span>Usage</span> | |
| <span aria-hidden="true" class="bg-transparent absolute inset-x-0 bottom-0 h-0.5"></span> | |
| </a> | |
| <a href="#" class="transition duration-300 button-ease text-gray-700 group relative min-w-0 flex-initial overflow-hidden bg-white pt-2 pb-2.5 px-5 xl:px-8 text-sm font-semibold leading-5 text-center hover:bg-blue-100 hover:text-blue-700 focus:z-10 focus:text-blue-800 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:bg-blue-50" x-state-description="undefined: "text-gray-900", undefined: "text-gray-500 hover:text-gray-700""> | |
| <span>Another Pagename</span> | |
| <span aria-hidden="true" class="bg-transparent absolute inset-x-0 bottom-0 h-0.5"></span> | |
| </a><a href="#" class="transition duration-300 button-ease text-gray-700 rounded-r-lg group relative min-w-0 flex-initial overflow-hidden bg-white pt-2 pb-2.5 px-5 xl:px-8 text-sm font-semibold leading-5 text-center hover:bg-blue-100 hover:text-blue-700 focus:z-10 focus:text-blue-800 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:bg-blue-50" x-state-description="undefined: "text-gray-900", undefined: "text-gray-500 hover:text-gray-700""> | |
| <span>Billing</span> | |
| <span aria-hidden="true" class="bg-transparent absolute inset-x-0 bottom-0 h-0.5"></span> | |
| </a> | |
| </nav> | |
| </div> | |
| </div> | |
| <!-- Not in use: Previous, Next buttons --><nav aria-label="Pagination" style=" | |
| display: none; | |
| "> | |
| <span class="relative ml-3 z-0 inline-flex shadow-none rounded-full"> | |
| <a href="#" class="group relative transition duration-300 button-ease inline-flex items-center px-2.5 py-2 rounded-l-full border border-gray-300 bg-transparent text-sm font-medium text-gray-600 hover:border-gray-400 hover:text-gray-800 hover:bg-transparent focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400"> | |
| <span class="sr-only">Next</span> | |
| <!-- Heroicon name: solid/chevron-up --> | |
| <svg class="-mr-0.5 h-5 w-5 text-gray-400 group-hover:text-gray-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path> | |
| </svg> | |
| </a> | |
| <a href="#" class="group -ml-px relative transition duration-300 button-ease inline-flex items-center px-2.5 py-2 rounded-r-full border border-gray-300 bg-transparent text-sm font-medium text-gray-600 hover:border-gray-400 hover:text-gray-800 hover:bg-transparent focus:z-10 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400"> | |
| <span class="sr-only">Previous</span> | |
| <!-- Heroicon name: solid/chevron-down --> | |
| <svg class="-ml-0.5 h-5 w-5 text-gray-400 group-hover:text-gray-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> | |
| </svg> | |
| </a> | |
| </span> | |
| </nav> | |
| </div> | |
| </div> | |
| </div></div> | |
| </div> | |
| <!--- Pafe conttent: Fixed filters ---> | |
| <div class="px-4 pt-4 pb-2 sm:px-6 lg:px-8 grid grid-cols-1 md:grid-cols-8 2xl:grid-cols-12 lg:grid-rows-none flex items-end justify-start gap-x-4 gap-y-1.5 md:gap-y-2.5 w-full z-10" style=" | |
| display: none; | |
| "> | |
| <div class="col-span-full md:col-span-full 2xl:col-span-4 flex flex-col"> | |
| <div class="flex flex-col justify-start items-start"><label for="project-search" class="block text-sm font-medium text-gray-700 leading-5 sr-only">Search</label> | |
| <div class="block w-full sm:col-span-2"> | |
| <div class="mt-1 relative flex rounded-md shadow-none"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path> | |
| </svg></div><input id="project-search" type="search" class="block w-full shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md pl-10" data-testid="project-search" placeholder="Search"> | |
| </div> | |
| <p class="mt-2 text-sm text-red-600 invisible hidden" id="project-search-error">&nbsp</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-span-full md:col-span-2 2xl:col-span-2 flex flex-col" data-testid="project-status-dropdown"> | |
| <div><label class="text-xs leading-4 font-semibold tracking-wider uppercase text-gray-400" id="headlessui-listbox-label-1">Project Status</label> | |
| <div class="mt-0.5 relative sm:col-span-2 w-full"><button data-testid="dropdown-button" class="group relative w-full pl-3 pr-10 py-2 text-left cursor-default bg-white shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md" id="headlessui-listbox-button-2" type="button" aria-haspopup="true" aria-labelledby="headlessui-listbox-label-1 headlessui-listbox-button-2"><span class="flex justify-between"><span class="block truncate">Show all</span><span class="ml-2 truncate text-gray-500"></span></span><span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400 group-hover:text-gray-600" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> | |
| </svg></span></button></div> | |
| </div> | |
| </div> | |
| <div class="col-span-full md:col-span-2 2xl:col-span-2 flex flex-col" data-testid="project-integration-dropdown"> | |
| <div><label class="text-xs leading-4 font-semibold tracking-wider uppercase text-gray-400" id="headlessui-listbox-label-3">Integration</label> | |
| <div class="mt-0.5 relative sm:col-span-2 w-full"><button data-testid="dropdown-button" class="group relative w-full pl-3 pr-10 py-2 text-left cursor-default bg-white shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md" id="headlessui-listbox-button-4" type="button" aria-haspopup="true" aria-labelledby="headlessui-listbox-label-3 headlessui-listbox-button-4"><span class="flex justify-between"><span class="block truncate">Show all</span><span class="ml-2 truncate text-gray-500"></span></span><span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400 group-hover:text-gray-600" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> | |
| </svg></span></button></div> | |
| </div> | |
| </div> | |
| <div class="col-span-full md:col-span-2 2xl:col-span-2 flex flex-col" data-testid="project-integration-dropdown"> | |
| <div class=""><label class="text-xs leading-4 font-semibold tracking-wider uppercase text-gray-400" id="headlessui-listbox-label-3">Integration Status</label> | |
| <div class="mt-0.5 relative sm:col-span-2 w-full"><button data-testid="dropdown-button" class="group relative w-full pl-3 pr-10 py-2 text-left cursor-default bg-white shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md" id="headlessui-listbox-button-4" type="button" aria-haspopup="true" aria-labelledby="headlessui-listbox-label-3 headlessui-listbox-button-4"><span class="flex justify-between"><span class="block truncate">Show all</span><span class="ml-2 truncate text-gray-500"></span></span><span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400 group-hover:text-gray-600" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> | |
| </svg></span></button></div> | |
| </div> | |
| </div> | |
| <div class="col-span-full md:col-span-2 2xl:col-span-2 flex flex-col self-center justify-self-end p-2 md:mt-5"> | |
| <div class="relative inline-block text-left"> | |
| <div> | |
| <button type="button" class="group inline-flex justify-center text-sm font-medium text-gray-500 hover:text-gray-600" id="menu-button" aria-expanded="false" aria-haspopup="true"> | |
| Last Created | |
| <!-- Heroicon name: solid/chevron-down --> | |
| <svg class="flex-shrink-0 -mr-1 ml-2 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| <!-- | |
| Dropdown menu, show/hide based on menu state. | |
| Entering: "transition ease-out duration-100" | |
| From: "transform opacity-0 scale-95" | |
| To: "transform opacity-100 scale-100" | |
| Leaving: "transition ease-in duration-75" | |
| From: "transform opacity-100 scale-100" | |
| To: "transform opacity-0 scale-95" | |
| --> | |
| <div class="origin-top-right absolute right-0 mt-2 w-40 rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1" style=" | |
| display: none; | |
| "> | |
| <div class="py-1" role="none"> | |
| <!-- | |
| Active: "bg-gray-100", Not Active: "" | |
| Selected: "font-medium text-gray-900", Not Selected: "text-gray-500" | |
| --> | |
| <a href="#" class="font-medium text-gray-800 block px-4 py-2 text-sm hover:text-gray-700 focus:outline-none" role="menuitem" tabindex="-1" id="menu-item-0"> | |
| Most Popular | |
| </a> | |
| <a href="#" class="text-gray-500 block px-4 py-2 text-sm hover:text-gray-700 focus:outline-none" role="menuitem" tabindex="-1" id="menu-item-1"> | |
| Best Rating | |
| </a> | |
| <a href="#" class="text-gray-500 block px-4 py-2 text-sm hover:text-gray-700 focus:outline-none" role="menuitem" tabindex="-1" id="menu-item-2"> | |
| Newest | |
| </a> | |
| <a href="#" class="text-gray-500 block px-4 py-2 text-sm hover:text-gray-700 focus:outline-none" role="menuitem" tabindex="-1" id="menu-item-3"> | |
| Price: Low to High | |
| </a> | |
| <a href="#" class="text-gray-500 block px-4 py-2 text-sm hover:text-gray-700 focus:outline-none" role="menuitem" tabindex="-1" id="menu-item-4"> | |
| Price: High to Low | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!--- Page content: Body scrollable ---> | |
| <div class="min-h-0 flex-1 overflow-y-auto"> | |
| <!-- Body starts ---> | |
| <div class="pt-3 pb-12 px-4 sm:px-6 lg:px-8 space-y-6 max-w-screen-2xl mx-auto"> | |
| <div class="space-y-6 lg:space-y-0 lg:grid lg:grid-cols-2 lg:gap-x-4"> | |
| <div class="relative p-6 bg-gradient bg-gradient-to-br from-gray-700 via-blue-700 to-purple-700 border border-gray-200 rounded-2xl shadow-sm flex flex-col"> | |
| <div class="flex-1"> | |
| <h3 class="text-sm leading-5 font-semibold tracking-wider uppercase text-white">My Plan: Advanced</h3> | |
| <div class="flex items-end py-2 space-x-4"><p class="flex items-baseline text-white"> | |
| <span class="text-4xl leading-10 font-extrabold tracking-tight">$82</span> | |
| </p><div class="flex-col"><span class="block text-sm font-normal leading-none text-white mb-1">USD / month</span><span class="block text-sm font-normal leading-none text-white mb-1">Billed yearly ($820)</span></div> | |
| <p></p></div> | |
| <div class="justify-center flex-col space-x-3 mt-5"><a href="#" class="block flex justify-center items-center text-center transition duration-300 button-ease shadow-none px-3.5 py-2 border border-gray-300 text-sm leading-5 tracking-wide font-medium text-gray-600 bg-white rounded-full hover:border-gray-500 hover:text-gray-800 focus:outline-none focus:ring-1 focus:ring-offset-0 focus:ring-blue-600 focus:border-blue-400">Change credit card</a><a href="#" class="block flex justify-center items-center text-center transition duration-300 button-ease shadow-none px-3.5 py-2 border border-gray-300 text-sm leading-5 tracking-wide font-medium text-gray-600 bg-white rounded-full hover:border-gray-500 hover:text-gray-800 focus:outline-none focus:ring-1 focus:ring-offset-0 focus:ring-blue-600 focus:border-blue-400 hidden">Change credit card</a></div><a href="#" class="block flex justify-center transition duration-300 button-ease shadow-none px-3.5 py-2 border border-gray-300 text-sm leading-5 tracking-wide font-medium text-gray-600 bg-white rounded-full hover:border-gray-500 hover:text-gray-800 focus:outline-none focus:ring-1 focus:ring-offset-0 focus:ring-blue-600 focus:border-blue-400" style=" | |
| display: none; | |
| ">Change credit card</a><p class="mt-6 text-gray-500 hidden">The essentials to provide your best work for clients.</p> | |
| <!-- Feature list --> | |
| <ul role="list" class="mt-3 space-y-2"> | |
| <li class="flex items-center"> | |
| <svg class="flex-shrink-0 w-5 h-5 text-gray-100" x-description="Heroicon name: outline/credit card" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path> | |
| </svg> | |
| <span class="ml-3 text-sm leading-4 text-white">Visa ending 4256</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <svg class="flex-shrink-0 w-5 h-5 text-gray-100" x-description="Heroicon name: outline/calendar" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path> | |
| </svg> | |
| <span class="ml-3 text-sm leading-4 text-white">Next payment on Feb 10, 2022</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div><div class="relative p-6 bg-white border border-blue-100 rounded-2xl shadow-sm flex flex-col"> | |
| <div class="flex-1"> | |
| <h3 class="text-sm leading-5 font-semibold tracking-wider uppercase text-gray-700">Total Usage</h3> | |
| <div class="flex items-end py-2 space-x-4"><p class="flex items-baseline text-blue-600"> | |
| <span class="text-4xl leading-10 font-extrabold tracking-tight">71,897</span> | |
| </p><div class="flex-col"><span class="block text-sm font-normal leading-none text-gray-500 mb-1 hidden" style=" | |
| ">USD / month</span><span class="block text-sm font-normal leading-none text-gray-500 mb-1">/ 100,000 (monthly)</span></div> | |
| <p></p></div> | |
| <p class="mt-6 text-gray-500 hidden">Dedicated support and infrastructure for your company.</p> | |
| <!-- Feature list --><ul role="list" class="mt-3 space-y-2"> | |
| <li class="flex items-center"> | |
| <input type="checkbox" class="ml-0.5 border-gray-300 rounded" checked=""> | |
| <span class="ml-3.5 text-sm leading-4 text-gray-700">Enable on-demand events ($0.01 per thousand)</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <svg class="flex-shrink-0 w-5 h-5 text-gray-400" x-description="Heroicon name: outline/calendar" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path> | |
| </svg> | |
| <span class="ml-3 text-sm leading-4 text-gray-700">Events will reset on Jan 10, 2022</span> | |
| </li> | |
| </ul> | |
| <div class="justify-center flex space-x-3 mt-5"><a href="#" class="w-1/2 flex justify-center items-center text-center transition duration-300 button-ease shadow-none px-4 py-2 border border-gray-300 text-sm leading-5 tracking-wide text-gray-600 bg-white rounded-full hover:border-gray-500 hover:text-gray-800 focus:outline-none focus:ring-1 focus:ring-offset-0 focus:ring-blue-600 focus:border-blue-400">View Usage</a><a href="#" class="w-1/2 flex justify-center items-center text-center transition duration-300 button-ease shadow-none px-4 py-2 border border-transparent text-sm leading-5 tracking-wide text-white bg-blue-600 rounded-full hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-800 focus:border-blue-700">Change Quota</a></div> | |
| </div> | |
| </div> | |
| <div class="relative p-6 bg-white border border-gray-200 rounded-2xl shadow-sm flex flex-col hidden"> | |
| <div class="flex-1"> | |
| <h3 class="text-xl font-semibold text-gray-900">Startup</h3> | |
| <p class="absolute top-0 py-1.5 px-4 bg-indigo-500 rounded-full text-xs font-semibold uppercase tracking-wide text-white transform -translate-y-1/2">Most popular</p> | |
| <p class="mt-4 flex items-baseline text-gray-900"> | |
| <span class="text-5xl font-extrabold tracking-tight">$32</span> | |
| <span class="ml-1 text-xl font-semibold">/month</span> | |
| </p> | |
| <p class="mt-6 text-gray-500">A plan that scales with your rapidly growing business.</p> | |
| <!-- Feature list --> | |
| <ul role="list" class="mt-6 space-y-6"> | |
| <li class="flex"> | |
| <svg class="flex-shrink-0 w-6 h-6 text-indigo-500" x-description="Heroicon name: outline/check" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> | |
| </svg> | |
| <span class="ml-3 text-gray-500">25 products</span> | |
| </li> | |
| <li class="flex"> | |
| <svg class="flex-shrink-0 w-6 h-6 text-indigo-500" x-description="Heroicon name: outline/check" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> | |
| </svg> | |
| <span class="ml-3 text-gray-500">Up to 10,000 subscribers</span> | |
| </li> | |
| <li class="flex"> | |
| <svg class="flex-shrink-0 w-6 h-6 text-indigo-500" x-description="Heroicon name: outline/check" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> | |
| </svg> | |
| <span class="ml-3 text-gray-500">Advanced analytics</span> | |
| </li> | |
| <li class="flex"> | |
| <svg class="flex-shrink-0 w-6 h-6 text-indigo-500" x-description="Heroicon name: outline/check" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> | |
| </svg> | |
| <span class="ml-3 text-gray-500">24-hour support response time</span> | |
| </li> | |
| <li class="flex"> | |
| <svg class="flex-shrink-0 w-6 h-6 text-indigo-500" x-description="Heroicon name: outline/check" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> | |
| </svg> | |
| <span class="ml-3 text-gray-500">Marketing automations</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <a href="#" class="bg-indigo-500 text-white hover:bg-indigo-600 mt-8 block w-full py-3 px-6 border border-transparent rounded-md text-center font-medium">Monthly billing</a> | |
| </div> | |
| </div><!-- General text block --><div class="space-y-2.5"> | |
| <h4 class="text-base font-semibold text-gray-800">You have the following credits and discounts available, which we'll apply to future charges: </h4> | |
| <!-- List Container --><div class="text-med text-gray-700"> | |
| <ul role="list" class="list-disc pl-6 space-y-1"> | |
| <li> | |
| A 100.0% discount created on March 14, 2013 that expires on February 6, 2106 | |
| </li> | |
| <li> | |
| Your password must include at least one pro wrestling finishing move | |
| </li> | |
| </ul> | |
| </div> | |
| </div><!-- Alert block --><div class="rounded-md bg-blue-100 p-4"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0"> | |
| <svg class="h-5 w-5 text-blue-400" x-description="Heroicon name: solid/information-circle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path> | |
| </svg> | |
| </div> | |
| <div class="ml-3 flex-1 md:flex md:justify-between"> | |
| <p class="text-sm text-blue-600">This account is on a custom plan. To change it, please contact us at <a href="#" class="text-blue-700 font-semibold hover:text-blue-800">[email protected]</a>.</p> | |
| <p class="mt-3 text-sm md:mt-0 md:ml-6"> | |
| <a href="#" class="whitespace-nowrap font-semibold text-blue-700 hover:text-blue-800">Details <span aria-hidden="true">→</span></a> | |
| </p> | |
| </div> | |
| </div> | |
| </div><!-- Pricing / With 4 tiers and feature list --><div class="pt-6 px-6 border-t border-gray-200 /*remove classes after this for normal use*/ pb-3.5"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h2 class="text-2xl font-extrabold text-gray-800">What's Included</h2> | |
| <p class="mt-1 text-base text-gray-500 leading-5">Everything in Free and Essentials plus...</p> | |
| </div> | |
| <dl class="mx-auto max-w-5xl mt-8 space-y-3.5 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-x-5 sm:gap-y-5 lg:grid-cols-3 xl:grid-cols-4 text-med capitalize"> | |
| <div class="relative"> | |
| <dt class="flex items-start"> | |
| <svg class="absolute mt-0.5 h-5 w-5 text-green-500" x-description="Heroicon name: outline/check" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> | |
| </svg> | |
| <p class="ml-7 leading-5 font-semibold text-gray-700">Multi project feed</p> | |
| </dt> | |
| <dd class="mt-2 ml-9 flex text-sm text-gray-500 lg:py-0 lg:pb-4 hidden"> | |
| Tempor tellus in aliquet eu et sit nulla tellus. Suspendisse est, molestie blandit quis ac. Lacus. | |
| </dd> | |
| </div> | |
| <div class="relative"> | |
| <dt class="flex items-start"> | |
| <svg class="absolute mt-0.5 h-5 w-5 text-green-500" x-description="Heroicon name: outline/check" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> | |
| </svg> | |
| <p class="ml-7 leading-5 font-semibold text-gray-700">Data retention up to 180 days</p> | |
| </dt> | |
| <dd class="mt-2 ml-9 flex text-sm text-gray-500 lg:py-0 lg:pb-4 hidden"> | |
| Ornare donec rhoncus vitae nisl velit, neque, mauris dictum duis. Nibh urna non parturient. | |
| </dd> | |
| </div> | |
| <div class="relative"> | |
| <dt class="flex items-start"> | |
| <svg class="absolute mt-0.5 h-5 w-5 text-green-500" x-description="Heroicon name: outline/check" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> | |
| </svg> | |
| <p class="ml-7 leading-5 font-semibold text-gray-700">Real-time feed and alerts</p> | |
| </dt> | |
| <dd class="mt-2 ml-9 flex text-sm text-gray-500 lg:py-0 lg:pb-4 hidden"> | |
| Ornare donec rhoncus vitae nisl velit, neque, mauris dictum duis. Nibh urna non parturient. | |
| </dd> | |
| </div> | |
| <div class="relative"> | |
| <dt class="flex items-start"> | |
| <svg class="absolute mt-0.5 h-5 w-5 text-green-500" x-description="Heroicon name: outline/check" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> | |
| </svg> | |
| <p class="ml-7 leading-5 font-semibold text-gray-700">Adaptive Alerts</p> | |
| </dt> | |
| <dd class="mt-2 ml-9 flex text-sm text-gray-500 lg:py-0 lg:pb-4 hidden"> | |
| Ornare donec rhoncus vitae nisl velit, neque, mauris dictum duis. Nibh urna non parturient. | |
| </dd> | |
| </div> | |
| <div class="relative"> | |
| <dt class="flex items-start"> | |
| <svg class="absolute mt-0.5 h-5 w-5 text-green-500" x-description="Heroicon name: outline/check" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> | |
| </svg> | |
| <p class="ml-7 leading-5 font-semibold text-gray-700">5 service links</p> | |
| </dt> | |
| <dd class="mt-2 ml-9 flex text-sm text-gray-500 lg:py-0 lg:pb-4 hidden"> | |
| Ornare donec rhoncus vitae nisl velit, neque, mauris dictum duis. Nibh urna non parturient. | |
| </dd> | |
| </div> | |
| <div class="relative"> | |
| <dt class="flex items-start"> | |
| <svg class="absolute mt-0.5 h-5 w-5 text-green-500" x-description="Heroicon name: outline/check" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> | |
| </svg> | |
| <p class="ml-7 leading-5 font-semibold text-gray-700">Developer Metrics</p> | |
| </dt> | |
| <dd class="mt-2 ml-9 flex text-sm text-gray-500 lg:py-0 lg:pb-4 hidden"> | |
| Ornare donec rhoncus vitae nisl velit, neque, mauris dictum duis. Nibh urna non parturient. | |
| </dd> | |
| </div> | |
| <div class="relative"> | |
| <dt class="flex items-start"> | |
| <svg class="absolute mt-0.5 h-5 w-5 text-green-500" x-description="Heroicon name: outline/check" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> | |
| </svg> | |
| <p class="ml-7 leading-5 font-semibold text-gray-700">On-demand Events | |
| </p> | |
| </dt> | |
| <dd class="mt-2 ml-9 flex text-sm text-gray-500 lg:py-0 lg:pb-4 hidden"> | |
| Ornare donec rhoncus vitae nisl velit, neque, mauris dictum duis. Nibh urna non parturient. | |
| </dd> | |
| </div> | |
| <div class="relative"> | |
| <dt class="flex items-start"> | |
| <svg class="absolute mt-0.5 h-5 w-5 text-green-500" x-description="Heroicon name: outline/check" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path> | |
| </svg> | |
| <p class="ml-7 leading-5 font-semibold text-gray-700">Enhanced account dashboard</p> | |
| </dt> | |
| <dd class="mt-2 ml-9 flex text-sm text-gray-500 lg:py-0 lg:pb-4 hidden"> | |
| Ornare donec rhoncus vitae nisl velit, neque, mauris dictum duis. Nibh urna non parturient. | |
| </dd> | |
| </div> | |
| </dl> | |
| </div> | |
| <!-- Heading + Subtext (body) - tweaked --><div class="pt-2 space-y-0.5 /*remove classes after this for normal use*/ border-t border-gray-200 pt-7"><h2 id="page-heading" class="text-xl leading-7 font-normal text-gray-900 capitalize"><a id="billing"></a>Billing Info</h2><p class="text-sm text-gray-500 hidden">[text-sm] Subtext: Can you put it into a banner that is not alarming, but eye catching</p></div><!-- Marketing / Page sections / Split brand panel --><div class="relative bg-white shadow-sm rounded-2xl border border-blue-100"> | |
| <h2 class="sr-only">Contact us</h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-3"> | |
| <!-- Contact information --> | |
| <div class="relative overflow-hidden py-5 px-6 xl:py-7 xl:px-8 bg-gradient-to-tr from-gray-800 to-gray-600 rounded-t-2xl lg:rounded-l-2xl lg:rounded-t-none"> | |
| <div class="absolute inset-0 pointer-events-none sm:hidden" aria-hidden="true"> | |
| <svg class="absolute inset-0 w-full h-full" width="343" height="388" viewBox="0 0 343 388" fill="none" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M-99 461.107L608.107-246l707.103 707.107-707.103 707.103L-99 461.107z" fill="url(#linear1)" fill-opacity=".1"></path> | |
| <defs> | |
| <linearGradient id="linear1" x1="254.553" y1="107.554" x2="961.66" y2="814.66" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#fff"></stop> | |
| <stop offset="1" stop-color="#fff" stop-opacity="0"></stop> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| </div> | |
| <div class="hidden absolute top-0 right-0 bottom-0 w-1/2 pointer-events-none sm:block lg:hidden" aria-hidden="true"> | |
| <svg class="absolute inset-0 w-full h-full" width="359" height="339" viewBox="0 0 359 339" fill="none" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M-161 382.107L546.107-325l707.103 707.107-707.103 707.103L-161 382.107z" fill="url(#linear2)" fill-opacity=".1"></path> | |
| <defs> | |
| <linearGradient id="linear2" x1="192.553" y1="28.553" x2="899.66" y2="735.66" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#fff"></stop> | |
| <stop offset="1" stop-color="#fff" stop-opacity="0"></stop> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| </div> | |
| <div class="hidden absolute top-0 right-0 bottom-0 w-full pointer-events-none lg:block" aria-hidden="true"> | |
| <svg class="absolute inset-0 w-full h-full text-blue-50" viewBox="-5 -6 50 50" x="0px" y="0px" fill="none" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg"> | |
| <g xmlns="http://www.w3.org/2000/svg"><path style="" d="m 12,52 5,0 5,-5 5,0 5,-5 5,0 5,-5 5,0 5,-5 0,-20 -20,0 -20,20 z" fill="none" stroke="#5E6D8C" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity=".1"></path><path style="" d="M 32,12 32,32 12,52" fill="none" stroke="#5E6D8C" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity="0.1"></path><path style="" d="m 32,32 20,0" fill="none" stroke="#5E6D8C" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round" stroke-miterlimit="4" stroke-dasharray="none" stroke-opacity=".1"></path></g> | |
| <defs> | |
| <linearGradient id="linear3" x1="192.553" y1="325.553" x2="899.66" y2="1032.66" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#ababab"></stop> | |
| <stop offset="1" stop-color="#ababab" stop-opacity="0"></stop> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| <svg class="absolute inset-0 w-full h-full text-blue-50 hidden" viewBox="0 0 60 60" x="0px" y="0px" fill="none" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M444,330 C439.029437,330 435,325.970563 435,321 C435,316.029437 439.029437,312 444,312 C448.970563,312 453,316.029437 453,321 C453,325.970563 448.970563,330 444,330 Z M444,326 C446.761424,326 449,323.761424 449,321 C449,318.238576 446.761424,316 444,316 C441.238576,316 439,318.238576 439,321 C439,323.761424 441.238576,326 444,326 Z M480,300 C481.104569,300 482,300.895431 482,302 C482,303.104569 481.104569,304 480,304 C473.372583,304 468,309.372583 468,316 C468,322.627417 473.372583,328 480,328 C481.104569,328 482,328.895431 482,330 C482,331.104569 481.104569,332 480,332 C471.163444,332 464,324.836556 464,316 C464,307.163444 471.163444,300 480,300 Z M476,362 C476,363.104569 475.104569,364 474,364 C472.895431,364 472,363.104569 472,362 C472,349.849736 462.150264,340 450,340 C437.849736,340 428,349.849736 428,362 C428,363.104569 427.104569,364 426,364 C424.895431,364 424,363.104569 424,362 C424,347.640597 435.640597,336 450,336 C464.359403,336 476,347.640597 476,362 Z M418,316 C416.895431,316 416,315.104569 416,314 C416,312.895431 416.895431,312 418,312 C425.731986,312 432,305.731986 432,298 C432,296.895431 432.895431,296 434,296 C435.104569,296 436,296.895431 436,298 C436,307.941125 427.941125,316 418,316 Z" fill="url(#linear3)" fill-opacity=".1" transform="translate(-416 -296)"></path> | |
| <defs> | |
| <linearGradient id="linear3" x1="192.553" y1="325.553" x2="899.66" y2="1032.66" gradientUnits="userSpaceOnUse"> | |
| <stop stop-color="#ababab"></stop> | |
| <stop offset="1" stop-color="#ababab" stop-opacity="0"></stop> | |
| </linearGradient> | |
| </defs> | |
| </svg></div> | |
| <h3 class="text-lg font-bold text-blue-50">Account: Rollbar</h3> | |
| <p class="mt-4 text-sm text-white max-w-3xl">You are currently on <span class="font-semibold text-blue-200">Essentials 21 50K</span> plan.</p> | |
| <ul role="list" class="mt-3 space-y-2"> | |
| <li class="flex items-start"> | |
| <svg class="mt-0.5 flex-shrink-0 w-5 h-5 text-gray-100" x-description="Heroicon name: outline/mail" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> | |
| </svg> | |
| <span class="ml-3 text-sm leading-5 text-white">[email protected], [email protected]</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <svg class="mt-0.5 flex-shrink-0 w-5 h-5 text-gray-100" x-description="Heroicon name: outline/credit card" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path> | |
| </svg> | |
| <span class="ml-3 text-sm leading-5 text-white">Visa ending 4256</span> | |
| </li><li class="flex items-start"> | |
| <svg class="mt-0.5 flex-shrink-0 w-5 h-5 text-gray-100" x-description="Heroicon name: outline/calendar" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path> | |
| </svg> | |
| <span class="ml-3 text-sm leading-5 text-white">Next bill on Feb 10, 2022</span> | |
| </li> | |
| </ul> | |
| <div class="justify-center flex-col space-x-3 mt-5"><a href="#" class="block flex justify-center items-center text-center transition duration-300 button-ease shadow-none px-3 py-2 border border-transparent text-sm leading-5 tracking-wide font-normal text-white bg-blue-600 rounded-full hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-800 focus:border-blue-700 sm:w-auto capitalize">Change credit card</a></div><p class="mt-4 text-sm font-semibold text-blue-50 uppercase tracking-wider max-w-3xl">Plan Detail</p><ul role="list" class="mt-3 text-sm text-white list-disc pl-6 space-y-1"> | |
| <li>Your account is set to <span class="font-semibold text-blue-200">monthly billing</span></li><li>A <span class="font-semibold text-blue-200">100.0% discount</span> created on March 14, 2013 <span class="font-semibold text-blue-200">expires on February 6, 2106</span></li> | |
| </ul> | |
| </div> | |
| <!-- Contact form --> | |
| <div class="py-5 px-6 xl:py-7 xl:px-8 lg:col-span-2"> | |
| <form action="#" method="POST" class="grid grid-cols-1 gap-y-5 sm:grid-cols-2 sm:gap-x-8"> | |
| <div class="sm:col-span-2 space-y-2"> | |
| <p class="text-sm font-semibold text-gray-900 uppercase tracking-wider">Communication</p><p class="text-smr leading-snug text-gray-500">[text-smr] <span class="text-red-600">(new) </span>Receipts, product updates, etc. will be sent to this address. It will not receive project notifications. To enter multiple addresses, separate them with commas.</p><label for="subject" class="block text-sm font-medium text-gray-700">Billing Contact</label> | |
| <div class="mt-1"> | |
| <input type="text" name="subject" id="subject" class="block w-full shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md"> | |
| </div> | |
| </div> | |
| <div class="sm:col-span-2 space-y-2"> | |
| <p class="text-sm font-semibold text-gray-900 uppercase tracking-wider">Invoice Details</p><p class="text-smr leading-snug text-gray-500">If you need additional information included on your invoices, such as your full business name, address, or VAT number, enter it here. We'll include it on all future invoices. If you need old invoices to be updated, please contact <a href="mailto:[email protected]" class="text-blue-600">support</a>.</p><div class="flex justify-between"> | |
| <label for="message" class="block text-sm font-medium text-gray-700">Extra Billing Info</label> | |
| <span id="message-max" class="text-sm text-gray-400">Optional</span> | |
| </div> | |
| <div class="mt-1"> | |
| <textarea id="message" name="message" rows="3" class="block w-full shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md" aria-describedby="message-max"></textarea> | |
| </div> | |
| </div> | |
| <div style=" | |
| display: none; | |
| "> | |
| <label for="email" class="block text-sm font-medium text-gray-900">Email</label> | |
| <div class="mt-1"> | |
| <input id="email" name="email" type="email" autocomplete="email" class="block w-full shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md"> | |
| </div> | |
| </div><div style=" | |
| display: none; | |
| "> | |
| <div class="flex justify-between"> | |
| <label for="phone" class="block text-sm font-medium text-gray-900">Phone</label> | |
| <span id="phone-optional" class="text-sm text-gray-400">Optional</span> | |
| </div> | |
| <div class="mt-1"> | |
| <input type="text" name="phone" id="phone" autocomplete="tel" class="block w-full shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md" aria-describedby="phone-optional"> | |
| </div> | |
| </div><div class="sm:col-span-2 sm:flex sm:justify-end"> | |
| <button type="submit" class="w-full inline-flex items-center justify-center text-center transition duration-300 button-ease shadow-none px-4 py-2 border border-transparent text-sm leading-5 tracking-wide text-white bg-blue-600 rounded-full hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-800 focus:border-blue-700 sm:w-auto"> | |
| Submit | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div><!-- General text block --><div class="space-y-2.5"> | |
| <h3 class="text-lg font-bold text-blue-600">Outgrowing your plan?</h3><h4 class="text-base font-semibold text-gray-800">Something something save money woohoo</h4><p class="text-med leading-snug text-gray-700 pb-2"> | |
| We noticed several overages on your account in the past 6 months. Upgrade from Essentials to Advanced and get <span class="font-bold">50,000 more events</span> quota each month. Or reach out to <span class="font-semiold text-blue-600">support</span> and we can help with the right plan for you! Semper curabitur ullamcorper posuere nunc sed. Ornare iaculis bibendum malesuada faucibus lacinia porttitor. Pulvinar laoreet sagittis viverra duis. In venenatis sem arcu pretium pharetra at. Lectus viverra dui tellus ornare pharetra. | |
| </p><p class="text-med leading-snug text-gray-700 pb-2"> | |
| Semper curabitur ullamcorper posuere nunc sed. Ornare iaculis bibendum malesuada faucibus lacinia porttitor. Pulvinar laoreet sagittis viverra duis. In venenatis sem arcu pretium pharetra at. Lectus viverra dui tellus ornare pharetra. | |
| </p><div class="relative"> | |
| <a href="#" class="transition duration-300 button-ease text-sm font-normal leading-5 tracking-wide text-white inline-flex bg-gradient-to-br from-purple-700 via-purple-600 to-blue-500 bg-origin-border px-4 py-2 border border-transparent rounded-full shadow-sm hover:from-blue-700 hover:to-purple-700">Upgrade Now</a> | |
| </div> | |
| </div><!-- Heading + Subtext (body) --><div class="pt-2 space-y-0.5"><h2 id="page-heading" class="text-xl leading-7 font-normal text-gray-900 capitalize"><span class="lowercase">[text-xl] </span>Feedback Ipsum</h2><p class="text-sm text-gray-500">[text-sm] Subtext: Can you put it into a banner that is not alarming, but eye catching</p> </div><!-- General text block --><div class="space-y-2.5"> | |
| <h3 class="text-lg font-bold text-blue-600">[text-lg] New ux low-hanging fruit optimize the fireball hop on the bandwagon</h3><h4 class="text-base font-semibold text-gray-800">[text-base] There is a H4 if you want to highlight the start of your para. It's optional; you can just <p></h4><p class="text-med leading-snug text-gray-700 pb-2">[text-med] <span class="text-red-600">(new) </span>This is a win-win situation which will cause a stellar paradigm shift. i know this is the final release but can we add more features? can you make it stand out more? can you make the blue bluer? pass the mayo, appeal to the client, sue the vice president but we trust your eye, but can you change everything? quick win circle back come up with something buzzworthy | |
| </p><!-- List container --><div class="text-med text-gray-700"> | |
| <ul role="list" class="list-disc pl-6 space-y-1"> | |
| <li>Can you make the font bigger?</li> | |
| <li>It looks a bit empty, try to make everything bigger</li> | |
| <li>Can we try some other colours maybe can you make it look like this clipart i found</li></ul> | |
| </div> | |
| </div><!-- Heading + Subtext (body) --><div class="pt-2 space-y-0.5"><h2 id="page-heading" class="text-xl leading-7 font-normal text-gray-900 capitalize"><span class="lowercase">[text-xl] </span>Feedback Ipsum</h2><p class="text-sm text-gray-500 hidden">[text-sm] Subtext: Can you put it into a banner that is not alarming, but eye catching</p> </div><!-- General text block --><div class="space-y-2.5"> | |
| <h3 class="text-lg font-bold text-blue-600">[text-lg] New ux low-hanging fruit optimize the fireball hop on the bandwagon</h3><h4 class="text-base font-semibold text-gray-800 hidden">[text-base] There is a H4 if you want to highlight the start of your para. It's optional; you can just <p></h4><p class="text-sm leading-snug text-gray-700 pb-2">[text-sm option] No load testing. can it handle a million in one go. can you please send me the design specs again? this looks perfect. just Photoshop out the dog, add a baby, and make the curtains blue. why is a 15mb gif on the startpage a bad idea?! just do what you think. I trust you, so it's great, can you add a beard though, I like it, but can the snow look a little warmer. | |
| </p><!-- List container --><div class="text-sm text-gray-700"> | |
| <ul role="list" class="list-disc pl-6 space-y-1"> | |
| <li>Thanks for taking the time to make the website, but i already made it in wix</li> | |
| <li>We don't need a backup, it never goes down</li><li>How much will it cost try making it a bit less blah is this the best we can do</li> | |
| <li>Needs to be sleeker can you punch up the fun level on these icons</li></ul> | |
| </div> | |
| </div><!-- Demo only to hide content for testing --><input id="collapsible-env" class="toggle" type="checkbox"> | |
| <label for="collapsible-env" class="flex w-full group col-span-2 sh-toggle flex inline-flex order-first space-x-1 items-stretch items-center hover:text-blue-800 focus:text-blue-800 focus:outline-none" tabindex="0"><svg class="self-baseline -ml-1 mt-4 mr-1 flex-shrink-0 h-4 w-4 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path> | |
| </svg> | |
| <div class="flex justify-between items-center w-full"> | |
| <!-- Heading + Subtext (body) --><div class="sm:w-0 flex-1 pt-2 space-y-0.5"> | |
| <!-- Responsive breadcrumb --> | |
| <h2 id="page-heading" class="text-xl leading-7 font-normal text-gray-900 capitalize">Drop it like it's hot</h2> | |
| <p class="text-sm text-gray-500 hidden">Optional subtext</p></div> | |
| <!-- RHS button / Ellipsis popup menu ---><div class="flex sm:flex-shrink-0 z-10"> | |
| <div class="ml-3 relative inline-block text-left"> | |
| <div> | |
| <button type="button" class="transition duration-300 button-ease -my-2 p-1.5 rounded-full bg-transparent flex items-center border border-gray-300 text-gray-400 hover:text-gray-600 hover:border-gray-500 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400 focus:text-gray-600" id="menu-3-button" aria-expanded="false" aria-haspopup="true"> | |
| <span class="sr-only">Open options</span> | |
| <!-- Heroicon name: outline/cog --> | |
| <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| <!-- | |
| Dropdown menu, show/hide based on menu state. | |
| Entering: "transition ease-out duration-100" | |
| From: "transform opacity-0 scale-95" | |
| To: "transform opacity-100 scale-100" | |
| Leaving: "transition ease-in duration-75" | |
| From: "transform opacity-100 scale-100" | |
| To: "transform opacity-0 scale-95" | |
| --> | |
| <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-3-button" tabindex="-1" style=" | |
| display: none; | |
| "> | |
| <div class="py-1" role="none"> | |
| <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" --> | |
| <fieldset class="grid border-0"> | |
| <legend class="sr-only">Projects</legend> | |
| <div class="px-4 py-1.5 group relative flex items-start hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="project" aria-describedby="project-mox" name="comments" type="checkbox" checked="" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 group-hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="w-full ml-3 text-sm"> | |
| <label for="project" class="block text-gray-500 group-hover:text-blue-600">Project</label> | |
| </div> | |
| </div> | |
| <div class="px-4 py-1.5 group relative flex items-start hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="item-id" aria-describedby="project-mox" name="comments" type="checkbox" checked="" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 group-hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="w-full ml-3 text-sm"> | |
| <label for="item-id" class="block text-gray-500 group-hover:text-blue-600">Item ID</label> | |
| </div> | |
| </div> | |
| <div class="px-4 py-1.5 group relative flex items-start hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="environment" aria-describedby="project-mox" name="comments" type="checkbox" checked="" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 group-hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="w-full ml-3 text-sm"> | |
| <label for="environment" class="block text-gray-500 group-hover:text-blue-600">Environment</label> | |
| </div> | |
| </div><div class="px-4 py-1.5 group relative flex items-start hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="severity" aria-describedby="project-mox" name="comments" type="checkbox" checked="" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 group-hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="w-full ml-3 text-sm"> | |
| <label for="severity" class="block text-gray-500 group-hover:text-blue-600">Severity</label> | |
| </div> | |
| </div></fieldset> | |
| </div> | |
| </div> | |
| </div> | |
| </div><!-- Alternative RHS buttons --> | |
| <div class="flex items-center px-3 sm:flex-shrink-0 z-10 space-x-3" style=" | |
| display: none; | |
| "><button type="button" class="group inline-flex transition duration-300 button-ease justify-center px-2 py-2 border border-gray-300 text-sm font-medium rounded-full text-gray-600 bg-transparent hover:text-gray-700 hover:border-blue-300 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400"> | |
| <svg class="h-5 w-5 text-gray-400 transition duration-300 button-ease group-hover:text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path> | |
| </svg> | |
| <span class="hidden">Edit</span> | |
| </button> | |
| <button type="button" class="inline-flex transition duration-300 button-ease items-center px-2 md:px-4 py-2 md:py-2.5 border border-transparent text-sm font-medium rounded-full tracking-wide text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-800 focus:border-blue-700"> | |
| <svg class="md:-ml-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4 text-blue-50" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path> | |
| </svg> | |
| <span class="hidden md:block tracking-wide">New Project</span> | |
| </button> | |
| </div> | |
| </div></label><!-- Demo only. Remove outer div collapsible-content to use or children y-spacing will get messed up. If need collapsible-content, then add space-y-6 as shown in div below --><div class="collapsible-content space-y-6"> | |
| <!-- Content header + RHS button --><div class="flex justify-between items-center" style=" | |
| "> | |
| <!-- Heading + Subtext (body) --><div class="sm:w-0 flex-1 pt-2 space-y-0.5"> | |
| <h2 id="page-heading" class="text-xl leading-7 font-normal text-gray-900 capitalize">Item metrics</h2> | |
| <p class="text-sm text-gray-500">Optional subtext</p></div> | |
| <!-- RHS button / Ellipsis popup menu ---><div class="flex sm:flex-shrink-0 z-10"> | |
| <div class="ml-3 relative inline-block text-left"> | |
| <div> | |
| <button type="button" class="transition duration-300 button-ease -my-2 p-1.5 rounded-full bg-transparent flex items-center border border-gray-300 text-gray-400 hover:text-gray-600 hover:border-gray-500 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400 focus:text-gray-600" id="menu-3-button" aria-expanded="false" aria-haspopup="true"> | |
| <span class="sr-only">Open options</span> | |
| <!-- Heroicon name: outline/cog --> | |
| <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| <!-- | |
| Dropdown menu, show/hide based on menu state. | |
| Entering: "transition ease-out duration-100" | |
| From: "transform opacity-0 scale-95" | |
| To: "transform opacity-100 scale-100" | |
| Leaving: "transition ease-in duration-75" | |
| From: "transform opacity-100 scale-100" | |
| To: "transform opacity-0 scale-95" | |
| --> | |
| <div class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-3-button" tabindex="-1" style=" | |
| display: none; | |
| "> | |
| <div class="py-1" role="none"> | |
| <!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" --> | |
| <fieldset class="grid border-0"> | |
| <legend class="sr-only">Projects</legend> | |
| <div class="px-4 py-1.5 group relative flex items-start hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="project" aria-describedby="project-mox" name="comments" type="checkbox" checked="" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 group-hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="w-full ml-3 text-sm"> | |
| <label for="project" class="block text-gray-500 group-hover:text-blue-600">Project</label> | |
| </div> | |
| </div> | |
| <div class="px-4 py-1.5 group relative flex items-start hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="item-id" aria-describedby="project-mox" name="comments" type="checkbox" checked="" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 group-hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="w-full ml-3 text-sm"> | |
| <label for="item-id" class="block text-gray-500 group-hover:text-blue-600">Item ID</label> | |
| </div> | |
| </div> | |
| <div class="px-4 py-1.5 group relative flex items-start hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="environment" aria-describedby="project-mox" name="comments" type="checkbox" checked="" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 group-hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="w-full ml-3 text-sm"> | |
| <label for="environment" class="block text-gray-500 group-hover:text-blue-600">Environment</label> | |
| </div> | |
| </div><div class="px-4 py-1.5 group relative flex items-start hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="severity" aria-describedby="project-mox" name="comments" type="checkbox" checked="" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 group-hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="w-full ml-3 text-sm"> | |
| <label for="severity" class="block text-gray-500 group-hover:text-blue-600">Severity</label> | |
| </div> | |
| </div></fieldset> | |
| </div> | |
| </div> | |
| </div> | |
| </div><!-- Alternative RHS buttons --> | |
| <div class="flex items-center px-3 sm:flex-shrink-0 z-10 space-x-3" style=" | |
| display: none; | |
| "><button type="button" class="group inline-flex transition duration-300 button-ease justify-center px-2 py-2 border border-gray-300 text-sm font-medium rounded-full text-gray-600 bg-transparent hover:text-gray-700 hover:border-blue-300 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400"> | |
| <svg class="h-5 w-5 text-gray-400 transition duration-300 button-ease group-hover:text-gray-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path> | |
| </svg> | |
| <span class="hidden">Edit</span> | |
| </button> | |
| <button type="button" class="inline-flex transition duration-300 button-ease items-center px-2 md:px-4 py-2 md:py-2.5 border border-transparent text-sm font-medium rounded-full tracking-wide text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-800 focus:border-blue-700"> | |
| <svg class="md:-ml-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4 text-blue-50" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path> | |
| </svg> | |
| <span class="hidden md:block tracking-wide">New Project</span> | |
| </button> | |
| </div> | |
| </div><!-- Projects tables --><div data-testid="stacked-list-projects" class=""> | |
| <div class="bg-white overflow-visible sm:rounded-md divide-y divide-gray-50 border border-blue-100"> | |
| <div class="block divide-y divide-gray-50"> | |
| <div class="px-4 py-3 sm:px-6 rounded-t-md bg-gray-100"> | |
| <div class="text-xs leading-4 font-semibold tracking-widest text-gray-500 uppercase grid grid-cols-12 gap-x-6 items-center"> | |
| <div class="col-span-full md:col-span-3 truncate">Name</div> | |
| <div class="hidden md:block md:col-span-4 ml-2 justify-self-end">Integrations</div> | |
| <div class="hidden md:block md:col-span-3 ml-2 justify-self-center">Members</div> | |
| <div class="hidden md:block md:col-span-2 ml-2 justify-self-start">Access Token</div> | |
| <div></div> | |
| </div> | |
| </div> | |
| </div> | |
| <ol class="divide-y divide-blue-50"> | |
| <li> | |
| <div class="block hover:bg-gray-50"> | |
| <div class="px-4 py-4 sm:px-6"> | |
| <div class="grid grid-cols-12 gap-x-6 gap-y-1 flex items-center justify-between"> | |
| <div class="row-start-1 col-span-11 md:col-span-3 flex flex-col justify-center mr-2 font-normal text-gray-400 tracking-wide truncate overflow-ellipsis"><a class="text-med font-semibold tracking-6 text-gray-700" href="https://rollbar.com/Rollbar/foobar123/settings/general">foobar</a> | |
| <div class="text-sm leading-5">No description</div> | |
| </div> | |
| <div class="col-span-11 md:col-span-8 flex flex-row md:justify-self-end text-sm leading-5 group"> | |
| <div class="font-normal text-gray-500 whitespace-normal">We haven't received data for this project yet. To start monitoring, | |
| <span class="font-semibold text-gray-500 text-orange-600 group-hover:text-orange-700">complete the setup</span> | |
| </div> | |
| </div> | |
| <div class="row-start-1 col-span-1 md:row-start-auto col-span-1 self-center justify-self-end"> | |
| <div> | |
| <div class="relative block text-left"> | |
| <div><button data-testid="action-dropdown-137342" class="group rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none" id="projects-menu-button" type="button" aria-haspopup="true"><span class="sr-only">Open options</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 hover:text-blue-600 group-focus:text-blue-800" aria-hidden="true"> | |
| <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path> | |
| </svg></button> | |
| <div class="origin-top-right absolute right-0 mt-2 w-44 rounded-md shadow-md bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10" role="menu" aria-orientation="vertical" aria-labelledby="proects-menu-button" tabindex="-1" style=" | |
| display: none; | |
| "> | |
| <div class="py-1" role="none"> | |
| <a href="#" class="group inline-flex items-center font-medium text-gray-500 block px-4 py-2 text-sm hover:text-gray-700 focus:outline-none" role="menuitem" tabindex="-1" id="menu-item-0"> | |
| <svg class="-ml-1 mr-1.5 mt-0.5 h-4 w-4 text-gray-400 group-hover:text-gray-500" x-description="Heroicon name: solid/bookmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="currentColor" aria-hidden="true"> | |
| <path d="M30,26 C31.1045695,26 32,25.1045695 32,24 C32,22.8954305 31.1045695,22 30,22 C28.8954305,22 28,22.8954305 28,24 C28,25.1045695 28.8954305,26 30,26 Z M30,30 C26.6862915,30 24,27.3137085 24,24 C24,20.6862915 26.6862915,18 30,18 C33.3137085,18 36,20.6862915 36,24 C36,27.3137085 33.3137085,30 30,30 Z" fill-rule="nonzero" transform="translate(30.000000, 24.000000) scale(-1, 1) translate(-30.000000, -24.000000) "></path> | |
| <path d="M8,24 C8,29.5245211 12.4726761,34 17.9900589,34 L30.0099411,34 C35.5215198,34 40,29.5202008 40,24 C40,18.4754789 35.5273239,14 30.0099411,14 L17.9900589,14 C12.4784802,14 8,18.4797992 8,24 Z M4,24 C4,16.2680135 10.271987,10 17.9900589,10 L30.0099411,10 C37.7364373,10 44,16.2663135 44,24 C44,31.7319865 37.728013,38 30.0099411,38 L17.9900589,38 C10.2635627,38 4,31.7336865 4,24 Z" fill-rule="nonzero" transform="translate(24.000000, 24.000000) scale(-1, 1) translate(-24.000000, -24.000000) "></path> | |
| </svg> | |
| Enable Project</a> | |
| <a href="#" class="group inline-flex items-center font-medium text-gray-500 block px-4 py-2 text-sm hover:text-gray-700 focus:outline-none" role="menuitem" tabindex="-1" id="menu-item-0"> | |
| <svg aria-hidden="true" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" x-description="Heroicon name: line/cog" class="-ml-1 mr-1.5 mt-0.5 h-4 w-4 text-gray-400 group-hover:text-gray-500"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path> | |
| </svg>Project Settings</a><a href="#" class="mt-1 group border-t border-gray-100 w-full inline-flex items-center font-medium text-red-700 block px-4 py-2 text-sm hover:text-red-800 focus:outline-none" role="menuitem" tabindex="-1" id="menu-item-0"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="-ml-1 mr-1.5 h-4 w-4 text-red-500 group-hover:text-red-700" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path> | |
| </svg>Delete</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="block hover:bg-gray-50"> | |
| <div class="px-4 py-4 sm:px-6"> | |
| <div class="grid grid-cols-12 gap-x-6 gap-y-1 flex items-center justify-between"> | |
| <div class="row-start-1 col-span-11 md:col-span-3 flex flex-col justify-center mr-2 font-normal text-gray-400 tracking-wide truncate overflow-ellipsis"><a class="text-med font-semibold leading-6 text-gray-700" href="https://rollbar.com/Rollbar/foobar123/settings/general">icicles</a> | |
| <div class="text-sm leading-5">Hey, set this up for us please. kthx</div> | |
| </div> | |
| <div class="col-span-11 md:col-span-8 flex flex-row md:justify-self-end text-sm leading-5 group"> | |
| <div class="font-normal text-gray-500 whitespace-normal">We haven't received data for this project yet. To start monitoring, | |
| <span class="font-semibold text-gray-500 text-orange-600 group-hover:text-orange-700">complete the setup</span> | |
| </div> | |
| </div> | |
| <div class="row-start-1 col-span-1 md:row-start-auto col-span-1 self-center justify-self-end"> | |
| <div> | |
| <div class="relative block text-left"> | |
| <div><button data-testid="action-dropdown-137342" class="group rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none" id="headlessui-menu-button-36" type="button" aria-haspopup="true"><span class="sr-only">Open options</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 hover:text-blue-600 group-focus:text-blue-800" aria-hidden="true"> | |
| <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path> | |
| </svg></button></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="block hover:bg-gray-50"> | |
| <div class="px-4 py-4 sm:px-6"> | |
| <div class="grid grid-cols-8 md:grid-rows-none md:grid-cols-12 gap-x-6 gap-y-3.5 sm:gap-y-3 md:gap-y-0"> | |
| <!--!-- project ----> | |
| <div class="row-start-1 col-span-6 md:col-span-3 flex flex-col justify-center mr-2 font-normal text-gray-400 tracking-wide overflow-ellipsis"> | |
| <div><a class="text-med font-semibold leading-6 text-blue-600 hover:text-blue-800" href="https://rollbar.com/Rollbar/api-monitoring/settings/general">spacebar</a></div> | |
| <div class="text-sm leading-tight">Cut the cheese fromage edam pepper jack chalk and cheese port-salut</div> | |
| </div> | |
| <!--!-- integrations ----> | |
| <div class="order-last md:order-none col-span-full sm:col-span-4 md:col-span-4 w-full justify-start flex flex-row sm:justify-end items-center space-x-2"> | |
| <a role="link" tabindex="0" href="https://rollbar.com/Rollbar/anthony-dev/settings/notifications/jira"> | |
| <img src="https://app.rollbar.com//images/integrations/enabled/jira.svg" class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" alt="Jira"></a> | |
| <a role="link" tabindex="0" href="https://rollbar.com/Rollbar/anthony-dev/settings/notifications/slack"> | |
| <img src="https://app.rollbar.com//images/integrations/enabled/slack.svg" class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" alt="Slack"></a> | |
| <a role="link" tabindex="0" href="https://rollbar.com/Rollbar/api-monitoring/settings/notifications/bitbucket"> | |
| <img src="https://app.rollbar.com//images/integrations/enabled/bitbucket.svg" class="flex-shrink-0 h-5 w-5 text-gray-400" alt="Bitbucket"></a> | |
| <a role="link" tabindex="0" href="https://rollbar.com/Rollbar/api-monitoring/settings/notifications/webhook"> | |
| <img src="https://app.rollbar.com//images/integrations/enabled/webhook.svg" class="flex-shrink-0 h-5 w-5 text-gray-400" alt="Webhook"></a> | |
| <a role="link" tabindex="0" href="https://rollbar.com/Rollbar/api-monitoring/settings/notifications/email"> | |
| <img src="https://app.rollbar.com//images/integrations/enabled/email.svg" class="flex-shrink-0 h-5 w-5 text-gray-400" alt="Email"></a> | |
| <a role="link" class="pl-6" tabindex="0" href="https://rollbar.com/Rollbar/api-monitoring/settings/notifications"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="flex-shrink-0 h-6 w-6 text-blue-600 hover:text-blue-800" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path> | |
| </svg> | |
| <span class="sr-only">Add another integration | |
| </span> | |
| </a> | |
| </div> | |
| <!--!-- users ----> | |
| <div class="col-span-full sm:col-span-4 md:col-span-3 w-full justify-start md:justify-center flex"> | |
| <a class="flex gap-x-1 justify-self-center items-center justify-center group hover:no-underline" role="link" tabindex="0" href="https://rollbar.com/Rollbar/api-monitoring/settings/collaborators"> | |
| <div class="text-sm leading-4 tracking-widest font-normal text-gray-800 group-hover:text-blue-800">34<span class="sr-only"> Users</span></div> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="flex-shrink-0 h-5 w-5 text-gray-600 group-hover:text-blue-800" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path> | |
| </svg> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full bg-blue-100 text-blue-800 group-hover:bg-blue-600"> | |
| <div class="block text-xs leading-4 tracking-wide font-normal group-hover:text-blue-100">2 Teams</div> | |
| </span> | |
| </a> | |
| </div> | |
| <!--!-- tokens ----> | |
| <div class="row-start-1 col-span-1 md:row-start-auto md:col-span-1 self-center justify-self-center"> | |
| <a role="link" tabindex="0" class="text-gray-400" href="https://rollbar.com/Rollbar/api-monitoring/settings/access_tokens"><span class="sr-only">Project Access Tokens</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" data-testid="access-token-link" class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-600 hover:text-blue-800" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path> | |
| </svg></a> | |
| </div> | |
| <!--!-- 0ptions ----> | |
| <div class="row-start-1 row-span-1 col-span-1 md:row-start-auto md:col-span-1 self-center justify-self-end"> | |
| <div> | |
| <div class="relative block text-left"> | |
| <div><button data-testid="action-dropdown-137342" class="group rounded-full flex justify-center sm:items-center text-gray-400 hover:text-gray-600 focus:outline-none" id="headlessui-menu-button-36" type="button" aria-haspopup="true"><span class="sr-only">Open options</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 hover:text-blue-600 group-focus:text-blue-800" aria-hidden="true"> | |
| <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path> | |
| </svg></button></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="block hover:bg-gray-50"> | |
| <div class="px-4 py-4 sm:px-6"> | |
| <div class="grid grid-cols-8 md:grid-rows-none md:grid-cols-12 gap-x-6 gap-y-3.5 sm:gap-y-3 md:gap-y-0"> | |
| <!--!-- project ----> | |
| <div class="row-start-1 col-span-6 md:col-span-3 flex flex-col justify-center mr-2 font-normal tracking-wide text-gray-400 overflow-ellipsis"> | |
| <div><a class="text-med font-semibold leading-6 text-blue-600 hover:text-blue-800" href="https://rollbar.com/Rollbar/api-monitoring/settings/general">rollballing</a></div> | |
| <div class="text-sm leading-tight">No description, you say?</div> | |
| </div> | |
| <!--!-- integrations ----> | |
| <div class="order-last md:order-none col-span-full sm:col-span-4 md:col-span-4 w-full justify-start flex flex-row sm:justify-end items-center space-x-2"> | |
| <a role="link" tabindex="0" href="https://rollbar.com/Rollbar/anthony-dev/settings/notifications/slack"> | |
| <img src="https://app.rollbar.com//images/integrations/enabled/slack.svg" class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" alt="Slack"></a> | |
| <a role="link" tabindex="0" href="https://rollbar.com/Rollbar/api-monitoring/settings/notifications/email"> | |
| <img src="https://app.rollbar.com//images/integrations/enabled/email.svg" class="flex-shrink-0 h-5 w-5 text-gray-400" alt="Email"></a> | |
| <a role="link" class="pl-6" tabindex="0" href="https://rollbar.com/Rollbar/api-monitoring/settings/notifications"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="flex-shrink-0 h-6 w-6 text-blue-600 hover:text-blue-800" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path> | |
| </svg> | |
| <span class="sr-only">Add another integration | |
| </span> | |
| </a> | |
| </div> | |
| <!--!-- users ----> | |
| <div class="col-span-full sm:col-span-4 md:col-span-3 w-full justify-start md:justify-center flex"> | |
| <a class="flex gap-x-1.5 justify-self-center items-center justify-center group hover:no-underline" role="link" tabindex="0" href="https://rollbar.com/Rollbar/api-monitoring/settings/collaborators"> | |
| <div class="text-sm leading-4 tracking-widest font-normal text-gray-800 group-hover:text-blue-800">34<span class="sr-only"> Users</span></div> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="flex-shrink-0 h-5 w-5 text-gray-600 group-hover:text-blue-800" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path> | |
| </svg> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full bg-blue-100 text-blue-800 group-hover:bg-blue-600"> | |
| <div class="block text-xs leading-4 tracking-wide font-normal group-hover:text-blue-100">2 Teams</div> | |
| </span> | |
| </a> | |
| </div> | |
| <!--!-- tokens ----> | |
| <div class="row-start-1 col-span-1 md:row-start-auto md:col-span-1 self-center justify-self-center"> | |
| <a role="link" tabindex="0" class="text-gray-400" href="https://rollbar.com/Rollbar/api-monitoring/settings/access_tokens"><span class="sr-only">Project Access Tokens</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" data-testid="access-token-link" class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-600 hover:text-blue-800" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path> | |
| </svg></a> | |
| </div> | |
| <!--!-- 0ptions ----> | |
| <div class="row-start-1 row-span-1 col-span-1 md:row-start-auto md:col-span-1 self-center justify-self-end"> | |
| <div> | |
| <div class="relative block text-left"> | |
| <div><button data-testid="action-dropdown-137342" class="group rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none" id="headlessui-menu-button-36" type="button" aria-haspopup="true"><span class="sr-only">Open options</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 hover:text-blue-600 group-focus:text-blue-800" aria-hidden="true"> | |
| <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path> | |
| </svg></button></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| <li> | |
| <div class="block hover:bg-gray-50"> | |
| <div class="px-4 py-4 sm:px-6"> | |
| <div class="grid grid-cols-8 md:grid-rows-none md:grid-cols-12 gap-x-6 gap-y-3.5 sm:gap-y-3 md:gap-y-0"> | |
| <!--!-- project ----> | |
| <div class="row-start-1 col-span-6 md:col-span-3 flex flex-col justify-center mr-2 font-normal tracking-wider text-gray-400 overflow-ellipsis"> | |
| <div><a class="text-med font-semibold leading-6 text-blue-600 hover:text-blue-800" href="https://rollbar.com/Rollbar/api-monitoring/settings/general">not-a-robot</a></div> | |
| <div class="text-sm leading-tight">When the cheese comes out, everybody's happy</div> | |
| </div> | |
| <!--!-- integrations ----> | |
| <div class="order-last md:order-none col-span-full sm:col-span-4 md:col-span-4 w-full justify-start flex flex-row sm:justify-end items-center space-x-2"> | |
| <a role="link" tabindex="0" href="https://rollbar.com/Rollbar/anthony-dev/settings/notifications/jira"> | |
| <img src="https://app.rollbar.com//images/integrations/enabled/jira.svg" class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" alt="Jira"></a> | |
| <a role="link" tabindex="0" href="https://rollbar.com/Rollbar/anthony-dev/settings/notifications/slack"> | |
| <img src="https://app.rollbar.com//images/integrations/enabled/slack.svg" class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" alt="Slack"></a> | |
| <a role="link" tabindex="0" href="https://rollbar.com/Rollbar/api-monitoring/settings/notifications/webhook"> | |
| <img src="https://app.rollbar.com//images/integrations/enabled/webhook.svg" class="flex-shrink-0 h-5 w-5 text-gray-400" alt="Webhook"></a> | |
| <a role="link" class="pl-6" tabindex="0" href="https://rollbar.com/Rollbar/api-monitoring/settings/notifications"> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="flex-shrink-0 h-6 w-6 text-blue-600 hover:text-blue-800" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path> | |
| </svg> | |
| <span class="sr-only">Add another integration | |
| </span> | |
| </a> | |
| </div> | |
| <!--!-- users ----> | |
| <div class="col-span-full sm:col-span-4 md:col-span-3 w-full justify-start md:justify-center flex"> | |
| <a class="flex gap-x-1.5 justify-self-center items-center justify-center group hover:no-underline" role="link" tabindex="0" href="https://rollbar.com/Rollbar/api-monitoring/settings/collaborators"> | |
| <div class="text-sm leading-4 tracking-widest font-normal text-gray-800 group-hover:text-blue-800">34<span class="sr-only"> Users</span></div> | |
| <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="flex-shrink-0 h-5 w-5 text-gray-600 group-hover:text-blue-800" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path> | |
| </svg> | |
| <span class="inline-flex items-center px-2.5 py-0.5 rounded-full bg-blue-100 text-blue-800 group-hover:bg-blue-600"> | |
| <div class="block text-xs leading-4 tracking-widest font-normal group-hover:text-blue-100">2 Teams</div> | |
| </span> | |
| </a> | |
| </div> | |
| <!--!-- tokens ----> | |
| <div class="row-start-1 col-span-1 md:row-start-auto md:col-span-1 self-center justify-self-center"> | |
| <a role="link" tabindex="0" class="text-gray-400" href="https://rollbar.com/Rollbar/api-monitoring/settings/access_tokens"><span class="sr-only">Project Access Tokens</span><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" data-testid="access-token-link" class="flex-shrink-0 mr-1.5 h-5 w-5 text-gray-600 hover:text-blue-800" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path> | |
| </svg></a> | |
| </div> | |
| <!--!-- 0ptions ----> | |
| <div class="row-start-1 row-span-1 col-span-1 md:row-start-auto md:col-span-1 self-center justify-self-end"> | |
| <div> | |
| <div class="relative block text-left"> | |
| <div><button data-testid="action-dropdown-137342" class="group rounded-full flex items-center text-gray-400 hover:text-gray-600 focus:outline-none" id="headlessui-menu-button-36" type="button" aria-haspopup="true"><span class="sr-only">Open options</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 hover:text-blue-600 group-focus:text-blue-800" aria-hidden="true"> | |
| <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"></path> | |
| </svg></button></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </li> | |
| </ol> | |
| </div> | |
| </div><div class="bg-white overflow-hidden rounded-md border border-blue-100"> | |
| <ul role="list" class="divide-y divide-blue-100"> | |
| <li> | |
| <a href="#" class="block hover:bg-blue-50 focus:outline-none focus:bg-blue-50" aria-label="View Access Tokens" title="View Access Tokens"> | |
| <div class="flex items-center px-4 py-4 sm:px-6"> | |
| <div class="min-w-0 flex-1 flex items-center"> | |
| <div class="hidden flex-shrink-0"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="flex-shrink-0 h-12 w-12 rounded-sm svgicon svgicon-frameworkpyramid "> | |
| <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path> | |
| <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path> | |
| <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path> | |
| <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path> | |
| </svg> | |
| <img class="hidden h-12 w-12 rounded-full" src="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" alt=""> | |
| </div> | |
| <div class="min-w-0 flex-1 md:grid md:grid-cols-8 md:gap-4"> | |
| <div class="md:col-span-5"> | |
| <p class="text-med leading-6 font-semibold tracking-wide text-gray-700 capitalize truncate">Project access token</p> | |
| <p class="flex items-center text-sm text-gray-400"> | |
| <!-- Heroicon name: solid/mail --> | |
| <svg class="flex-shrink-0 mr-1 h-4 w-4 text-green-400" viewBox="0 0 20 20" fill="currentColor" xmlns="http://www.w3.org/2000/svg"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path> | |
| </svg> | |
| <span class="mr-1 truncate">52,698 requests processed</span> | |
| <span class="text-gray-600 truncate">∙ 4 Active tokens</span> | |
| </p> | |
| </div> | |
| <div class="md:col-span-3 hidden h-full md:block text-sm text-blue-600 capitalize"> | |
| <div class="flex flex-col justify-center items-end h-full"> | |
| <!-- Toggle DEMO only: On --> | |
| <button type="button" class="hidden relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-600 bg-blue-600" x-data="{ on: false }" role="switch" aria-checked="true" :aria-checked="on.toString()" @click="on = !on" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'bg-indigo-600': on, 'bg-gray-200': !(on) }"> | |
| <span class="sr-only">Use setting</span> | |
| <span class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 translate-x-5" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'translate-x-5': on, 'translate-x-0': !(on) }"> | |
| <span class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity opacity-0 ease-out duration-100" aria-hidden="true" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'opacity-0 ease-out duration-100': on, 'opacity-100 ease-in duration-200': !(on) }"> | |
| <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12"> | |
| <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> | |
| </svg> | |
| </span> | |
| <span class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity opacity-100 ease-in duration-200" aria-hidden="true" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'opacity-100 ease-in duration-200': on, 'opacity-0 ease-out duration-100': !(on) }"> | |
| <svg class="h-3 w-3 text-blue-600" fill="currentColor" viewBox="0 0 12 12"> | |
| <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"></path> | |
| </svg> | |
| </span> | |
| </span> | |
| </button> | |
| <!-- Toggle Default: Off --> | |
| <!-- Enabled: "bg-blue-600", Not Enabled: "bg-gray-200" --> | |
| <button type="button" class="hidden bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-600" role="switch" aria-checked="false"> | |
| <span class="sr-only">Use setting</span> | |
| <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" --> | |
| <span class="translate-x-0 pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"> | |
| <!-- Enabled: "opacity-0 ease-out duration-100", Not Enabled: "opacity-100 ease-in duration-200" --> | |
| <span class="opacity-100 ease-in duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity" aria-hidden="true"> | |
| <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12"> | |
| <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> | |
| </svg> | |
| </span> | |
| <!-- Enabled: "opacity-100 ease-in duration-200", Not Enabled: "opacity-0 ease-out duration-100" --> | |
| <span class="opacity-0 ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity" aria-hidden="true"> | |
| <svg class="h-3 w-3 text-blue-600" fill="currentColor" viewBox="0 0 12 12"> | |
| <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"></path> | |
| </svg> | |
| </span> | |
| </span> | |
| </button> | |
| <!-- Button --> | |
| <button type="button" class="hidden group inline-flex items-center border transition duration-300 button-ease shadow-none px-3.5 py-2 border border-gray-400 text-sm leading-5 tracking-wider font-semibold text-gray-600 bg-white rounded-3xl hover:bg-white hover:border-2 hover:border-blue-300 hover:text-gray-800 focus:outline-none focus:ring-3 focus:ring-offset-1 focus:ring-offset-white focus:ring-blue-300 focus:border-blue-300">Edit Details</button> | |
| <!-- Text --> | |
| <p class="font-medium tracking-wide">View access tokens</p> | |
| <p class="hidden mt-2 flex items-center"> | |
| <!-- Heroicon name: solid/check-circle --> | |
| <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path> | |
| </svg>View access tokens | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <!-- Heroicon name: solid/chevron-right --> | |
| <svg class="ml-2 mt-0.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path> | |
| </svg> | |
| </div> | |
| </div> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="block hover:bg-blue-50 focus:outline-none focus:bg-blue-50" aria-label="Configure Environments" title="Configure Environments"> | |
| <div class="flex items-center px-4 py-4 sm:px-6"> | |
| <div class="min-w-0 flex-1 flex items-center"> | |
| <div class="hidden flex-shrink-0"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="flex-shrink-0 h-12 w-12 rounded-sm svgicon svgicon-frameworkpyramid "> | |
| <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path> | |
| <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path> | |
| <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path> | |
| <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path> | |
| </svg> | |
| <img class="hidden h-12 w-12 rounded-full" src="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" alt=""> | |
| </div> | |
| <div class="min-w-0 flex-1 md:grid md:grid-cols-8 md:gap-4"> | |
| <div class="md:col-span-5"> | |
| <p class="text-med leading-6 font-semibold tracking-wide text-gray-700 capitalize truncate">Environments and Auto-Resolve Rules</p> | |
| <p class="flex items-center text-sm text-gray-400"> | |
| <!-- Heroicon name: solid/mail --> | |
| <svg class="hidden flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path> | |
| <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path> | |
| </svg> | |
| <span class="mr-1 truncate">5 visible environments</span> | |
| <span class="text-gray-600 truncate">∙ Auto-Resolve is enabled</span> | |
| </p> | |
| </div> | |
| <div class="md:col-span-3 hidden h-full md:block text-sm text-blue-600 capitalize"> | |
| <div class="flex flex-col justify-center items-end h-full"> | |
| <!-- Toggle DEMO only: On --> | |
| <button type="button" class="hidden relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-600 bg-blue-600" x-data="{ on: false }" role="switch" aria-checked="true" :aria-checked="on.toString()" @click="on = !on" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'bg-indigo-600': on, 'bg-gray-200': !(on) }"> | |
| <span class="sr-only">Use setting</span> | |
| <span class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 translate-x-5" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'translate-x-5': on, 'translate-x-0': !(on) }"> | |
| <span class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity opacity-0 ease-out duration-100" aria-hidden="true" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'opacity-0 ease-out duration-100': on, 'opacity-100 ease-in duration-200': !(on) }"> | |
| <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12"> | |
| <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> | |
| </svg> | |
| </span> | |
| <span class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity opacity-100 ease-in duration-200" aria-hidden="true" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'opacity-100 ease-in duration-200': on, 'opacity-0 ease-out duration-100': !(on) }"> | |
| <svg class="h-3 w-3 text-blue-600" fill="currentColor" viewBox="0 0 12 12"> | |
| <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"></path> | |
| </svg> | |
| </span> | |
| </span> | |
| </button> | |
| <!-- Toggle Default: Off --> | |
| <!-- Enabled: "bg-blue-600", Not Enabled: "bg-gray-200" --> | |
| <button type="button" class="hidden bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-600" role="switch" aria-checked="false"> | |
| <span class="sr-only">Use setting</span> | |
| <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" --> | |
| <span class="translate-x-0 pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"> | |
| <!-- Enabled: "opacity-0 ease-out duration-100", Not Enabled: "opacity-100 ease-in duration-200" --> | |
| <span class="opacity-100 ease-in duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity" aria-hidden="true"> | |
| <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12"> | |
| <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> | |
| </svg> | |
| </span> | |
| <!-- Enabled: "opacity-100 ease-in duration-200", Not Enabled: "opacity-0 ease-out duration-100" --> | |
| <span class="opacity-0 ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity" aria-hidden="true"> | |
| <svg class="h-3 w-3 text-blue-600" fill="currentColor" viewBox="0 0 12 12"> | |
| <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"></path> | |
| </svg> | |
| </span> | |
| </span> | |
| </button> | |
| <!-- Button --> | |
| <button type="button" class="hidden group inline-flex items-center border transition duration-300 button-ease shadow-none px-3.5 py-2 border border-gray-400 text-sm leading-5 tracking-wider font-semibold text-gray-600 bg-white rounded-3xl hover:bg-white hover:border-2 hover:border-blue-300 hover:text-gray-800 focus:outline-none focus:ring-3 focus:ring-offset-1 focus:ring-offset-white focus:ring-blue-300 focus:border-blue-300">Edit Details</button> | |
| <!-- Text --> | |
| <p class="font-medium tracking-wide">Configure Environments</p> | |
| <p class="hidden mt-2 flex items-center"> | |
| <!-- Heroicon name: solid/check-circle --> | |
| <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path> | |
| </svg>View access tokens | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <!-- Heroicon name: solid/chevron-right --> | |
| <svg class="ml-2 mt-0.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path> | |
| </svg> | |
| </div> | |
| </div> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="bg-white overflow-hidden rounded-md border border-blue-100"> | |
| <ul role="list" class="divide-y divide-blue-100"> | |
| <li> | |
| <a href="#" class="block hover:bg-blue-50 focus:outline-none focus:bg-blue-50" aria-label="Edit Deploys Timeout" title="Edit Deploys Timeout"> | |
| <div class="flex items-center px-4 py-4 sm:px-6"> | |
| <div class="min-w-0 flex-1 flex items-center"> | |
| <div class="hidden flex-shrink-0"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="flex-shrink-0 h-12 w-12 rounded-sm svgicon svgicon-frameworkpyramid "> | |
| <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path> | |
| <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path> | |
| <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path> | |
| <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path> | |
| </svg> | |
| <img class="hidden h-12 w-12 rounded-full" src="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" alt=""> | |
| </div> | |
| <div class="min-w-0 flex-1 grid grid-cols-1 gap-y-3 sm:grid-cols-8 md:gap-4 justify-start"> | |
| <div class="sm:col-span-5"> | |
| <p class="text-med leading-6 font-semibold tracking-wide text-gray-700 capitalize truncate">Deploys timeout</p> | |
| <p class="flex items-center text-sm text-gray-400"> | |
| <!-- Heroicon name: solid/mail --> | |
| <svg class="hidden flex-shrink-0 mr-1.5 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path> | |
| <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path> | |
| </svg> | |
| <span class="mr-1 truncate">Configure timeout for reported deploys</span> | |
| <span class="text-gray-600 truncate">∙ Timeout 60min</span> | |
| </p> | |
| </div> | |
| <div class="sm:col-span-3 /*hidden*/ h-full block text-sm text-blue-600 capitalize"> | |
| <div class="flex flex-col justify-center items-start sm:items-end h-full"> | |
| <!-- Toggle DEMO only: On --> | |
| <button type="button" class="hidden relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-600 bg-blue-600" x-data="{ on: false }" role="switch" aria-checked="true" :aria-checked="on.toString()" @click="on = !on" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'bg-indigo-600': on, 'bg-gray-200': !(on) }"> | |
| <span class="sr-only">Use setting</span> | |
| <span class="pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200 translate-x-5" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'translate-x-5': on, 'translate-x-0': !(on) }"> | |
| <span class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity opacity-0 ease-out duration-100" aria-hidden="true" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'opacity-0 ease-out duration-100': on, 'opacity-100 ease-in duration-200': !(on) }"> | |
| <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12"> | |
| <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> | |
| </svg> | |
| </span> | |
| <span class="absolute inset-0 h-full w-full flex items-center justify-center transition-opacity opacity-100 ease-in duration-200" aria-hidden="true" x-state:on="Enabled" x-state:off="Not Enabled" :class="{ 'opacity-100 ease-in duration-200': on, 'opacity-0 ease-out duration-100': !(on) }"> | |
| <svg class="h-3 w-3 text-blue-600" fill="currentColor" viewBox="0 0 12 12"> | |
| <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"></path> | |
| </svg> | |
| </span> | |
| </span> | |
| </button> | |
| <!-- Toggle Default: Off --> | |
| <!-- Enabled: "bg-blue-600", Not Enabled: "bg-gray-200" --> | |
| <button type="button" class="hidden bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-blue-600" role="switch" aria-checked="false"> | |
| <span class="sr-only">Use setting</span> | |
| <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" --> | |
| <span class="translate-x-0 pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"> | |
| <!-- Enabled: "opacity-0 ease-out duration-100", Not Enabled: "opacity-100 ease-in duration-200" --> | |
| <span class="opacity-100 ease-in duration-200 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity" aria-hidden="true"> | |
| <svg class="h-3 w-3 text-gray-400" fill="none" viewBox="0 0 12 12"> | |
| <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> | |
| </svg> | |
| </span> | |
| <!-- Enabled: "opacity-100 ease-in duration-200", Not Enabled: "opacity-0 ease-out duration-100" --> | |
| <span class="opacity-0 ease-out duration-100 absolute inset-0 h-full w-full flex items-center justify-center transition-opacity" aria-hidden="true"> | |
| <svg class="h-3 w-3 text-blue-600" fill="currentColor" viewBox="0 0 12 12"> | |
| <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z"></path> | |
| </svg> | |
| </span> | |
| </span> | |
| </button> | |
| <!-- Button --> | |
| <button type="button" class="group inline-flex items-center transition duration-300 button-ease shadow-none px-3.5 py-2 border border-gray-300 text-sm leading-5 tracking-wide font-medium text-gray-600 bg-transparent rounded-full hover:border-gray-500 hover:text-gray-800 focus:outline-none focus:ring-1 focus:ring-offset-0 focus:ring-blue-600 focus:border-blue-400">Edit Timeout</button> | |
| <!-- Text --> | |
| <p class="hidden font-semibold tracking-widest">View access tokens</p> | |
| <p class="hidden mt-2 flex items-center"> | |
| <!-- Heroicon name: solid/check-circle --> | |
| <svg class="flex-shrink-0 mr-1.5 h-5 w-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path> | |
| </svg>View access tokens | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden"> | |
| <!-- Heroicon name: solid/chevron-right --> | |
| <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path> | |
| </svg> | |
| </div> | |
| </div> | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <ul role="list" class="hidden py-4 space-y-2 sm:px-6 sm:space-y-4 lg:px-8"> | |
| <li class="bg-white px-4 py-6 shadow sm:rounded-lg sm:px-6"> | |
| <div class="sm:flex sm:justify-between sm:items-baseline"> | |
| <h3 class="text-base font-medium"> | |
| <span class="text-gray-900">Joe Armstrong</span> | |
| <span class="text-gray-600">wrote</span> | |
| </h3> | |
| <p class="mt-1 text-sm text-gray-600 whitespace-nowrap sm:mt-0 sm:ml-3"> | |
| <time datetime="2021-01-28T19:24">Yesterday at 7:24am</time> | |
| </p> | |
| </div> | |
| <div class="mt-4 space-y-6 text-sm text-gray-800"> | |
| <p>Thanks so much! Can't wait to try it out.</p> | |
| </div> | |
| </li> | |
| <li class="bg-white px-4 py-6 shadow sm:rounded-lg sm:px-6"> | |
| <div class="sm:flex sm:justify-between sm:items-baseline"> | |
| <h3 class="text-base font-medium"> | |
| <span class="text-gray-900">Monica White</span> | |
| <span class="text-gray-600">wrote</span> | |
| </h3> | |
| <p class="mt-1 text-sm text-gray-600 whitespace-nowrap sm:mt-0 sm:ml-3"> | |
| <time datetime="2021-01-27T16:35">Wednesday at 4:35pm</time> | |
| </p> | |
| </div> | |
| <div class="mt-4 space-y-6 text-sm text-gray-800"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada at ultricies tincidunt elit et, enim. Habitant nunc, adipiscing non fermentum, sed est a, aliquet. Lorem in vel libero vel augue aliquet dui commodo.</p> | |
| <p>Nec malesuada sed sit ut aliquet. Cras ac pharetra, sapien purus vitae vestibulum auctor faucibus ullamcorper. Leo quam tincidunt porttitor neque, velit sed. Tortor mauris ornare ut tellus sed aliquet amet venenatis condimentum. Convallis accumsan et nunc eleifend.</p> | |
| <p><strong style="font-weight: 600;">Monica White</strong><br>Customer Service</p> | |
| </div> | |
| </li> | |
| <li class="bg-white px-4 py-6 shadow sm:rounded-lg sm:px-6"> | |
| <div class="sm:flex sm:justify-between sm:items-baseline"> | |
| <h3 class="text-base font-medium"> | |
| <span class="text-gray-900">Joe Armstrong</span> | |
| <span class="text-gray-600">wrote</span> | |
| </h3> | |
| <p class="mt-1 text-sm text-gray-600 whitespace-nowrap sm:mt-0 sm:ml-3"> | |
| <time datetime="2021-01-27T16:09">Wednesday at 4:09pm</time> | |
| </p> | |
| </div> | |
| <div class="mt-4 space-y-6 text-sm text-gray-800"> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada at ultricies tincidunt elit et, enim. Habitant nunc, adipiscing non fermentum, sed est a, aliquet. Lorem in vel libero vel augue aliquet dui commodo.</p> | |
| <p>Nec malesuada sed sit ut aliquet. Cras ac pharetra, sapien purus vitae vestibulum auctor faucibus ullamcorper. Leo quam tincidunt porttitor neque, velit sed. Tortor mauris ornare ut tellus sed aliquet amet venenatis condimentum. Convallis accumsan et nunc eleifend.</p> | |
| <p>– Joe</p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </section> | |
| <input id="collapsible-filter" class="toggle" type="checkbox" checked=""><label for="collapsible-filter" class="group leftbar-toggle block origin-top-left absolute -ml-4 lg:left-60 /*xl:left-72*/ hover:text-blue-800 focus:text-blue-800 focus:outline-none" tabindex="0"><div class="group transition duration-300 button-ease mt-4 bg-white p-1.5 rounded-md shadow-sm text-gray-700 border border-gray-100 hover:bg-gray-600 hover:border-transparent focus:outline-none focus:text-gray-700" aria-label="Hide Filters" title="Hide Filters"> | |
| <svg class="transition duration-300 button-ease h-4 w-4 group-hover:text-white" x-description="Heroicon name: solid/chevron-double-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M15.707 15.707a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 010 1.414zm-6 0a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 011.414 1.414L5.414 10l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path> | |
| </svg> | |
| <span class="sr-only">Minimize Filters</span> | |
| </div></label><!--- Layout: Sidebar ---><aside class="h-full lg:flex lg:flex-shrink-0 lg:flex-col justify-between hidden lg:block lg:order-first collapsible-filter"> | |
| <div class="h-full relative flex flex-col lg:w-60 /*xl:w-72*/ border-r border-gray-100 bg-transparent"> | |
| <div class="flex-shrink-0"> | |
| <!-- Nav Page Title: Currently hidden --> | |
| <div class="h-16 bg-white bg-opacity-50 flex flex-col justify-center px-4 sm:px-6 hidden"> | |
| <div class="flex items-baseline space-x-3"> | |
| <h2 class="text-2xl font-medium text-gray-900">Projects</h2> | |
| <p class="hidden text-sm font-normal text-gray-500">10 messages</p> | |
| </div> | |
| </div> | |
| <div class="hidden border-t border-b border-gray-200 bg-gray-50 px-6 py-2 text-sm font-medium text-gray-500">Text title</div> | |
| <div class="border-t-0 border-b border-gray-100 bg-white px-3 2xl:px-4 py-2.5 h-16 text-sm font-medium text-gray-500 flex justify-center"> | |
| <button data-testid="dropdown-button" class="group relative w-full pl-2.5 pr-8 py-2 text-left cursor-default bg-blue-100 shadow-none border border-transparent text-gray-700 text-sm leading-5 font-semibold tracking-wide placeholder-gray-400 hover:bg-blue-200 hover:bg-opacity-60 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 focus:border-blue-400 focus:bg-blue-100 rounded-md" id="headlessui-listbox-button-2" type="button" aria-haspopup="true" aria-labelledby="headlessui-listbox-label-1 headlessui-listbox-button-2"><span class="flex items-center justify-between"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="flex-shrink-0 h-6 w-6 rounded-md svgicon svgicon-frameworkpyramid hidden"> | |
| <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path> | |
| <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path> | |
| <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path> | |
| <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path> | |
| </svg> | |
| <img src="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" alt="" class="flex-shrink-0 h-6 w-6 rounded-full hidden"> | |
| <span class="block truncate">mox-web</span><span class="flex flex-shrink-0 -space-x-2 overflow-hidden ml-3 mr-1.5" style=" | |
| display: none; | |
| "> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworkpyramid"> | |
| <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path> | |
| <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path> | |
| <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path> | |
| <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-node-js" class="bg-white inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworknodejs"> | |
| <path fill="#83cd29" d="M463.6 113.4L276.9 5c-11.8-6.7-27.1-6.7-39 0L49.2 113.4c-12.2 7-20.8 20.1-20.8 34.2v216.5c0 14.1 8.8 27.2 21 34.2l49.9 28.3c23.8 11.7 32.3 11.7 43.1 11.7 35.3 0 55.4-21.3 55.4-58.6V166.1c0-3-1.6-7.5-4.5-7.5h-23.8c-3 0-9.8 4.5-9.8 7.5v213.8c0 16.5-14.9 32.9-42.8 19l-51.5-29.7c-1.8-1-3.1-2.9-3.1-5V147.6c0-2 2.4-4.1 4.2-5.1L254.6 34.3c1.8-1 4.3-1 6.1 0l185.8 108.2c1.8 1.1 1.2 3.1 1.2 5.2v216.5c0 2.1.8 4.1-1 5.1L260 477.5c-1.6 1-3.6 1-5.3 0L206.8 449c-1.4-.8-3.2-1.1-4.5-.4-13.3 7.5-15.8 8.6-28.3 12.9-3.1 1.1-7.6 2.9 1.7 8.2l62.7 37.1c6 3.5 12.8 5.3 19.7 5.3 7 0 13.8-1.8 19.8-5.3l185.8-108.3c12.2-7.1 17.9-20.2 17.9-34.2V147.6c-.1-14-5.8-27.1-18-34.2zM316 329.9c-49.7 0-60.6-13.7-64.2-38.4-.4-2.7-2.7-5.8-5.4-5.8h-24.3c-3 0-5.4 3.6-5.4 6.6 0 31.6 17.2 69.9 99.3 69.9 59.4 0 93.5-23.1 93.5-64 0-40.5-27.4-51.2-85-58.8-58.3-7.7-64.2-11.6-64.2-25.2 0-11.3 5-26.3 48.2-26.3 38.6 0 52.8 8.3 58.6 34.3.5 2.4 2.7 4.2 5.3 4.2h24.4c1.5 0 2.9-.6 4-1.7 1-1.2 1.6-2.6 1.4-4.1-3.8-44.7-33.5-65.6-93.6-65.6-53.5 0-85.4 22.6-85.4 60.4 0 41.1 31.7 52.4 83.1 57.5 61.4 6 66.2 15 66.2 27.1-.1 20.9-17 29.9-56.5 29.9z"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-browser-js" class="bg-white inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworkbrowserjs "> | |
| <path fill="#f0db4f" d="M0 0h512v512H0z"></path> | |
| <path fill="#323330" d="M470.1 389.89c-3.75-23.36-19-43-64.1-61.28-15.67-7.2-33.15-12.35-38.35-24.23-1.85-6.91-2.1-10.81-.93-15 3.36-13.58 19.57-17.81 32.42-13.92 8.27 2.77 16.1 9.15 20.83 19.32 22.09-14.31 22-14.21 37.47-24-5.64-8.76-8.66-12.8-12.36-16.55-13.28-14.84-31.39-22.48-60.35-21.9l-15.08 1.95c-14.46 3.65-28.23 11.24-36.31 21.41-24.24 27.5-17.32 75.63 12.17 95.44 29.05 21.81 71.74 26.77 77.19 47.16 5.3 25-18.35 33.05-41.86 30.18-17.32-3.6-27-12.41-37.38-28.42-19.17 11.09-19.17 11.09-38.88 22.43 4.67 10.22 9.58 14.85 17.42 23.7 37.09 37.62 129.9 35.77 146.54-21.17.68-2.01 5.16-15.01 1.56-35.12zM278.34 235.32h-47.89l-.2 123.81c0 26.33 1.37 50.47-2.92 57.86-7 14.56-25.16 12.75-33.43 9.93-8.42-4.14-12.71-10-17.67-18.34-1.36-2.39-2.38-4.24-2.72-4.38L134.57 428c6.47 13.29 16 24.82 28.23 32.32 18.25 10.95 42.77 14.31 68.43 8.42 16.69-4.87 31.1-14.94 38.64-30.27 10.9-20.1 8.56-44.44 8.47-71.35.24-43.86 0-87.76 0-131.8z"></path> | |
| </svg> | |
| </span></span><span class="group ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400 group-hover:text-gray-600" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> | |
| </svg></span></button> | |
| </div> | |
| </div> | |
| <!-- Left content starts here --> | |
| <nav aria-label="Projects Menu" class="min-h-0 flex-1 overflow-y-auto"> | |
| <ul role="list" class="border-b border-gray-100 divide-y divide-blue-50"> | |
| <li class="relative bg-white py-5 px-6 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="flex justify-between space-x-3"> | |
| <div class="min-w-0 flex-1"> | |
| <div class="block focus:outline-none"> | |
| <span class="hidden absolute inset-0" aria-hidden="true"></span> | |
| <div class="flex space-x-2"> | |
| <svg class="flex-shrink-0 h-4 w-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path> | |
| </svg> | |
| <span class="text-xs uppercase font-semibold tracking-widest text-gray-700 pb-1 border-b border-blue-100"> | |
| Project | |
| </span> | |
| </div> | |
| <p class="hidden text-xs uppercase font-semibold tracking-widest text-blue-600 pb-1">Project</p> | |
| <p class="hidden text-sm text-gray-500 truncate">Velit placeat sit ducimus non sed</p> | |
| </div> | |
| </div> | |
| <time datetime="2021-01-27T16:35" class="hidden flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time> | |
| </div> | |
| <div class="flex mt-1 grid space-y-0.5 text-sm font-normal text-gray-800"> | |
| <a class="px-3 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="General" title="General">General</a> | |
| <a class="px-3 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="Integrations" title="Integrations">Integrations</a> | |
| <a class="px-3 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="Collaborators" title="Collaborators">Collaborators</a> | |
| </div> | |
| </li> | |
| <li class="relative bg-white py-5 px-6 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="flex justify-between space-x-3"> | |
| <div class="min-w-0 flex-1"> | |
| <div class="block focus:outline-none"> | |
| <span class="hidden absolute inset-0" aria-hidden="true"></span> | |
| <div class="flex space-x-2"> | |
| <svg class="flex-shrink-0 h-4 w-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> | |
| </svg> | |
| <span class="text-xs uppercase font-semibold tracking-widest text-gray-700 pb-1 border-b border-blue-100">Symbol Mapping</span> | |
| </div> | |
| <p class="hidden text-xs uppercase font-semibold tracking-widest text-blue-600 pb-1">Symbol Mapping</p> | |
| <p class="hidden text-sm text-gray-500 truncate">Velit placeat sit ducimus non sed</p> | |
| </div> | |
| </div> | |
| <time datetime="2021-01-27T16:35" class="hidden flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time> | |
| </div> | |
| <div class="flex mt-1 grid space-y-0.5 text-sm font-normal text-gray-800"> | |
| <a class="px-3 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="Source Maps" title="Source Maps">Source Maps</a> | |
| <a class="px-3 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="dSYMs" title="dSYMs">dSYMs</a> | |
| <a class="px-3 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="ProGuard" title="ProGuard">ProGuard</a> | |
| </div> | |
| </li> | |
| <li class="relative bg-white py-5 px-6 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="flex justify-between space-x-3"> | |
| <div class="min-w-0 flex-1"> | |
| <div class="block focus:outline-none"> | |
| <span class="hidden absolute inset-0" aria-hidden="true"></span> | |
| <div class="flex space-x-2"> | |
| <svg class="flex-shrink-0 h-4 w-4 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path> | |
| </svg> | |
| <span class="text-xs uppercase font-semibold tracking-widest text-gray-700 pb-1 border-b border-blue-100">Subscription</span> | |
| </div> | |
| <p class="hidden text-xs uppercase font-semibold tracking-widest text-blue-600 pb-1">Advanced</p> | |
| <p class="hidden text-sm text-gray-500 truncate">Velit placeat sit ducimus non sed</p> | |
| </div> | |
| </div> | |
| <time datetime="2021-01-27T16:35" class="hidden flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time> | |
| </div> | |
| <div class="flex mt-1 grid space-y-0.5 text-sm font-normal text-gray-800"> | |
| <a class="px-3 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md" href="https://codepen.io/heyatsuko/full/WNZZmzp" aria-label="My Plan" title="My Plan">My Plan</a> | |
| <a class="px-3 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md" href="#billing" aria-label="Billing Info" title="IP Blocklist">Billing Info</a> | |
| <a class="px-3 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="Usage" title="name">Usage</a> | |
| <a class="px-3 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="Invoices" title="name">Invoices</a></div> | |
| </li> | |
| </ul> | |
| </nav> | |
| <!-- Base Reference - HIDDEN --> | |
| <nav aria-label="Conversation list" class="hidden min-h-0 flex-1 overflow-y-auto"> | |
| <ul role="list" class="border-b border-gray-200 divide-y divide-gray-200"> | |
| <li class="relative bg-white py-5 px-6 hover:bg-gray-50 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="flex justify-between space-x-3"> | |
| <div class="min-w-0 flex-1"> | |
| <a href="#" class="block focus:outline-none"> | |
| <span class="absolute inset-0" aria-hidden="true"></span> | |
| <p class="text-sm font-medium text-gray-900 truncate">Gloria Roberston</p> | |
| <p class="text-sm text-gray-500 truncate">Velit placeat sit ducimus non sed</p> | |
| </a> | |
| </div> | |
| <time datetime="2021-01-27T16:35" class="flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time> | |
| </div> | |
| <div class="mt-1"> | |
| <p class="line-clamp-2 text-sm text-gray-600"> | |
| Doloremque dolorem maiores assumenda dolorem facilis. Velit vel in a rerum natus facere. Enim rerum eaque qui facilis. Numquam laudantium sed id dolores omnis in. Eos reiciendis deserunt maiores et accusamus quod dolor. | |
| </p> | |
| </div> | |
| </li> | |
| <li class="relative bg-white py-5 px-6 hover:bg-gray-50 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="flex justify-between space-x-3"> | |
| <div class="min-w-0 flex-1"> | |
| <a href="#" class="block focus:outline-none"> | |
| <span class="absolute inset-0" aria-hidden="true"></span> | |
| <p class="text-sm font-medium text-gray-900 truncate">Virginia Abshire</p> | |
| <p class="text-sm text-gray-500 truncate">Nemo mollitia repudiandae adipisci explicabo optio consequatur tempora ut nihil</p> | |
| </a> | |
| </div> | |
| <time datetime="2021-01-27T16:35" class="flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time> | |
| </div> | |
| <div class="mt-1"> | |
| <p class="line-clamp-2 text-sm text-gray-600"> | |
| Doloremque dolorem maiores assumenda dolorem facilis. Velit vel in a rerum natus facere. Enim rerum eaque qui facilis. Numquam laudantium sed id dolores omnis in. Eos reiciendis deserunt maiores et accusamus quod dolor. | |
| </p> | |
| </div> | |
| </li> | |
| <li class="relative bg-white py-5 px-6 hover:bg-gray-50 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="flex justify-between space-x-3"> | |
| <div class="min-w-0 flex-1"> | |
| <a href="#" class="block focus:outline-none"> | |
| <span class="absolute inset-0" aria-hidden="true"></span> | |
| <p class="text-sm font-medium text-gray-900 truncate">Kyle Gulgowski</p> | |
| <p class="text-sm text-gray-500 truncate">Doloremque reprehenderit et harum quas explicabo nulla architecto dicta voluptatibus</p> | |
| </a> | |
| </div> | |
| <time datetime="2021-01-27T16:35" class="flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time> | |
| </div> | |
| <div class="mt-1"> | |
| <p class="line-clamp-2 text-sm text-gray-600"> | |
| Doloremque dolorem maiores assumenda dolorem facilis. Velit vel in a rerum natus facere. Enim rerum eaque qui facilis. Numquam laudantium sed id dolores omnis in. Eos reiciendis deserunt maiores et accusamus quod dolor. | |
| </p> | |
| </div> | |
| </li> | |
| <li class="relative bg-white py-5 px-6 hover:bg-gray-50 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="flex justify-between space-x-3"> | |
| <div class="min-w-0 flex-1"> | |
| <a href="#" class="block focus:outline-none"> | |
| <span class="absolute inset-0" aria-hidden="true"></span> | |
| <p class="text-sm font-medium text-gray-900 truncate">Hattie Haag</p> | |
| <p class="text-sm text-gray-500 truncate">Eos sequi et aut ex impedit</p> | |
| </a> | |
| </div> | |
| <time datetime="2021-01-27T16:35" class="flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time> | |
| </div> | |
| <div class="mt-1"> | |
| <p class="line-clamp-2 text-sm text-gray-600"> | |
| Doloremque dolorem maiores assumenda dolorem facilis. Velit vel in a rerum natus facere. Enim rerum eaque qui facilis. Numquam laudantium sed id dolores omnis in. Eos reiciendis deserunt maiores et accusamus quod dolor. | |
| </p> | |
| </div> | |
| </li> | |
| <li class="relative bg-white py-5 px-6 hover:bg-gray-50 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="flex justify-between space-x-3"> | |
| <div class="min-w-0 flex-1"> | |
| <a href="#" class="block focus:outline-none"> | |
| <span class="absolute inset-0" aria-hidden="true"></span> | |
| <p class="text-sm font-medium text-gray-900 truncate">Wilma Glover</p> | |
| <p class="text-sm text-gray-500 truncate">Quisquam veniam explicabo</p> | |
| </a> | |
| </div> | |
| <time datetime="2021-01-27T16:35" class="flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time> | |
| </div> | |
| <div class="mt-1"> | |
| <p class="line-clamp-2 text-sm text-gray-600"> | |
| Doloremque dolorem maiores assumenda dolorem facilis. Velit vel in a rerum natus facere. Enim rerum eaque qui facilis. Numquam laudantium sed id dolores omnis in. Eos reiciendis deserunt maiores et accusamus quod dolor. | |
| </p> | |
| </div> | |
| </li> | |
| <li class="relative bg-white py-5 px-6 hover:bg-gray-50 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="flex justify-between space-x-3"> | |
| <div class="min-w-0 flex-1"> | |
| <a href="#" class="block focus:outline-none"> | |
| <span class="absolute inset-0" aria-hidden="true"></span> | |
| <p class="text-sm font-medium text-gray-900 truncate">Dolores Morissette</p> | |
| <p class="text-sm text-gray-500 truncate">Est ratione molestiae modi maiores consequatur eligendi et excepturi magni</p> | |
| </a> | |
| </div> | |
| <time datetime="2021-01-27T16:35" class="flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time> | |
| </div> | |
| <div class="mt-1"> | |
| <p class="line-clamp-2 text-sm text-gray-600"> | |
| Doloremque dolorem maiores assumenda dolorem facilis. Velit vel in a rerum natus facere. Enim rerum eaque qui facilis. Numquam laudantium sed id dolores omnis in. Eos reiciendis deserunt maiores et accusamus quod dolor. | |
| </p> | |
| </div> | |
| </li> | |
| <li class="relative bg-white py-5 px-6 hover:bg-gray-50 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="flex justify-between space-x-3"> | |
| <div class="min-w-0 flex-1"> | |
| <a href="#" class="block focus:outline-none"> | |
| <span class="absolute inset-0" aria-hidden="true"></span> | |
| <p class="text-sm font-medium text-gray-900 truncate">Guadalupe Walsh</p> | |
| <p class="text-sm text-gray-500 truncate">Commodi deserunt aut veniam rem ipsam</p> | |
| </a> | |
| </div> | |
| <time datetime="2021-01-27T16:35" class="flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time> | |
| </div> | |
| <div class="mt-1"> | |
| <p class="line-clamp-2 text-sm text-gray-600"> | |
| Doloremque dolorem maiores assumenda dolorem facilis. Velit vel in a rerum natus facere. Enim rerum eaque qui facilis. Numquam laudantium sed id dolores omnis in. Eos reiciendis deserunt maiores et accusamus quod dolor. | |
| </p> | |
| </div> | |
| </li> | |
| <li class="relative bg-white py-5 px-6 hover:bg-gray-50 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="flex justify-between space-x-3"> | |
| <div class="min-w-0 flex-1"> | |
| <a href="#" class="block focus:outline-none"> | |
| <span class="absolute inset-0" aria-hidden="true"></span> | |
| <p class="text-sm font-medium text-gray-900 truncate">Jasmine Hansen</p> | |
| <p class="text-sm text-gray-500 truncate">Illo illum aut debitis earum</p> | |
| </a> | |
| </div> | |
| <time datetime="2021-01-27T16:35" class="flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time> | |
| </div> | |
| <div class="mt-1"> | |
| <p class="line-clamp-2 text-sm text-gray-600"> | |
| Doloremque dolorem maiores assumenda dolorem facilis. Velit vel in a rerum natus facere. Enim rerum eaque qui facilis. Numquam laudantium sed id dolores omnis in. Eos reiciendis deserunt maiores et accusamus quod dolor. | |
| </p> | |
| </div> | |
| </li> | |
| <li class="relative bg-white py-5 px-6 hover:bg-gray-50 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="flex justify-between space-x-3"> | |
| <div class="min-w-0 flex-1"> | |
| <a href="#" class="block focus:outline-none"> | |
| <span class="absolute inset-0" aria-hidden="true"></span> | |
| <p class="text-sm font-medium text-gray-900 truncate">Ian Volkman</p> | |
| <p class="text-sm text-gray-500 truncate">Qui dolore iste ut est cumque sed</p> | |
| </a> | |
| </div> | |
| <time datetime="2021-01-27T16:35" class="flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time> | |
| </div> | |
| <div class="mt-1"> | |
| <p class="line-clamp-2 text-sm text-gray-600"> | |
| Doloremque dolorem maiores assumenda dolorem facilis. Velit vel in a rerum natus facere. Enim rerum eaque qui facilis. Numquam laudantium sed id dolores omnis in. Eos reiciendis deserunt maiores et accusamus quod dolor. | |
| </p> | |
| </div> | |
| </li> | |
| <li class="relative bg-white py-5 px-6 hover:bg-gray-50 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="flex justify-between space-x-3"> | |
| <div class="min-w-0 flex-1"> | |
| <a href="#" class="block focus:outline-none"> | |
| <span class="absolute inset-0" aria-hidden="true"></span> | |
| <p class="text-sm font-medium text-gray-900 truncate">Rafael Klocko</p> | |
| <p class="text-sm text-gray-500 truncate">Aut sed aut illum delectus maiores laboriosam ex</p> | |
| </a> | |
| </div> | |
| <time datetime="2021-01-27T16:35" class="flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time> | |
| </div> | |
| <div class="mt-1"> | |
| <p class="line-clamp-2 text-sm text-gray-600"> | |
| Doloremque dolorem maiores assumenda dolorem facilis. Velit vel in a rerum natus facere. Enim rerum eaque qui facilis. Numquam laudantium sed id dolores omnis in. Eos reiciendis deserunt maiores et accusamus quod dolor. | |
| </p> | |
| </div> | |
| </li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </aside> | |
| <!--- Layout: Filters ---><aside class="h-full lg:flex lg:flex-shrink-0 lg:flex-col justify-between hidden lg:block lg:order-first collapsible-filter border-r border-gray-100" style=" | |
| display: none; | |
| "> | |
| <div id="slim-scroll" class="h-full relative flex flex-col lg:w-60 xl:w-72 2xl:w-80 overflow-y-auto"> | |
| <div class="flex-shrink-0" style=" | |
| display: none; | |
| "> | |
| <button type="button" class="group transition duration-300 button-ease origin-top-right absolute right-0 mt-2 -mr-3.5 z-10 bg-white p-1.5 rounded-md shadow-sm text-gray-500 border border-gray-100 hover:bg-gray-600 hover:border-transparent focus:outline-none focus:text-gray-700" aria-label="Hide Filters" title="Hide Filters"> | |
| <svg class="transition duration-300 button-ease h-4 w-4 group-hover:text-white" x-description="Heroicon name: solid/chevron-double-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M15.707 15.707a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 010 1.414zm-6 0a1 1 0 01-1.414 0l-5-5a1 1 0 010-1.414l5-5a1 1 0 011.414 1.414L5.414 10l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"></path> | |
| </svg> | |
| <span class="sr-only">Minimize Filters</span> | |
| </button><!-- Nav Page Title: Currently hidden --> | |
| <div class="h-16 bg-white bg-opacity-50 flex flex-col justify-center px-4 sm:px-6 hidden"> | |
| <div class="flex items-baseline space-x-3"> | |
| <h2 class="text-2xl font-medium text-gray-900">Projects</h2> | |
| <p class="hidden text-sm font-normal text-gray-500">10 messages</p> | |
| </div> | |
| </div> | |
| <div class="hidden border-t border-b border-gray-200 bg-gray-50 px-6 py-2 text-sm font-medium text-gray-500">Text title</div> | |
| <div class="border-t-0 border-b border-gray-100 bg-white px-3 2xl:px-4 py-2.5 h-auto text-sm font-medium text-gray-500 flex justify-center" style=" | |
| display: none; | |
| "> | |
| <button data-testid="dropdown-button" class="group relative w-full pl-2 pr-8 py-2 my-auto text-left cursor-default bg-gray-50 shadow-none border border-transparent text-gray-700 text-xs leading-normal font-semibold tracking-wide placeholder-gray-400 hover:bg-blue-100 hover:text-gray-700 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:text-gray-800 focus:ring-1 focus:ring-blue-600 focus:border-blue-400 focus:bg-blue-100 rounded-md" id="headlessui-listbox-button-2" type="button" aria-haspopup="true" aria-labelledby="headlessui-listbox-label-1 headlessui-listbox-button-2"><span class="inline-flex items-center"> | |
| <span class="transition duration-200 button-ease inline-flex items-center mr-1.5 px-2.5 py-1 rounded-full text-xs font-normal bg-blue-200 text-blue-800 group-hover:bg-blue-500 group-hover:text-white focus:text-blue-700 focus:outline-none"> | |
| <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path> | |
| </svg> | |
| 30d | |
| </span> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" class="flex-shrink-0 h-6 w-6 mr-2 text-gray-300 hidden"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path> | |
| </svg> | |
| <img src="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" alt="" class="flex-shrink-0 h-6 w-6 rounded-full hidden"> | |
| <span class="mx-1 font-semibold uppercase leading-tight text-center">Aug 22 '09<span class="ml-1 text-gray-400 font-normal lg:hidden xl:inline">7am</span></span> | |
| <span class="mx-1 font-normal text-gray-600">−</span> | |
| <span class="mx-1 font-semibold uppercase leading-tight text-center">Aug 22 '21<span class="ml-1 text-gray-400 font-normal lg:hidden xl:inline">7am</span></span> | |
| <span class="flex flex-shrink-0 -space-x-2 overflow-hidden ml-3 mr-1.5 hidden"> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-pyramid" class="inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworkpyramid"> | |
| <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path> | |
| <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path> | |
| <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path> | |
| <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-node-js" class="bg-white inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworknodejs"> | |
| <path fill="#83cd29" d="M463.6 113.4L276.9 5c-11.8-6.7-27.1-6.7-39 0L49.2 113.4c-12.2 7-20.8 20.1-20.8 34.2v216.5c0 14.1 8.8 27.2 21 34.2l49.9 28.3c23.8 11.7 32.3 11.7 43.1 11.7 35.3 0 55.4-21.3 55.4-58.6V166.1c0-3-1.6-7.5-4.5-7.5h-23.8c-3 0-9.8 4.5-9.8 7.5v213.8c0 16.5-14.9 32.9-42.8 19l-51.5-29.7c-1.8-1-3.1-2.9-3.1-5V147.6c0-2 2.4-4.1 4.2-5.1L254.6 34.3c1.8-1 4.3-1 6.1 0l185.8 108.2c1.8 1.1 1.2 3.1 1.2 5.2v216.5c0 2.1.8 4.1-1 5.1L260 477.5c-1.6 1-3.6 1-5.3 0L206.8 449c-1.4-.8-3.2-1.1-4.5-.4-13.3 7.5-15.8 8.6-28.3 12.9-3.1 1.1-7.6 2.9 1.7 8.2l62.7 37.1c6 3.5 12.8 5.3 19.7 5.3 7 0 13.8-1.8 19.8-5.3l185.8-108.3c12.2-7.1 17.9-20.2 17.9-34.2V147.6c-.1-14-5.8-27.1-18-34.2zM316 329.9c-49.7 0-60.6-13.7-64.2-38.4-.4-2.7-2.7-5.8-5.4-5.8h-24.3c-3 0-5.4 3.6-5.4 6.6 0 31.6 17.2 69.9 99.3 69.9 59.4 0 93.5-23.1 93.5-64 0-40.5-27.4-51.2-85-58.8-58.3-7.7-64.2-11.6-64.2-25.2 0-11.3 5-26.3 48.2-26.3 38.6 0 52.8 8.3 58.6 34.3.5 2.4 2.7 4.2 5.3 4.2h24.4c1.5 0 2.9-.6 4-1.7 1-1.2 1.6-2.6 1.4-4.1-3.8-44.7-33.5-65.6-93.6-65.6-53.5 0-85.4 22.6-85.4 60.4 0 41.1 31.7 52.4 83.1 57.5 61.4 6 66.2 15 66.2 27.1-.1 20.9-17 29.9-56.5 29.9z"></path> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" icon="framework-browser-js" class="bg-white inline-block h-6 w-6 rounded-md ring-2 ring-white svgicon svgicon-frameworkbrowserjs "> | |
| <path fill="#f0db4f" d="M0 0h512v512H0z"></path> | |
| <path fill="#323330" d="M470.1 389.89c-3.75-23.36-19-43-64.1-61.28-15.67-7.2-33.15-12.35-38.35-24.23-1.85-6.91-2.1-10.81-.93-15 3.36-13.58 19.57-17.81 32.42-13.92 8.27 2.77 16.1 9.15 20.83 19.32 22.09-14.31 22-14.21 37.47-24-5.64-8.76-8.66-12.8-12.36-16.55-13.28-14.84-31.39-22.48-60.35-21.9l-15.08 1.95c-14.46 3.65-28.23 11.24-36.31 21.41-24.24 27.5-17.32 75.63 12.17 95.44 29.05 21.81 71.74 26.77 77.19 47.16 5.3 25-18.35 33.05-41.86 30.18-17.32-3.6-27-12.41-37.38-28.42-19.17 11.09-19.17 11.09-38.88 22.43 4.67 10.22 9.58 14.85 17.42 23.7 37.09 37.62 129.9 35.77 146.54-21.17.68-2.01 5.16-15.01 1.56-35.12zM278.34 235.32h-47.89l-.2 123.81c0 26.33 1.37 50.47-2.92 57.86-7 14.56-25.16 12.75-33.43 9.93-8.42-4.14-12.71-10-17.67-18.34-1.36-2.39-2.38-4.24-2.72-4.38L134.57 428c6.47 13.29 16 24.82 28.23 32.32 18.25 10.95 42.77 14.31 68.43 8.42 16.69-4.87 31.1-14.94 38.64-30.27 10.9-20.1 8.56-44.44 8.47-71.35.24-43.86 0-87.76 0-131.8z"></path> | |
| </svg> | |
| </span></span><span class="group ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400 group-hover:text-gray-600" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> | |
| </svg></span></button> | |
| </div> | |
| </div> | |
| <!-- Left content starts here --> | |
| <nav aria-label="Metrics Filters Menu" class="min-h-0 flex-1"> | |
| <ul role="metrics-filters-list" class="border-b border-gray-100 divide-y divide-blue-100"> | |
| <li class="relative bg-white py-2.5 pl-6 pr-5 space-y-3 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="block flex flex-row-reverse grid grid-cols-3"> | |
| <div class="col-span-1 group flex space-x-1.5 justify-end focus:outline-none"> | |
| <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium tracking-wide bg-blue-100 text-blue-800"> | |
| <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path> | |
| </svg> | |
| 3 | |
| </span><button type="button" class="h-6 w-6 inline-flex transition duration-300 button-ease justify-center items-center px-0.5 py-0.5 border border-transparent text-sm font-medium rounded-full tracking-wide text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-800 focus:border-blue-700"> | |
| <svg class="h-4 w-4 text-blue-50" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path> | |
| </svg> | |
| </button> | |
| </div><input id="collapsible" class="toggle" type="checkbox" checked=""><label for="collapsible" class="group col-span-2 sh-toggle flex inline-flex order-first space-x-1 items-center hover:text-blue-800 focus:text-blue-800 focus:outline-none" tabindex="0"><svg class="-ml-1 -mt-0.5 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path> | |
| </svg> | |
| <span class="text-xs uppercase font-semibold tracking-widest text-gray-800 pb-1 border-b border-blue-100 group-hover:text-blue-800 group-focus:text-blue-800">Projects</span></label><div class="col-span-3 w-full px-0.5 space-y-3.5 collapsible-content"> | |
| <div class="w-full"> | |
| <div class="mt-3 relative flex rounded-md shadow-none"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 22 22" fill="currentColor" class="h-5 w-5 text-gray-400" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path> | |
| </svg></div><input id="project-search" type="search" class="block w-full shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md pl-9" data-testid="project-search" placeholder="Search"> | |
| </div> | |
| <p class="mt-2 text-sm text-red-600 invisible hidden" id="project-search-error">&nbsp</p> | |
| </div> | |
| <div class="flex"> | |
| <div class="-mt-1 -mb-2 min-w-0 flex-1"> | |
| <div class="block focus:outline-none"> | |
| <span class="hidden absolute inset-0" aria-hidden="true"></span> | |
| <div class="flex justify-between items-center"> | |
| <span class="inline-flex items-center mr-1 px-2 py-1 rounded-full text-xs font-medium tracking-wide bg-blue-100 text-blue-800 hidden"> | |
| <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path> | |
| </svg> | |
| 5 | |
| </span> | |
| <div class="inline-flex items-center space-x-1"><a class="text-xs font-normal tracking-wide text-blue-600 hover:text-blue-800 focus:text-blue-800 focus:outline-none" href="https://rollbar.com/Rollbar/api-monitoring/settings/general">Select All</a><span class="text-xs tracking-widest text-gray-200">⎥ | |
| </span><a class="text-xs font-normal tracking-wide text-blue-600 hover:text-blue-800 focus:text-blue-800 focus:outline-none" href="https://rollbar.com/Rollbar/api-monitoring/settings/general">Clear All</a></div> | |
| </div> | |
| <p class="hidden text-xs uppercase font-semibold tracking-widest text-blue-600 pb-1">Select all</p> | |
| <p class="hidden text-sm text-gray-500 truncate">Velit placeat sit ducimus non sed</p> | |
| </div> | |
| </div> | |
| <time datetime="2021-01-27T16:35" class="hidden flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time> | |
| </div> | |
| <div class="w-full"> | |
| <fieldset class="grid gap-y-0.5 border-0"> | |
| <legend class="sr-only">Projects</legend> | |
| <div class="group relative flex items-center px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="project-mox" aria-describedby="project-mox" name="comments" type="checkbox" checked="" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="group flex w-full ml-3 text-sm focus:bg-blue-100"> | |
| <label for="project-mox" class="w-full inline-flex text-gray-700 items-center justify-between">mox<span class="mx-1 border-b border-transparent text-transparent text-xs uppercase group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500">Only</span></label> | |
| <a href="#" id="project-description" class="mx-1 self-center border-b border-transparent text-transparent text-xs group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500 hidden"><span class="sr-only">mox</span>ONLY</a> | |
| </div> | |
| </div> | |
| <div class="relative flex items-start px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md hidden"> | |
| <div class="flex items-center h-5"> | |
| <input id="project-mox-max" aria-describedby="project-mox-web" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="project-mox-max" class="font-medium text-gray-700">mox-max</label> | |
| <span id="project-description" class="text-gray-400 text-xs hidden"><span class="sr-only">mox</span>Languages</span> | |
| </div> | |
| </div> | |
| <div class="group relative flex items-start px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="project-mox-web" aria-describedby="project-mox-web" name="comments" type="checkbox" checked="" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="group flex w-full justify-between ml-3 text-sm"> | |
| <label for="project-mox-web" class="w-full inline-flex items-center justify-between text-gray-700">mox-web<span class="mx-1 border-b border-transparent text-transparent text-xs uppercase group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500">Only</span></label> | |
| </div> | |
| </div> | |
| <div class="group relative flex items-start px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="project-mox-workers" aria-describedby="project-mox-workers" name="comments" type="checkbox" checked="" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="group flex w-full justify-between ml-3 text-sm"> | |
| <label for="project-mox-workers" class="w-full inline-flex items-center justify-between text-gray-700">eg-single-select<span class="mx-1 border-b border-transparent text-transparent text-xs uppercase group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500">Only</span></label> | |
| </div> | |
| </div> | |
| <div class="group relative flex items-start pl-1 py-1 hover:bg-white hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <svg class="h-4 w-4 text-gray-300 self-center" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="currentColor" aria-hidden="true"> | |
| <g xmlns="http://www.w3.org/2000/svg"><g xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" i:extraneous="self"><g><path d="M3.4,78c-1.2,1.1-1.2,3,0,4.2l10.7,10.7c1.1,1.1,3,1.1,4.2,0l28.3-28.3L31.7,49.7L3.4,78z"></path><path d="M97.1,26.6l-5.3-5.3c-0.6-0.6-1.5-0.6-2.1,0l-0.8,0.8c0,0-11.3-11.3-11.7-11.7c-5.3-5.3-15.9-5-20.6-2.1 c-1.3,0.8-0.7,2.8,0.8,2.8c6.1,0.3,9.8,4.6,12.9,8.3L53.6,36l6.7,6.7l16.1-16.1l3.8,4.3l-0.9,0.9c-0.6,0.6-0.6,1.5,0,2.1l5.3,5.3 c0.6,0.6,1.5,0.6,2.1,0l10.4-10.4C97.6,28.2,97.6,27.2,97.1,26.6z"></path><path d="M74.3,62.3L37.5,25.5c1.3-5.3-0.2-11.1-4.3-15.3c-4.8-4.8-11.7-6-17.6-3.6l8.2,8.2c2.5,2.5,2.5,6.6,0,9.1 c-2.5,2.5-6.6,2.5-9.1,0l-8.2-8.2C4.1,21.6,5.3,28.6,10,33.3c4.2,4.2,10,5.6,15.3,4.3c0,0,0,0,0,0l36.8,36.8c0,0,0,0,0,0 c-1.3,5.3,0.2,11.2,4.3,15.3c4.8,4.8,11.7,6,17.6,3.6l-8.2-8.2c-2.5-2.5-2.5-6.6,0-9.1c2.5-2.5,6.6-2.5,9.1,0l8.2,8.2 c2.3-5.9,1.1-12.9-3.6-17.6C85.5,62.5,79.6,61,74.3,62.3z"></path></g></g></g> | |
| </svg> | |
| <input id="project-atsuko-test" aria-describedby="project-atsuko-test" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded hidden"> | |
| </div> | |
| <div class="flex w-full ml-3 text-sm items-center justify-between"> | |
| <label for="project-atsuko-test" class="font-medium text-gray-400">preview-list-5</label> | |
| <a href="#" id="project-setup" class="mx-2 border-b border-transparent font-normal tracking-wide text-orange-600 text-xs hover:text-orange-800 focus:text-orange-800 focus:border-orange-500 focus:outline-none"><span class="sr-only">atsuko-test</span>Set Up</a> | |
| </div> | |
| </div> | |
| <div class="group relative flex items-start pl-1 py-1 hover:bg-white hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <svg class="h-4 w-4 text-gray-300 self-center" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="currentColor" aria-hidden="true"> | |
| <g xmlns="http://www.w3.org/2000/svg"><g xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" i:extraneous="self"><g><path d="M3.4,78c-1.2,1.1-1.2,3,0,4.2l10.7,10.7c1.1,1.1,3,1.1,4.2,0l28.3-28.3L31.7,49.7L3.4,78z"></path><path d="M97.1,26.6l-5.3-5.3c-0.6-0.6-1.5-0.6-2.1,0l-0.8,0.8c0,0-11.3-11.3-11.7-11.7c-5.3-5.3-15.9-5-20.6-2.1 c-1.3,0.8-0.7,2.8,0.8,2.8c6.1,0.3,9.8,4.6,12.9,8.3L53.6,36l6.7,6.7l16.1-16.1l3.8,4.3l-0.9,0.9c-0.6,0.6-0.6,1.5,0,2.1l5.3,5.3 c0.6,0.6,1.5,0.6,2.1,0l10.4-10.4C97.6,28.2,97.6,27.2,97.1,26.6z"></path><path d="M74.3,62.3L37.5,25.5c1.3-5.3-0.2-11.1-4.3-15.3c-4.8-4.8-11.7-6-17.6-3.6l8.2,8.2c2.5,2.5,2.5,6.6,0,9.1 c-2.5,2.5-6.6,2.5-9.1,0l-8.2-8.2C4.1,21.6,5.3,28.6,10,33.3c4.2,4.2,10,5.6,15.3,4.3c0,0,0,0,0,0l36.8,36.8c0,0,0,0,0,0 c-1.3,5.3,0.2,11.2,4.3,15.3c4.8,4.8,11.7,6,17.6,3.6l-8.2-8.2c-2.5-2.5-2.5-6.6,0-9.1c2.5-2.5,6.6-2.5,9.1,0l8.2,8.2 c2.3-5.9,1.1-12.9-3.6-17.6C85.5,62.5,79.6,61,74.3,62.3z"></path></g></g></g> | |
| </svg> | |
| <input id="project-atsuko-test" aria-describedby="project-atsuko-test" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded hidden"> | |
| </div> | |
| <div class="flex w-full ml-3 text-sm items-center justify-between"> | |
| <label for="project-atsuko-test-2" class="lg:w-24 xl:w-36 2xl:w-44 font-medium text-gray-400 truncate">truncate-long-name-width-here</label> | |
| <a href="#" id="project-setup" class="mx-2 border-b border-transparent font-normal tracking-wide text-orange-600 text-xs hover:text-orange-800 focus:text-orange-800 focus:border-orange-500 focus:outline-none"><span class="sr-only">atsuko-test</span>Set Up</a> | |
| </div> | |
| </div><div class="relative flex items-start pl-1 py-1 hidden"> | |
| <div class="flex items-center h-5"> | |
| <span class="mt-0.5 h-4 w-4 bg-orange-100 rounded-full flex items-center justify-center" aria-hidden="true"> | |
| <span class="h-2 w-2 bg-orange-500 rounded-full"></span> | |
| </span> | |
| <input id="project-atsuko-test" aria-describedby="project-atsuko-test" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded hidden"> | |
| </div> | |
| <div class="group flex w-full ml-2 text-sm items-center justify-between"> | |
| <label for="project-atsuko-test" class="font-medium text-gray-400">atsuko-test-2</label> | |
| <a href="#" id="project-setup" class="mx-1 border-b border-transparent font-normal tracking-wide text-orange-600 text-xs hover:text-orange-800 focus:text-orange-800 focus:border-orange-500 focus:outline-none"><span class="sr-only">atsuko-test</span>Set Up</a> | |
| </div> | |
| </div> | |
| <div class="group relative flex items-start pl-1 py-1 hover:bg-white hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 rounded-md hidden"> | |
| <div class="flex items-center h-5"> | |
| <span class="mt-0.5 h-4 w-4 bg-orange-100 rounded-full flex items-center justify-center" aria-hidden="true"> | |
| <span class="h-2 w-2 bg-orange-500 rounded-full"></span> | |
| </span> | |
| <input id="project-atsuko-test" aria-describedby="project-atsuko-test" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded hidden"> | |
| </div> | |
| <div class="flex w-full ml-3 text-sm items-center justify-between"> | |
| <label for="project-atsuko-test" class="font-medium text-gray-400">atsuko-test-3</label> | |
| <a href="#" id="project-setup" class="font-semibold tracking-wide text-orange-600 text-xs group-hover:text-orange-700 group-focus:text-orange-700 focus:text-orange-700 focus:outline-none focus:underline"><span class="sr-only">atsuko-test</span>Setup</a> | |
| </div> | |
| </div> | |
| </fieldset> | |
| </div><div class="flex justify-center text-xs uppercase tracking-wide font-normal text-blue-600"> | |
| <a class="inline-flex -mt-1.5 justify-center hover:text-blue-800 focus:outline-none focus:text-blue-800" href="#" aria-label="General" title="General">Show More <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mt-0 ml-0.5 self-center" fill="currentColor" viewBox="0 0 120 120"> | |
| <path xmlns="http://www.w3.org/2000/svg" d="M62.3,62.6l-8.6,8.6V29.3l8.6,8.6c1.4,1.5,3.8,1.6,5.3,0.2c1.5-1.4,1.6-3.8,0.2-5.3c-0.1-0.1-0.1-0.1-0.2-0.2l-15-15 c-1.5-1.5-3.8-1.5-5.3,0l-15,15c-1.4,1.5-1.3,3.9,0.2,5.3c1.4,1.3,3.7,1.3,5.1,0l8.6-8.6v41.9l-8.6-8.6c-1.4-1.5-3.8-1.6-5.3-0.2 c-1.5,1.4-1.6,3.8-0.2,5.3c0.1,0.1,0.1,0.1,0.2,0.2l15,15c1.5,1.5,3.8,1.5,5.3,0l15-15c1.5-1.4,1.6-3.8,0.2-5.3 c-1.4-1.5-3.8-1.6-5.3-0.2C62.5,62.5,62.4,62.5,62.3,62.6z"></path> | |
| </svg> | |
| </a> | |
| </div> | |
| <div class="relative mt-6 mb-4 hidden"> | |
| <div class="absolute inset-0 flex items-center" aria-hidden="true"> | |
| <div class="w-3/4 border-t border-transparent mx-auto"></div> | |
| </div> | |
| <div class="relative flex justify-center"> | |
| <a class="flex inline-flex -mt-1 pl-2 border border-blue-300 bg-white text-xs tracking-wide leading-normal font-normal text-blue-600 hover:text-blue-800 hover:border-blue-500 focus:outline-none focus:text-blue-800 rounded-full" href="#" aria-label="Show-al" title="Show All">Show All <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-0.5 self-center" fill="currentColor" viewBox="0 -10 120 120"> | |
| <path xmlns="http://www.w3.org/2000/svg" d="M62.3,62.6l-8.6,8.6V29.3l8.6,8.6c1.4,1.5,3.8,1.6,5.3,0.2c1.5-1.4,1.6-3.8,0.2-5.3c-0.1-0.1-0.1-0.1-0.2-0.2l-15-15 c-1.5-1.5-3.8-1.5-5.3,0l-15,15c-1.4,1.5-1.3,3.9,0.2,5.3c1.4,1.3,3.7,1.3,5.1,0l8.6-8.6v41.9l-8.6-8.6c-1.4-1.5-3.8-1.6-5.3-0.2 c-1.5,1.4-1.6,3.8-0.2,5.3c0.1,0.1,0.1,0.1,0.2,0.2l15,15c1.5,1.5,3.8,1.5,5.3,0l15-15c1.5-1.4,1.6-3.8,0.2-5.3 c-1.4-1.5-3.8-1.6-5.3-0.2C62.5,62.5,62.4,62.5,62.3,62.6z"></path> | |
| </svg></a> | |
| </div> | |
| <div class="frelative flex justify-left text-xs tracking-wide leading-normal font-normal text-blue-600 bg-blue-50 rounded-full hidden"> | |
| <a class="flex inline-flex -mt-1 pl-2 leading-5 border border-blue-300 bg-blue-50 hover:text-blue-800 hover:border-blue-500 focus:outline-none focus:text-blue-800 rounded-full" href="#" aria-label="General" title="General">Show All <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-0.5 self-center" fill="currentColor" viewBox="0 -10 120 120"> | |
| <path xmlns="http://www.w3.org/2000/svg" d="M62.3,62.6l-8.6,8.6V29.3l8.6,8.6c1.4,1.5,3.8,1.6,5.3,0.2c1.5-1.4,1.6-3.8,0.2-5.3c-0.1-0.1-0.1-0.1-0.2-0.2l-15-15 c-1.5-1.5-3.8-1.5-5.3,0l-15,15c-1.4,1.5-1.3,3.9,0.2,5.3c1.4,1.3,3.7,1.3,5.1,0l8.6-8.6v41.9l-8.6-8.6c-1.4-1.5-3.8-1.6-5.3-0.2 c-1.5,1.4-1.6,3.8-0.2,5.3c0.1,0.1,0.1,0.1,0.2,0.2l15,15c1.5,1.5,3.8,1.5,5.3,0l15-15c1.5-1.4,1.6-3.8,0.2-5.3 c-1.4-1.5-3.8-1.6-5.3-0.2C62.5,62.5,62.4,62.5,62.3,62.6z"></path> | |
| </svg></a> | |
| </div></div><div class="flex justify-center w-full text-xs tracking-wide leading-normal font-normal text-blue-600 hidden"> | |
| <a class="flex inline-flex -mt-1 pl-2 leading-5 border border-blue-300 bg-blue-50 hover:text-blue-800 hover:border-blue-500 focus:outline-none focus:text-blue-800 rounded-full" href="#" aria-label="General" title="General">Show All <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-0.5 self-center" fill="currentColor" viewBox="0 -10 120 120"> | |
| <path xmlns="http://www.w3.org/2000/svg" d="M62.3,62.6l-8.6,8.6V29.3l8.6,8.6c1.4,1.5,3.8,1.6,5.3,0.2c1.5-1.4,1.6-3.8,0.2-5.3c-0.1-0.1-0.1-0.1-0.2-0.2l-15-15 c-1.5-1.5-3.8-1.5-5.3,0l-15,15c-1.4,1.5-1.3,3.9,0.2,5.3c1.4,1.3,3.7,1.3,5.1,0l8.6-8.6v41.9l-8.6-8.6c-1.4-1.5-3.8-1.6-5.3-0.2 c-1.5,1.4-1.6,3.8-0.2,5.3c0.1,0.1,0.1,0.1,0.2,0.2l15,15c1.5,1.5,3.8,1.5,5.3,0l15-15c1.5-1.4,1.6-3.8,0.2-5.3 c-1.4-1.5-3.8-1.6-5.3-0.2C62.5,62.5,62.4,62.5,62.3,62.6z"></path> | |
| </svg></a> | |
| </div></div> | |
| </div><div class="group flex justify-between focus:outline-none" style=" | |
| display: none; | |
| "> | |
| <div class="flex space-x-1 items-center"> | |
| <svg class="-ml-1 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path> | |
| </svg> | |
| <span class="text-xs uppercase font-semibold tracking-widest text-gray-700 pb-1 border-b border-blue-100 group-hover:text-blue-800">Projects</span> | |
| </div> | |
| <div class="group flex space-x-1.5 items-end focus:outline-none"> | |
| <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium tracking-wide bg-blue-100 text-blue-800"> | |
| <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path> | |
| </svg> | |
| 3 | |
| </span><button type="button" class="h-6 w-6 inline-flex transition duration-300 button-ease justify-center items-center px-0.5 py-0.5 border border-transparent text-sm font-medium rounded-full tracking-wide text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-800 focus:border-blue-700"> | |
| <svg class="h-4 w-4 text-blue-50" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </li> | |
| <li class="relative bg-white py-2.5 pl-6 pr-5 space-y-3 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="block flex grid grid-cols-4"> | |
| <div class="col-span-1 group flex space-x-1.5 justify-end focus:outline-none"> | |
| <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium tracking-wide bg-blue-100 text-blue-800"> | |
| <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path> | |
| </svg> | |
| 2 | |
| </span> | |
| </div><input id="collapsible-env" class="toggle" type="checkbox"><label for="collapsible-env" class="group col-span-3 sh-toggle flex inline-flex order-first space-x-1 items-center"><svg class="-ml-1 -mt-0.5 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path> | |
| </svg> | |
| <span class="text-xs uppercase font-semibold tracking-widest text-gray-800 pb-1 border-b border-blue-100 group-hover:text-blue-800 group-focus:text-blue-800">Environments</span></label> | |
| <div class="col-span-4 w-full px-0.5 space-y-3.5 collapsible-content"> | |
| <div class="w-full"> | |
| <div class="mt-3 relative flex rounded-md shadow-none"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path> | |
| </svg></div><input id="project-search" type="search" class="block w-full shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md pl-10" data-testid="project-search" placeholder="Search"> | |
| </div> | |
| <p class="mt-2 text-sm text-red-600 invisible hidden" id="project-search-error">&nbsp</p> | |
| </div> | |
| <div class="flex"> | |
| <div class="-mt-1 -mb-2 min-w-0 flex-1"> | |
| <div class="block focus:outline-none"> | |
| <span class="hidden absolute inset-0" aria-hidden="true"></span> | |
| <div class="flex justify-between items-center"> | |
| <span class="inline-flex items-center mr-1 px-2 py-1 rounded-full text-xs font-medium tracking-wide bg-blue-100 text-blue-800 hidden"> | |
| <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path> | |
| </svg> | |
| 5 | |
| </span> | |
| <div class="inline-flex items-center space-x-1"><a class="text-xs font-normal tracking-wide text-blue-600 hover:text-blue-800 focus:text-blue-800 focus:outline-none" href="https://rollbar.com/Rollbar/api-monitoring/settings/general">Select All</a><span class="text-xs tracking-widest text-gray-200">⎥ | |
| </span><a class="text-xs font-normal tracking-wide text-blue-600 hover:text-blue-800 focus:text-blue-800 focus:outline-none" href="https://rollbar.com/Rollbar/api-monitoring/settings/general">Clear All</a></div> | |
| </div> | |
| <p class="hidden text-xs uppercase font-semibold tracking-widest text-blue-600 pb-1">Select all</p> | |
| <p class="hidden text-sm text-gray-500 truncate">Velit placeat sit ducimus non sed</p> | |
| </div> | |
| </div> | |
| <time datetime="2021-01-27T16:35" class="hidden flex-shrink-0 whitespace-nowrap text-sm text-gray-500">1d ago</time> | |
| </div> | |
| <div class="w-full"> | |
| <fieldset class="h-52 overflow-y-auto overflow-x-hidden grid gap-y-0.5 border-0" id="slim-scroll"> | |
| <legend class="sr-only">Projects</legend> | |
| <div class="relative w-full block items-start px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="group w-full flex items-center h-5"> | |
| <input id="env-1" aria-describedby="project-mox" name="comments" type="checkbox" checked="" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 group-hover:text-blue-800 border-gray-300 rounded"><a href="#" class="origin-top-right absolute right-1 mt-0 z-10 mx-1 self-center border-b border-transparent text-transparent text-xs group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500">MULTI</a> | |
| </div> | |
| <div class="origin-top-right absolute left-5 -mt-5 z-20 group w-full flex justify-between ml-3 text-sm"> | |
| <label for="env-1" class="text-gray-700">eg-multi-select</label> | |
| <a href="#" class="origin-top-right absolute right-9 mx-1 self-center border-b border-transparent text-transparent text-xs group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500 cursor-pointer group-hover:cursor-pointer">ONLY</a> | |
| </div> | |
| </div> | |
| <div class="relative w-full block items-start px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="group w-full flex items-center h-5"> | |
| <input id="env-2" aria-describedby="project-mox" name="comments" type="checkbox" checked="" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 group-hover:text-blue-800 border-gray-300 rounded"><a href="#" class="origin-top-right absolute right-1 mt-0 z-10 mx-1 self-center border-b border-transparent text-transparent text-xs group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500">MULTI</a> | |
| </div> | |
| <div class="origin-top-right absolute left-5 -mt-5 z-20 group w-full flex justify-between ml-3 text-sm"> | |
| <label for="env-2" class="text-gray-700">development</label> | |
| <a href="#" class="origin-top-right absolute right-9 mx-1 self-center border-b border-transparent text-transparent text-xs group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500 cursor-pointer group-hover:cursor-pointer">ONLY</a> | |
| </div> | |
| </div> | |
| <div class="relative w-full block items-start px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="group w-full flex items-center h-5"> | |
| <input id="env-3" aria-describedby="project-mox" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 group-hover:text-blue-800 border-gray-300 rounded"><a href="#" class="origin-top-right absolute right-1 mt-0 z-10 mx-1 self-center border-b border-transparent text-transparent text-xs group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500">MULTI</a> | |
| </div> | |
| <div class="origin-top-right absolute left-5 -mt-5 z-20 group w-full flex justify-between ml-3 text-sm"> | |
| <label for="env-3" class="text-gray-700">production</label> | |
| <a href="#" class="origin-top-right absolute right-9 mx-1 self-center border-b border-transparent text-transparent text-xs group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500 cursor-pointer group-hover:cursor-pointer">ONLY</a> | |
| </div> | |
| </div> | |
| <div class="relative flex items-start px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="env-production-k8s" aria-describedby="project-mox-web" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="group w-full flex justify-between ml-3 text-sm"> | |
| <label for="env-production-k8s" class="font-medium text-gray-700">production-k8s</label> | |
| <a href="#" id="project-description" class="mx-1 self-center border-b border-transparent text-transparent text-xs group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500"><span class="sr-only">mox</span>ONLY</a> | |
| </div> | |
| </div> | |
| <div class="relative flex items-start px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="env-staging" aria-describedby="project-mox-workers" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="group w-full flex justify-between ml-3 text-sm"> | |
| <label for="env-staging" class="font-medium text-gray-700">staging</label> | |
| <a href="#" id="project-description" class="mx-1 self-center border-b border-transparent text-transparent text-xs group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500"><span class="sr-only">mox</span>ONLY</a> | |
| </div> | |
| </div> | |
| <div class="relative flex items-start px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="env-system" aria-describedby="project-mox-workers" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="group w-full flex justify-between ml-3 text-sm"> | |
| <label for="env-system" class="font-medium text-gray-700">system</label> | |
| <a href="#" id="project-description" class="mx-1 self-center border-b border-transparent text-transparent text-xs group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500"><span class="sr-only">mox</span>ONLY</a> | |
| </div> | |
| </div> | |
| <div class="relative flex items-start px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="env-testing" aria-describedby="project-mox-workers" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="group w-full flex justify-between ml-3 text-sm"> | |
| <label for="env-testing" class="font-medium text-gray-700">testing</label> | |
| <a href="#" id="project-description" class="mx-1 self-center border-b border-transparent text-transparent text-xs group-hover:text-blue-700 focus:text-blue-700 focus:outline-none focus:border-blue-500"><span class="sr-only">mox</span>ONLY</a> | |
| </div> | |
| </div> | |
| <div class="relative flex items-start px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="env-testing-2" aria-describedby="project-mox-workers" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="env-testing-2" class="font-medium text-gray-700">testing-2</label> | |
| </div> | |
| </div> | |
| <div class="relative flex items-start px-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="env-testing-3" aria-describedby="project-mox-workers" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="env-testing-3" class="font-medium text-gray-700">testing-3</label> | |
| </div> | |
| </div> | |
| </fieldset> | |
| </div> | |
| <div class="flex justify-center text-xs uppercase tracking-wide font-normal text-blue-600"> | |
| <a class="inline-flex -mt-1.5 justify-center hover:text-blue-800 focus:outline-none focus:text-blue-800" href="#" aria-label="General" title="General">Show Less <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mt-0 ml-0.5 self-center" fill="currentColor" viewBox="0 0 24 24"> | |
| <g xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M11.293,13.293a.99962.99962,0,0,1,1.41406,0l3,3A.99989.99989,0,0,1,14.293,17.707L13,16.41406V21a1,1,0,0,1-2,0V16.41406L9.707,17.707A.99989.99989,0,0,1,8.293,16.293ZM11,3V7.58594L9.707,6.293A.99989.99989,0,0,0,8.293,7.707l3,3a.99962.99962,0,0,0,1.41406,0l3-3A.99989.99989,0,0,0,14.293,6.293L13,7.58594V3a1,1,0,0,0-2,0Z"></path> | |
| </g> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="group flex justify-between focus:outline-none hidden"> | |
| <div class="flex space-x-1 items-center"> | |
| <svg class="-ml-1 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path> | |
| </svg> | |
| <span class="text-xs uppercase font-semibold tracking-widest text-gray-700 pb-1 border-b border-blue-100 group-hover:text-blue-800">Environments</span> | |
| </div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium tracking-wide bg-blue-100 text-blue-800"> | |
| <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path> | |
| </svg> | |
| 1 | |
| </span> | |
| </div> | |
| </li> | |
| <li class="relative bg-white py-2.5 pl-6 pr-5 space-y-3 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="block flex grid grid-cols-4"> | |
| <div class="col-span-1 group flex space-x-1.5 justify-end focus:outline-none"> | |
| <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium tracking-wide bg-blue-100 text-blue-800"> | |
| <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path> | |
| </svg> | |
| 4 | |
| </span> | |
| </div><input id="collapsible-sev" class="toggle" type="checkbox"><label for="collapsible-sev" class="group col-span-3 sh-toggle flex inline-flex order-first space-x-1 items-center"><svg class="-ml-1 -mt-0.5 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path> | |
| </svg> | |
| <span class="text-xs uppercase font-semibold tracking-widest text-gray-800 pb-1 border-b border-blue-100 group-hover:text-blue-800 group-focus:text-blue-800">Severity</span></label> | |
| <div class="col-span-4 w-full px-0.5 space-y-3 collapsible-content"> | |
| <div class="w-full"> | |
| <div class="flex flex-wrap mt-1 mb-1 space-x-1.5 space-y-2.5" id="filter-scroll"> | |
| <legend class="sr-only">Severity</legend> | |
| <button type="button" class="group inline-flex transition duration-300 button-ease items-center justify-center mx-0.5 mt-1 mb-1.5 px-3.5 py-1.5 border border-blue-500 ring-1 ring-blue-500 text-sm font-medium rounded-full tracking-wide text-gray-700 bg-blue-100 hover:text-gray-800 hover:bg-opacity-30 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400"> | |
| <svg class="md:-ml-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4 text-red-700 transition duration-300 button-ease" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M10 1.944A11.954 11.954 0 012.166 5C2.056 5.649 2 6.319 2 7c0 5.225 3.34 9.67 8 11.317C14.66 16.67 18 12.225 18 7c0-.682-.057-1.35-.166-2.001A11.954 11.954 0 0110 1.944zM11 14a1 1 0 11-2 0 1 1 0 012 0zm0-7a1 1 0 10-2 0v3a1 1 0 102 0V7z" clip-rule="evenodd"></path> | |
| </svg> | |
| <span class="align-middle tracking-wide">Critical</span> | |
| </button> | |
| <button type="button" class="group inline-flex transition duration-300 button-ease items-center justify-center mx-0.5 mt-1 mb-1.5 px-3.5 py-1.5 border border-blue-500 ring-1 ring-blue-500 text-sm font-medium rounded-full tracking-wide text-gray-700 bg-blue-100 hover:text-gray-800 hover:bg-opacity-30 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400"> | |
| <svg class="md:-ml-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4 text-orange-500 group-hover:text-orange-500 transition duration-300 button-ease" x-description="Heroicon name: solid/x-cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path> | |
| </svg> | |
| <span class="align-middle tracking-wide">Error</span> | |
| </button> | |
| <button type="button" class="group inline-flex transition duration-300 button-ease items-center justify-center mx-0.5 mt-1 mb-1.5 px-3.5 py-1.5 border border-blue-500 ring-1 ring-blue-500 text-sm font-medium rounded-full tracking-wide text-gray-700 bg-blue-100 hover:text-gray-800 hover:bg-opacity-30 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400"> | |
| <svg class="md:-ml-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4 text-yellow-600 group-hover:text-yellow-600 transition duration-300 button-ease" x-description="Heroicon name: solid/x-cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path> | |
| </svg> | |
| <span class="align-middle tracking-wide">Warning</span> | |
| </button><button type="button" class="group inline-flex transition duration-300 button-ease items-center justify-center mx-0.5 mt-1 mb-1.5 px-3.5 py-1.5 border border-gray-300 text-sm font-medium rounded-full tracking-wide text-gray-500 bg-white hover:text-gray-800 hover:border-gray-500 hover:bg-opacity-30 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400 focus:bg-blue-100 focus:text-gray-700"> | |
| <svg class="md:-ml-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4 text-gray-400 transition duration-300 button-ease" x-description="Heroicon name: solid/x-cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path> | |
| </svg> | |
| <span class="align-middle tracking-wide">Info</span> | |
| </button><button type="button" class="group inline-flex transition duration-300 button-ease items-center justify-center mx-0.5 mt-1 mb-1.5 px-3.5 py-1.5 border border-blue-500 ring-1 ring-blue-500 text-sm font-medium rounded-full tracking-wide text-gray-700 bg-blue-100 hover:text-gray-800 hover:bg-opacity-30 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400"> | |
| <svg class="md:-ml-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4 text-yellow-800 transition duration-300 button-ease" x-description="Heroicon name: solid/x-cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"> | |
| <g xmlns="http://www.w3.org/2000/svg"><path d="M4,7h8c0-1.518-0.855-2.822-2.101-3.5H10v-1C10,2.224,10.225,2,10.5,2H11V1h-0.5C9.673,1,9,1.673,9,2.5v0.641 C8.679,3.058,8.347,3,8,3S7.321,3.058,7,3.141V2.5C7,1.673,6.327,1,5.5,1H5v1h0.5C5.776,2,6,2.224,6,2.5v1h0.101 C4.855,4.178,4,5.482,4,7z"></path><path d="M12,8.949c1.692-0.245,3-1.691,3-3.449V5h-1v0.5C14,6.878,12.879,8,11.5,8h-7C3.122,8,2,6.878,2,5.5V5H1v0.5 c0,1.758,1.308,3.204,3,3.449V11c0,0.017,0.005,0.033,0.005,0.05C2.311,11.293,1,12.74,1,14.5V15h1v-0.5 c0-1.26,0.939-2.294,2.152-2.465C4.611,13.739,6.151,15,8,15s3.389-1.261,3.848-2.965C13.061,12.206,14,13.24,14,14.5V15h1v-0.5 c0-1.76-1.311-3.207-3.005-3.45C11.995,11.033,12,11.017,12,11V8.949z"></path></g> | |
| </svg> | |
| <span class="align-middle tracking-wide">Debug</span> | |
| </button><button type="button" class="group inline-flex transition duration-300 button-ease items-center justify-center mx-0.5 mt-1 mb-1.5 px-3.5 py-1.5 border border-gray-300 text-sm font-medium rounded-full tracking-wide text-gray-500 bg-white hover:text-gray-800 hover:border-gray-500 hover:bg-opacity-30 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400 focus:bg-blue-100 focus:text-gray-700"> | |
| <svg class="filter saturate-50 hue-rotate-180 brightness-100 text-gray-400 transition duration-300 button-ease rounded-md md:-ml-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4" icon="framework-browser-js" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true"><path fill="#f0db4f" d="M0 0h512v512H0z"></path><path fill="#323330" d="M470.1 389.89c-3.75-23.36-19-43-64.1-61.28-15.67-7.2-33.15-12.35-38.35-24.23-1.85-6.91-2.1-10.81-.93-15 3.36-13.58 19.57-17.81 32.42-13.92 8.27 2.77 16.1 9.15 20.83 19.32 22.09-14.31 22-14.21 37.47-24-5.64-8.76-8.66-12.8-12.36-16.55-13.28-14.84-31.39-22.48-60.35-21.9l-15.08 1.95c-14.46 3.65-28.23 11.24-36.31 21.41-24.24 27.5-17.32 75.63 12.17 95.44 29.05 21.81 71.74 26.77 77.19 47.16 5.3 25-18.35 33.05-41.86 30.18-17.32-3.6-27-12.41-37.38-28.42-19.17 11.09-19.17 11.09-38.88 22.43 4.67 10.22 9.58 14.85 17.42 23.7 37.09 37.62 129.9 35.77 146.54-21.17.68-2.01 5.16-15.01 1.56-35.12zM278.34 235.32h-47.89l-.2 123.81c0 26.33 1.37 50.47-2.92 57.86-7 14.56-25.16 12.75-33.43 9.93-8.42-4.14-12.71-10-17.67-18.34-1.36-2.39-2.38-4.24-2.72-4.38L134.57 428c6.47 13.29 16 24.82 28.23 32.32 18.25 10.95 42.77 14.31 68.43 8.42 16.69-4.87 31.1-14.94 38.64-30.27 10.9-20.1 8.56-44.44 8.47-71.35.24-43.86 0-87.76 0-131.8z"></path> | |
| </svg> | |
| <span class="align-middle tracking-wide">Browser JS</span> | |
| </button><button type="button" class="group inline-flex transition duration-300 button-ease items-center justify-center mx-0.5 mt-1 mb-1.5 px-3.5 py-1.5 border border-gray-300 text-sm font-medium rounded-full tracking-wide text-gray-500 bg-white hover:text-gray-800 hover:border-gray-500 hover:bg-opacity-30 focus:outline-none focus:ring-1 focus:ring-blue-600 focus:border-blue-400 focus:bg-blue-100 focus:text-gray-700"> | |
| <svg class="filter saturate-50 hue-rotate-180 contrast-75 text-gray-400 transition duration-300 button-ease rounded-md md:-ml-1 md:mr-1.5 h-5 w-5 md:h-4 md:w-4" icon="framework-pyramid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" aria-hidden="true"> | |
| <path fill="#292b2c" d="M512 391.48C512 458.03 458.66 512 392.88 512H119.11C53.337 512 0 458.03 0 391.48V120.52C0 53.948 53.331 0 119.11 0h273.77C458.66 0 512 53.948 512 120.52v270.96z"></path> | |
| <path fill="#f0a325" d="M253.014 113.147l177.848 237.01-177.848-36.907z"></path> | |
| <path fill="#f7cb47" d="M253.014 113.147V313.25L75.226 350.157z"></path> | |
| <path fill="#fff" stroke="#000" stroke-width="4" d="M75.226 350.157l177.788-36.907 177.848 36.907-177.848 28.82z"></path> | |
| </svg> | |
| <span class="align-middle tracking-wide">Pyramid</span> | |
| </button></div> | |
| </div><div class="w-full hidden"> | |
| <div class="mt-3 relative flex rounded-md shadow-none"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path> | |
| </svg></div><input id="project-search" type="search" class="block w-full shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md pl-10" data-testid="project-search" placeholder="Search"> | |
| </div> | |
| <p class="mt-2 text-sm text-red-600 invisible hidden" id="project-search-error">&nbsp</p> | |
| </div> | |
| <div class="w-full text-sm font-normal text-blue-600 hidden"> | |
| <a class="flex block -mt-1 justify-center hover:text-blue-800 focus:outline-none focus:text-blue-800" href="#" aria-label="General" title="General">Show Less <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mt-0.5 ml-0.5 self-center" fill="currentColor" viewBox="0 0 24 24"> | |
| <g xmlns="http://www.w3.org/2000/svg"> | |
| <path d="M11.293,13.293a.99962.99962,0,0,1,1.41406,0l3,3A.99989.99989,0,0,1,14.293,17.707L13,16.41406V21a1,1,0,0,1-2,0V16.41406L9.707,17.707A.99989.99989,0,0,1,8.293,16.293ZM11,3V7.58594L9.707,6.293A.99989.99989,0,0,0,8.293,7.707l3,3a.99962.99962,0,0,0,1.41406,0l3-3A.99989.99989,0,0,0,14.293,6.293L13,7.58594V3a1,1,0,0,0-2,0Z"></path> | |
| </g> | |
| </svg> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="group flex justify-between focus:outline-none hidden"> | |
| <div class="flex space-x-1 items-center"> | |
| <svg class="-ml-1 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path> | |
| </svg> | |
| <span class="text-xs uppercase font-semibold tracking-widest text-gray-700 pb-1 border-b border-blue-100 group-hover:text-blue-800">Severity</span> | |
| </div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium tracking-wide bg-blue-100 text-blue-800"> | |
| <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path> | |
| </svg> | |
| 4 | |
| </span> | |
| </div><div class="w-full hidden"> | |
| <div class="mt-1 relative flex rounded-md shadow-none"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path> | |
| </svg></div><input id="project-search" type="search" class="block w-full shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md pl-10" data-testid="project-search" placeholder="Search"> | |
| </div> | |
| <p class="mt-2 text-sm text-red-600 invisible hidden" id="project-search-error">&nbsp</p> | |
| </div> | |
| <div class="w-full text-sm font-normal text-blue-600 hidden"> | |
| <a class="-mt-3 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="General" title="General">Show all...</a> | |
| </div> | |
| </li> | |
| <li class="relative bg-white py-2.5 pl-6 pr-5 space-y-3 focus-within:ring-0 focus-within:ring-inset focus-within:ring-blue-600"> | |
| <div class="group flex justify-between focus:outline-none"> | |
| <div class="flex space-x-1 items-center"> | |
| <svg class="-ml-1 -mt-0.5 flex-shrink-0 h-5 w-5 text-gray-400 group-hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path> | |
| </svg> | |
| <span class="text-xs uppercase font-semibold tracking-widest text-gray-800 pb-1 border-b border-blue-100 group-hover:text-blue-800">Frameworks</span> | |
| </div><span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium tracking-wide bg-blue-100 text-blue-800"> | |
| <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path> | |
| </svg>All</span> | |
| </div> | |
| <div class="w-full hidden"> | |
| <div class="mt-1 relative flex rounded-md shadow-none"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd"></path> | |
| </svg></div><input id="project-search" type="search" class="block w-full shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md pl-10" data-testid="project-search" placeholder="Search"> | |
| </div> | |
| <p class="mt-2 text-sm text-red-600 invisible hidden" id="project-search-error">&nbsp</p> | |
| </div> | |
| <div class="w-full hidden"> | |
| <fieldset class="space-y-0.5 border-0"> | |
| <legend class="sr-only">Projects</legend> | |
| <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="env-at-product-demo" aria-describedby="project-mox" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="env-at-product-demo" class="font-medium text-gray-700">at-product-demo</label> | |
| </div> | |
| </div> | |
| <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="env-development" aria-describedby="project-mox-web" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="env-development" class="font-medium text-gray-700">development</label> | |
| </div> | |
| </div> | |
| <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="env-production" aria-describedby="project-mox-web" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="env-production" class="font-medium text-gray-700">production</label> | |
| </div> | |
| </div> | |
| <div class="relative flex items-start pl-1 py-1 hover:bg-blue-100 hover:bg-opacity-90 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800 rounded-md"> | |
| <div class="flex items-center h-5"> | |
| <input id="env-staging" aria-describedby="project-mox-workers" name="comments" type="checkbox" class="focus:ring-1 focus:ring-blue-600 h-4 w-4 text-blue-600 hover:text-blue-800 border-gray-300 rounded"> | |
| </div> | |
| <div class="ml-3 text-sm"> | |
| <label for="env-staging" class="font-medium text-gray-700">staging</label> | |
| </div> | |
| </div> | |
| </fieldset> | |
| </div> | |
| <div class="w-full text-sm font-normal text-blue-600 hidden"> | |
| <a class="-mt-3 hover:text-blue-600 focus:outline-none focus:bg-blue-100 focus:text-blue-800" href="https://rollbar.com/Rollbar/foobar123/settings/general" aria-label="General" title="General">Show all...</a> | |
| </div> | |
| </li> | |
| </ul> | |
| </nav> | |
| </div><div class="-mt-0.5 2xl:w-80 bg-gradient-to-br from-purple-700 via-purple-600 to-blue-500 border-gray-50 border-r border-t flex flex-col h-auto lg:w-60 pl-5 pr-5 py-3 relative rounded-t-md xl:w-72"> | |
| <!-- Left content starts here --> | |
| <div class="block flex flex-row-reverse grid grid-cols-3 items-center"> | |
| <div class="col-span-3 xl:col-span-1 my-1 xl:my-0 group flex space-x-1.5 justify-center xl:justify-end focus:outline-none"> | |
| <span class="w-11/12 xl:w-auto inline-flex items-center px-2.5 lg:mb-0.5 xl:mb-0 py-1 rounded-full justify-center text-xs tracking-wide text-gray-700 bg-gradient-to-l from-octane-500 to-octane-400"> | |
| <svg class="flex-shrink-0 h-4 w-4 text-blue-600 mr-0.5 hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z"></path> | |
| </svg><span class="inline-flex xl:hidden">We ♥ </span>Feedback</span><button type="button" class="h-6 w-6 inline-flex transition duration-300 button-ease justify-center items-center px-0.5 py-0.5 border border-transparent text-sm font-medium rounded-full tracking-wide text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-1 focus:ring-blue-800 focus:border-blue-700 hidden"> | |
| <svg class="h-4 w-4 text-blue-50" x-description="Heroicon name: outline/plus" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path> | |
| </svg> | |
| </button> | |
| </div><input id="collapsible-feedback" class="toggle" type="checkbox" checked=""><label for="collapsible-feedback" class="group col-span-3 xl:col-span-2 sh-toggle fdbk-toggle flex inline-flex order-first space-x-1 items-center hover:text-blue-800 focus:text-blue-800 focus:outline-none" tabindex="0"><svg class="mt-0.5 -ml-1 flex-shrink-0 h-5 w-5 text-gray-100 group-hover:text-white group-hover:text-opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> | |
| <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path> | |
| </svg> | |
| <span class="text-smr uppercase font-semibold tracking-widest text-white pb-0 border-b-0 border-blue-100 group-hover:text-blue-100 group-focus:text-blue-800" style=" | |
| ">Dev Metrics Beta</span></label><div class="col-span-3 w-full px-0.5 space-y-3 collapsible-content"> | |
| <div class="w-full"> | |
| <p class="ml-1 mt-2 text-smr tracking-wide text-blue-100 leading-snug items-center">Thank you for trying out our new <span class="font-semibold text-white">Filters </span>and <span class="font-semibold text-white">Metrics page</span>. We appreciate your feedback to help us improve your Rollbar experience and delight you further 😊</p> | |
| </div> | |
| <div class="w-full"> | |
| <div class="mt-3 relative flex rounded-md shadow-none"> | |
| <div class="absolute inset-y-0 left-0 pl-3 mt-2.5 flex items-top pointer-events-none"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="h-5 w-5 text-gray-400" aria-hidden="true"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path> | |
| </svg> | |
| </div><textarea id="feedback" name="feedback" rows="2" class="block w-full shadow-none border border-gray-200 text-gray-900 text-sm leading-5 font-normal tracking-wide placeholder-gray-400 hover:border-blue-300 hover:text-gray-900 hover:placeholder-gray-500 focus:outline-none focus:placeholder-gray-500 focus:border-blue-400 focus:text-gray-900 focus:ring-1 focus:ring-blue-600 rounded-md pl-9" data-testid="project-search" placeholder="Hey there..."></textarea> | |
| </div> | |
| <p class="mt-2 text-sm text-red-600 invisible hidden" id="project-search-error">&nbsp</p> | |
| </div> | |
| <div class="flex justify-center text-xs uppercase tracking-wide font-normal text-blue-600 hidden"> | |
| <a class="inline-flex -mt-1.5 justify-center hover:text-blue-800 focus:outline-none focus:text-blue-800" href="#" aria-label="General" title="General">Show More <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mt-0 ml-0.5 self-center" fill="currentColor" viewBox="0 0 120 120"> | |
| <path xmlns="http://www.w3.org/2000/svg" d="M62.3,62.6l-8.6,8.6V29.3l8.6,8.6c1.4,1.5,3.8,1.6,5.3,0.2c1.5-1.4,1.6-3.8,0.2-5.3c-0.1-0.1-0.1-0.1-0.2-0.2l-15-15 c-1.5-1.5-3.8-1.5-5.3,0l-15,15c-1.4,1.5-1.3,3.9,0.2,5.3c1.4,1.3,3.7,1.3,5.1,0l8.6-8.6v41.9l-8.6-8.6c-1.4-1.5-3.8-1.6-5.3-0.2 c-1.5,1.4-1.6,3.8-0.2,5.3c0.1,0.1,0.1,0.1,0.2,0.2l15,15c1.5,1.5,3.8,1.5,5.3,0l15-15c1.5-1.4,1.6-3.8,0.2-5.3 c-1.4-1.5-3.8-1.6-5.3-0.2C62.5,62.5,62.4,62.5,62.3,62.6z"></path> | |
| </svg> | |
| </a> | |
| </div> | |
| <div class="flex justify-center items-center font-normal "> | |
| <a href="#" class="mb-2.5 text-smr tracking-wide text-blue-300 hover:text-blue-50 focus:outline-none focus:text-blue-white hidden"> | |
| Don't show again</a> | |
| <button type="button" class="group inline-flex items-center transition duration-300 button-ease shadow-none px-3.5 py-2 mb-2 border border-transparent text-sm leading-5 tracking-wide rounded-full text-white bg-transparent border border-blue-300 hover:bg-white hover:bg-opacity-10 hover:border-white focus:outline-none focus:ring-1 focus:ring-white focus:border-blue-50">Send Message</button> | |
| </div><div class="relative mt-6 mb-4 hidden"> | |
| <div class="absolute inset-0 flex items-center" aria-hidden="true"> | |
| <div class="w-3/4 border-t border-transparent mx-auto"></div> | |
| </div> | |
| <div class="relative flex justify-center"> | |
| <a class="flex inline-flex -mt-1 pl-2 border border-blue-300 bg-white text-xs tracking-wide leading-normal font-normal text-blue-600 hover:text-blue-800 hover:border-blue-500 focus:outline-none focus:text-blue-800 rounded-full" href="#" aria-label="Show-al" title="Show All">Show All <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-0.5 self-center" fill="currentColor" viewBox="0 -10 120 120"> | |
| <path xmlns="http://www.w3.org/2000/svg" d="M62.3,62.6l-8.6,8.6V29.3l8.6,8.6c1.4,1.5,3.8,1.6,5.3,0.2c1.5-1.4,1.6-3.8,0.2-5.3c-0.1-0.1-0.1-0.1-0.2-0.2l-15-15 c-1.5-1.5-3.8-1.5-5.3,0l-15,15c-1.4,1.5-1.3,3.9,0.2,5.3c1.4,1.3,3.7,1.3,5.1,0l8.6-8.6v41.9l-8.6-8.6c-1.4-1.5-3.8-1.6-5.3-0.2 c-1.5,1.4-1.6,3.8-0.2,5.3c0.1,0.1,0.1,0.1,0.2,0.2l15,15c1.5,1.5,3.8,1.5,5.3,0l15-15c1.5-1.4,1.6-3.8,0.2-5.3 c-1.4-1.5-3.8-1.6-5.3-0.2C62.5,62.5,62.4,62.5,62.3,62.6z"></path> | |
| </svg></a> | |
| </div> | |
| <div class="frelative flex justify-left text-xs tracking-wide leading-normal font-normal text-blue-600 bg-blue-50 rounded-full hidden"> | |
| <a class="flex inline-flex -mt-1 pl-2 leading-5 border border-blue-300 bg-blue-50 hover:text-blue-800 hover:border-blue-500 focus:outline-none focus:text-blue-800 rounded-full" href="#" aria-label="General" title="General">Show All <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-0.5 self-center" fill="currentColor" viewBox="0 -10 120 120"> | |
| <path xmlns="http://www.w3.org/2000/svg" d="M62.3,62.6l-8.6,8.6V29.3l8.6,8.6c1.4,1.5,3.8,1.6,5.3,0.2c1.5-1.4,1.6-3.8,0.2-5.3c-0.1-0.1-0.1-0.1-0.2-0.2l-15-15 c-1.5-1.5-3.8-1.5-5.3,0l-15,15c-1.4,1.5-1.3,3.9,0.2,5.3c1.4,1.3,3.7,1.3,5.1,0l8.6-8.6v41.9l-8.6-8.6c-1.4-1.5-3.8-1.6-5.3-0.2 c-1.5,1.4-1.6,3.8-0.2,5.3c0.1,0.1,0.1,0.1,0.2,0.2l15,15c1.5,1.5,3.8,1.5,5.3,0l15-15c1.5-1.4,1.6-3.8,0.2-5.3 c-1.4-1.5-3.8-1.6-5.3-0.2C62.5,62.5,62.4,62.5,62.3,62.6z"></path> | |
| </svg></a> | |
| </div></div><div class="flex justify-center w-full text-xs tracking-wide leading-normal font-normal text-blue-600 hidden"> | |
| <a class="flex inline-flex -mt-1 pl-2 leading-5 border border-blue-300 bg-blue-50 hover:text-blue-800 hover:border-blue-500 focus:outline-none focus:text-blue-800 rounded-full" href="#" aria-label="General" title="General">Show All <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 ml-0.5 self-center" fill="currentColor" viewBox="0 -10 120 120"> | |
| <path xmlns="http://www.w3.org/2000/svg" d="M62.3,62.6l-8.6,8.6V29.3l8.6,8.6c1.4,1.5,3.8,1.6,5.3,0.2c1.5-1.4,1.6-3.8,0.2-5.3c-0.1-0.1-0.1-0.1-0.2-0.2l-15-15 c-1.5-1.5-3.8-1.5-5.3,0l-15,15c-1.4,1.5-1.3,3.9,0.2,5.3c1.4,1.3,3.7,1.3,5.1,0l8.6-8.6v41.9l-8.6-8.6c-1.4-1.5-3.8-1.6-5.3-0.2 c-1.5,1.4-1.6,3.8-0.2,5.3c0.1,0.1,0.1,0.1,0.2,0.2l15,15c1.5,1.5,3.8,1.5,5.3,0l15-15c1.5-1.4,1.6-3.8,0.2-5.3 c-1.4-1.5-3.8-1.6-5.3-0.2C62.5,62.5,62.4,62.5,62.3,62.6z"></path> | |
| </svg></a> | |
| </div></div> | |
| </div> | |
| </div></aside></main> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let myLabels = document.querySelectorAll(".sh-toggle"); | |
| Array.from(myLabels).forEach((label) => { | |
| label.addEventListener("keydown", (e) => { | |
| if (e.which === 32 || e.which === 13) { | |
| e.preventDefault(); | |
| label.click(); | |
| } | |
| }); | |
| }); | |
| import * as tailwindcss from "https://cdn.skypack.dev/[email protected]"; | |
| import TailwindcssUi from "https://cdn.skypack.dev/@tailwindcss/[email protected]"; | |
| import TailwindcssCustomForms from "https://cdn.skypack.dev/@tailwindcss/[email protected]"; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* Note: Using Tailwind Components V2 CSS */ | |
| body { | |
| font-family: Bio-sans, -apple-system, sans-serif; | |
| } | |
| .text-smr { | |
| font-size: 0.812rem; | |
| /*line-height: 1.125rem; prevent cascade here but to uncomment for impl.*/ | |
| } | |
| .text-med { | |
| font-size: 0.937rem; | |
| /*line-height: 1.312rem; prevent cascade here but to uncomment for impl.*/ | |
| } | |
| .text-md /* support for old codepens, but use text-med moving forward */ { | |
| font-size: 0.937rem; | |
| line-height: 1.312rem; | |
| } | |
| textarea, | |
| input[type="range"], | |
| input, | |
| input:matches([type="password"], [type="search"]) { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| /*-webkit-tap-highlight-color: transparent;*/ | |
| } | |
| #slim-scroll::-webkit-scrollbar { | |
| width: 4px; | |
| cursor: pointer; | |
| } | |
| #slim-scroll::-webkit-scrollbar-track { | |
| background-color: rgba(232, 234, 240, var(--bg-opacity)); | |
| cursor: pointer; | |
| } | |
| #slim-scroll::-webkit-scrollbar-thumb { | |
| cursor: pointer; | |
| background-color: #b8c4db; | |
| } | |
| input#collapsible[type="checkbox"], | |
| input#collapsible-env[type="checkbox"], | |
| input#collapsible-sev[type="checkbox"], | |
| input#collapsible-feedback[type="checkbox"], | |
| input#collapsible-filter[type="checkbox"] { | |
| display: none; | |
| } | |
| .sh-toggle { | |
| cursor: pointer; | |
| transition: all 0.25s ease-out; | |
| } | |
| .sh-toggle:hover { | |
| color: #054dd7; | |
| } | |
| .sh-toggle svg { | |
| transform: rotate(180deg); | |
| transition: transform 0.2s ease-out; | |
| } | |
| .toggle:checked + .sh-toggle svg { | |
| transform: rotate(0deg); | |
| } | |
| .fdbk-toggle svg { | |
| transform: rotate(0deg); | |
| transition: transform 0.2s ease-out; | |
| } | |
| .toggle:checked + .fdbk-toggle svg { | |
| transform: rotate(180deg); | |
| } | |
| .collapsible-content { | |
| max-height: 0px; | |
| overflow: hidden; | |
| transition: max-height 0.25s ease-in-out; | |
| } | |
| .toggle:checked + .sh-toggle + .collapsible-content { | |
| max-height: 100vh; | |
| } | |
| .filter-toggle, .leftbar-toggle { | |
| cursor: pointer; | |
| transition: all 0.25s ease-out; | |
| z-index: 99; | |
| } | |
| .filter-toggle:hover, .leftbar-toggle:hover { | |
| color: #054dd7; | |
| } | |
| @media screen and (min-width: 1024px) { | |
| .filter-toggle, .leftbar-toggle { | |
| transform: translateX(-15rem); | |
| transition: transform 0.2s ease-out; | |
| } | |
| } | |
| @media screen and (min-width: 1280px) { | |
| .filter-toggle/*, .leftbar-toggle*/ { | |
| transform: translateX(-18rem); | |
| transition: transform 0.2s ease-out; | |
| } | |
| } | |
| @media screen and (min-width: 1536px) { | |
| .filter-toggle { | |
| transform: translateX(-20rem); | |
| transition: transform 0.2s ease-out; | |
| } | |
| } | |
| .toggle:checked + .filter-toggle, .toggle:checked + .leftbar-toggle { | |
| transform: translateX(0rem); | |
| transition: transform 0.2s ease-out; | |
| } | |
| .filter-toggle div svg, .leftbar-toggle div svg { | |
| transform: rotate(180deg); | |
| transition: transform 0.2s ease-out; | |
| } | |
| .toggle:checked + .filter-toggle div svg, .toggle:checked + .leftbar-toggle div svg { | |
| transform: rotate(0deg); | |
| } | |
| aside.collapsible-filter { | |
| max-width: 0px; | |
| overflow-x: hidden; | |
| transition: max-width 0.25s ease-in-out; | |
| } | |
| .toggle:checked + .filter-toggle + aside.collapsible-filter, .toggle:checked + .leftbar-toggle + aside.collapsible-filter { | |
| max-width: 20rem; | |
| } | |
| button, | |
| input, | |
| optgroup, | |
| select, | |
| textarea { | |
| font-family: Bio-sans, -apple-system, sans-serif; | |
| } | |
| .border-2 { | |
| border-width: 2px; | |
| } | |
| .hover\:border-2:hover { | |
| border-width: 2px; | |
| } | |
| .bg-current-nav-item { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(59, 115, 255, var(--tw-bg-opacity)); | |
| } | |
| .tracking-wide { | |
| letter-spacing: 0.009em; | |
| } | |
| .tracking-wider { | |
| letter-spacing: 0.018em; | |
| } | |
| .tracking-widest { | |
| letter-spacing: 0.025em; | |
| } | |
| .border, | |
| .border-0, | |
| .border-2, | |
| .border-4, | |
| .border-8, | |
| .border-b, | |
| .border-b-2, | |
| .border-l-2, | |
| .border-r, | |
| .border-r-2, | |
| .border-t, | |
| .border-t-2, | |
| .border-t-4, | |
| .lg\:border-b-0, | |
| .md\:border-t-4 { | |
| --tw-border-opacity: 1; | |
| border-color: rgba(229, 231, 235, var(--tw-border-opacity)); | |
| } | |
| .border-transparent { | |
| border-color: transparent; | |
| } | |
| .h-9\.5 { | |
| height: 2.375rem; | |
| } | |
| div.tooltip { | |
| position: relative; | |
| } | |
| .tooltip .tooltip-bottom { | |
| visibility: hidden; | |
| position: absolute; | |
| top: 80%; | |
| left: 0.25rem; | |
| z-index: 99; | |
| } | |
| div.tooltip:hover .tooltip-bottom { | |
| visibility: visible; | |
| } | |
| .tooltip-bottom::before { | |
| content: ""; | |
| display: block; | |
| width: 0; | |
| height: 0; | |
| border-left: 8px solid transparent; | |
| border-right: 8px solid transparent; | |
| border-bottom: 16px solid #343f55; | |
| transform: rotate(45deg); | |
| border-radius: 4px 0px 10px 0px; | |
| position: relative; | |
| top: 10px; | |
| left: calc(50% - 8px); | |
| z-index: -1; | |
| } | |
| input, | |
| select, | |
| textarea { | |
| padding-top: 0.5rem; | |
| padding-right: 0.75rem; | |
| padding-bottom: 0.5rem; | |
| padding-left: 0.75rem; | |
| } | |
| /*custom*/ | |
| .bg-octane-400 { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(250, 252, 116, var(--tw-bg-opacity)); | |
| } | |
| .bg-gray-50 { | |
| background-color: rgba(247, 249, 253, var(--tw-bg-opacity)); | |
| } | |
| .bg-gray-100 { | |
| background-color: rgba(236, 241, 249, var(--tw-bg-opacity)); | |
| } | |
| .bg-gray-200 { | |
| background-color: rgba(219, 227, 243, var(--tw-bg-opacity)); | |
| } | |
| .bg-gray-300 { | |
| background-color: rgba(182, 193, 215, var(--tw-bg-opacity)); | |
| } | |
| .bg-gray-600 { | |
| background-color: rgba(72, 85, 112, var(--tw-bg-opacity)); | |
| } | |
| .bg-gray-700 { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(52, 63, 85, var(--tw-bg-opacity)); | |
| } | |
| .bg-gray-800 { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(48, 56, 75, var(--tw-bg-opacity)); | |
| } | |
| .bg-gray-900 { | |
| background-color: rgba(40, 47, 62, var(--tw-bg-opacity)); | |
| } | |
| .bg-blue-50 { | |
| background-color: rgba(248, 251, 255, var(--tw-bg-opacity)); | |
| } | |
| .bg-blue-100 { | |
| background-color: rgba(235, 245, 255, var(--tw-bg-opacity)); | |
| } | |
| .bg-blue-200 { | |
| background-color: rgba(216, 230, 255, var(--tw-bg-opacity)); | |
| } | |
| .bg-blue-300 { | |
| background-color: rgba(177, 206, 251, var(--tw-bg-opacity)); | |
| } | |
| .bg-blue-500 { | |
| background-color: rgba(68, 132, 255, var(--tw-bg-opacity)); | |
| } | |
| .bg-blue-600 { | |
| background-color: rgba(60, 114, 255, var(--tw-bg-opacity)); | |
| } | |
| .bg-blue-700 { | |
| background-color: rgba(32, 91, 246, var(--tw-bg-opacity)); | |
| } | |
| .bg-blue-800 { | |
| background-color: rgba(5, 66, 216, var(--tw-bg-opacity)); | |
| } | |
| .bg-blue-900 { | |
| background-color: rgba(0, 60, 176, var(--tw-bg-opacity)); | |
| } | |
| .bg-yellow-50 { | |
| background-color: rgba(255, 252, 240, var(--tw-bg-opacity)); | |
| } | |
| .bg-yellow-100 { | |
| background-color: rgba(255, 250, 223, var(--tw-bg-opacity)); | |
| } | |
| .bg-yellow-200 { | |
| background-color: rgba(255, 246, 197, var(--tw-bg-opacity)); | |
| } | |
| .bg-yellow-300 { | |
| background-color: rgba(255, 229, 138, var(--tw-bg-opacity)); | |
| } | |
| .bg-yellow-400 { | |
| background-color: rgba(255, 215, 72, var(--tw-bg-opacity)); | |
| } | |
| .bg-yellow-500 { | |
| background-color: rgba(253, 200, 11, var(--tw-bg-opacity)); | |
| } | |
| .bg-yellow-600 { | |
| background-color: rgba(235, 169, 0, var(--tw-bg-opacity)); | |
| } | |
| .bg-yellow-700 { | |
| background-color: rgba(189, 117, 9, var(--tw-bg-opacity)); | |
| } | |
| .bg-orange-50 { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(255, 246, 242, var(--tw-bg-opacity)); | |
| } | |
| .bg-orange-100 { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(255, 233, 223, var(--tw-bg-opacity)); | |
| } | |
| .bg-orange-200 { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(255, 222, 207, var(--tw-bg-opacity)); | |
| } | |
| .bg-orange-300 { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(255, 189, 152, var(--tw-bg-opacity)); | |
| } | |
| .bg-orange-400 { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(255, 158, 116, var(--tw-bg-opacity)); | |
| } | |
| .bg-orange-500 { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(255, 142, 91, var(--tw-bg-opacity)); | |
| } | |
| .bg-orange-600 { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(244, 107, 46, var(--tw-bg-opacity)); | |
| } | |
| .bg-orange-700 { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(227, 88, 25, var(--tw-bg-opacity)); | |
| } | |
| .bg-red-50 { | |
| background-color: rgba(253, 248, 248, var(--tw-bg-opacity)); | |
| } | |
| .bg-red-200 { | |
| background-color: rgba(255, 224, 222, var(--tw-bg-opacity)); | |
| } | |
| .bg-red-300 { | |
| background-color: rgba(255, 166, 160, var(--tw-bg-opacity)); | |
| } | |
| .bg-red-400 { | |
| background-color: rgba(248, 135, 127, var(--tw-bg-opacity)); | |
| } | |
| .bg-red-500 { | |
| background-color: rgba(246, 96, 81, var(--tw-bg-opacity)); | |
| } | |
| .bg-red-600 { | |
| background-color: rgba(235, 81, 66, var(--tw-bg-opacity)); | |
| } | |
| .bg-red-700 { | |
| background-color: rgba(227, 88, 25, var(--tw-bg-opacity)); | |
| } | |
| .text-gray-50 { | |
| color: rgba(247, 249, 253, var(--tw-text-opacity)); | |
| } | |
| .text-gray-100 { | |
| color: rgba(236, 241, 249, var(--tw-text-opacity)); | |
| } | |
| .text-gray-200 { | |
| color: rgba(219, 227, 243, var(--tw-text-opacity)); | |
| } | |
| .text-gray-300 { | |
| color: rgba(182, 193, 215, var(--tw-text-opacity)); | |
| } | |
| .text-gray-400 { | |
| color: rgba(127, 146, 185, var(--tw-text-opacity)); | |
| } | |
| .text-gray-500 { | |
| color: rgba(94, 109, 140, var(--tw-text-opacity)); | |
| } | |
| .text-gray-600 { | |
| color: rgba(72, 85, 112, var(--tw-text-opacity)); | |
| } | |
| .text-gray-700 { | |
| color: rgba(52, 63, 85, var(--tw-text-opacity)); | |
| } | |
| .text-gray-800 { | |
| color: rgba(48, 56, 75, var(--tw-text-opacity)); | |
| } | |
| .text-blue-100 { | |
| --tw-text-opacity: 1; | |
| color: rgba(235, 245, 255, var(--tw-text-opacity)); | |
| } | |
| .text-blue-200 { | |
| --tw-text-opacity: 1; | |
| color: rgba(216, 230, 255, var(--tw-text-opacity)); | |
| } | |
| .text-blue-300 { | |
| --tw-text-opacity: 1; | |
| color: rgba(177, 206, 251, var(--tw-text-opacity)); | |
| } | |
| .text-blue-400 { | |
| --tw-text-opacity: 1; | |
| color: rgba(82, 146, 255, var(--tw-text-opacity)); | |
| } | |
| .text-blue-600 { | |
| --tw-text-opacity: 1; | |
| color: rgba(60, 114, 255, var(--tw-text-opacity)); | |
| } | |
| .text-blue-700 { | |
| --tw-text-opacity: 1; | |
| color: rgba(32, 91, 246, var(--tw-text-opacity)); | |
| } | |
| .text-blue-800 { | |
| --tw-text-opacity: 1; | |
| color: rgba(5, 66, 216, var(--tw-text-opacity)); | |
| } | |
| .text-blue-900 { | |
| --tw-text-opacity: 1; | |
| color: rgba(0, 60, 176, var(--tw-text-opacity)); | |
| } | |
| .text-yellow-50 { | |
| color: rgba(255, 252, 240, var(--tw-text-opacity)); | |
| } | |
| .text-yellow-100 { | |
| color: rgba(255, 250, 223, var(--tw-text-opacity)); | |
| } | |
| .text-yellow-200 { | |
| color: rgba(255, 246, 197, var(--tw-text-opacity)); | |
| } | |
| .text-yellow-300 { | |
| color: rgba(255, 229, 138, var(--tw-text-opacity)); | |
| } | |
| .text-yellow-400 { | |
| color: rgba(255, 215, 72, var(--tw-text-opacity)); | |
| } | |
| .text-yellow-500 { | |
| color: rgba(253, 200, 11, var(--tw-text-opacity)); | |
| } | |
| .text-yellow-600 { | |
| color: rgba(235, 169, 0, var(--tw-text-opacity)); | |
| } | |
| .text-yellow-700 { | |
| color: rgba(189, 117, 9, var(--tw-text-opacity)); | |
| } | |
| .text-orange-50 { | |
| color: rgba(255, 246, 242, var(--tw-text-opacity)); | |
| } | |
| .text-orange-100 { | |
| color: rgba(255, 233, 223, var(--tw-text-opacity)); | |
| } | |
| .text-orange-200 { | |
| color: rgba(255, 222, 207, var(--tw-text-opacity)); | |
| } | |
| .text-orange-300 { | |
| color: rgba(255, 189, 152, var(--tw-text-opacity)); | |
| } | |
| .text-orange-400 { | |
| color: rgba(255, 158, 116, var(--tw-text-opacity)); | |
| } | |
| .text-orange-500 { | |
| color: rgba(255, 142, 91, var(--tw-text-opacity)); | |
| } | |
| .text-orange-600 { | |
| color: rgba(244, 107, 46, var(--tw-text-opacity)); | |
| } | |
| .text-orange-700 { | |
| color: rgba(227, 88, 25, var(--tw-text-opacity)); | |
| } | |
| .text-orange-800 { | |
| color: rgba(202, 79, 22, var(--tw-text-opacity)); | |
| } | |
| .text-red-50 { | |
| color: rgba(253, 248, 248, var(--tw-text-opacity)); | |
| } | |
| .text-red-200 { | |
| color: rgba(255, 224, 222, var(--tw-text-opacity)); | |
| } | |
| .text-red-300 { | |
| color: rgba(255, 166, 160, var(--tw-text-opacity)); | |
| } | |
| .text-red-400 { | |
| color: rgba(248, 135, 127, var(--tw-text-opacity)); | |
| } | |
| .text-red-500 { | |
| color: rgba(246, 96, 81, var(--tw-text-opacity)); | |
| } | |
| .text-red-600 { | |
| color: rgba(235, 81, 66, var(--tw-text-opacity)); | |
| } | |
| .text-red-700 { | |
| color: rgba(216, 53, 37, var(--tw-text-opacity)); | |
| } | |
| .divide-gray-50 { | |
| border-color: rgba(247, 249, 253, var(--tw-divide-opacity)); | |
| } | |
| .divide-gray-100 { | |
| border-color: rgba(236, 241, 249, var(--tw-divide-opacity)); | |
| } | |
| .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { | |
| --tw-divide-opacity: 1; | |
| border-color: rgba(236, 241, 249, var(--tw-divide-opacity)); | |
| } | |
| .divide-gray-200 { | |
| border-color: rgba(219, 227, 243, var(--tw-divide-opacity)); | |
| } | |
| .divide-blue-50 { | |
| border-color: rgba(248, 251, 255, var(--tw-divide-opacity)); | |
| } | |
| .divide-blue-100 { | |
| border-color: rgba(235, 245, 255, var(--tw-divide-opacity)); | |
| } | |
| .border-blue-50 { | |
| border-color: rgba(248, 251, 255, var(--tw-border-opacity)); | |
| } | |
| .border-blue-100 { | |
| border-color: rgba(235, 245, 255, var(--tw-border-opacity)); | |
| } | |
| .border-blue-200 { | |
| border-color: rgba(216, 230, 255, var(--tw-border-opacity)); | |
| } | |
| .border-blue-300 { | |
| border-color: rgba(177, 206, 251, var(--tw-border-opacity)); | |
| } | |
| .border-blue-400 { | |
| border-color: rgba(82, 146, 255, var(--tw-border-opacity)); | |
| } | |
| .border-blue-500 { | |
| border-color: rgba(68, 132, 255, var(--tw-border-opacity)); | |
| } | |
| .border-blue-600 { | |
| border-color: rgba(60, 114, 255, var(--tw-border-opacity)); | |
| } | |
| .border-blue-700 { | |
| border-color: rgba(32, 91, 246, var(--tw-border-opacity)); | |
| } | |
| .border-blue-800 { | |
| border-color: rgba(5, 66, 216, var(--tw-border-opacity)); | |
| } | |
| .border-gray-50 { | |
| border-color: rgba(247, 249, 253, var(--tw-border-opacity)); | |
| } | |
| .border-gray-100 { | |
| border-color: rgba(236, 241, 249, var(--tw-border-opacity)); | |
| } | |
| .border-gray-200 { | |
| border-color: rgba(219, 227, 243, var(--tw-border-opacity)); | |
| } | |
| .border-gray-300 { | |
| border-color: rgba(182, 193, 215, var(--tw-border-opacity)); | |
| } | |
| .border-gray-400 { | |
| border-color: rgba(127, 146, 185, var(--tw-border-opacity)); | |
| } | |
| .border-gray-500 { | |
| border-color: rgba(94, 109, 140, var(--tw-border-opacity)); | |
| } | |
| .border-gray-600 { | |
| border-color: rgba(72, 85, 112, var(--tw-border-opacity)); | |
| } | |
| .border-gray-700 { | |
| --tw-border-opacity: 1; | |
| border-color: rgba(52, 63, 85, var(--tw-border-opacity)); | |
| } | |
| .hover\:bg-gray-50:hover { | |
| background-color: rgba(247, 249, 253, var(--tw-bg-opacity)); | |
| } | |
| .hover\:bg-gray-600:hover { | |
| background-color: rgba(72, 85, 112, var(--tw-bg-opacity)); | |
| } | |
| .hover\:bg-gray-700:hover { | |
| background-color: rgba(52, 63, 85, var(--tw-bg-opacity)); | |
| } | |
| .hover\:bg-gray-800:hover { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(48, 56, 75, var(--tw-bg-opacity)); | |
| } | |
| .hover\:bg-gray-900:hover { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(40, 47, 62, var(--tw-bg-opacity)); | |
| } | |
| .hover\:bg-blue-50:hover { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(248, 251, 255, var(--tw-bg-opacity)); | |
| } | |
| .hover\:bg-blue-100:hover { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(235, 245, 255, var(--tw-bg-opacity)); | |
| } | |
| .hover\:bg-blue-200:hover { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(216, 230, 255, var(--tw-bg-opacity)); | |
| } | |
| .hover\:bg-blue-300:hover { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(177, 206, 251, var(--tw-bg-opacity)); | |
| } | |
| .hover\:bg-blue-700:hover { | |
| background-color: rgba(32, 91, 246, var(--tw-bg-opacity)); | |
| } | |
| .hover\:bg-blue-800:hover { | |
| background-color: rgba(5, 66, 216, var(--tw-bg-opacity)); | |
| } | |
| .hover\:bg-blue-900:hover { | |
| background-color: rgba(0, 60, 176, var(--tw-bg-opacity)); | |
| } | |
| .hover\:border-blue-300:hover { | |
| border-color: rgba(177, 206, 251, var(--tw-border-opacity)); | |
| } | |
| .hover\:border-gray-500:hover { | |
| border-color: rgba(94, 109, 140, var(--tw-border-opacity)); | |
| } | |
| .hover\:text-gray-200:hover { | |
| --tw-text-opacity: 1; | |
| color: rgba(219, 227, 243, var(--tw-text-opacity)); | |
| } | |
| .hover\:text-gray-500:hover { | |
| color: rgba(94, 109, 140, var(--tw-text-opacity)); | |
| } | |
| .hover\:text-gray-600:hover { | |
| color: rgba(72, 85, 112, var(--tw-text-opacity)); | |
| } | |
| .hover\:text-gray-700:hover { | |
| color: rgba(52, 63, 85, var(--tw-text-opacity)); | |
| } | |
| .hover\:text-gray-800:hover { | |
| color: rgba(48, 56, 75, var(--tw-text-opacity)); | |
| } | |
| .hover\:text-blue-100:hover { | |
| --tw-text-opacity: 1; | |
| color: rgba(235, 245, 255, var(--tw-text-opacity)); | |
| } | |
| .hover\:text-blue-200:hover { | |
| --tw-text-opacity: 1; | |
| color: rgba(216, 230, 255, var(--tw-text-opacity)); | |
| } | |
| .hover\:text-blue-700:hover { | |
| color: rgba(32, 91, 246, var(--tw-text-opacity)); | |
| } | |
| .hover\:text-blue-800:hover { | |
| color: rgba(5, 66, 216, var(--tw-text-opacity)); | |
| } | |
| .hover\:text-orange-700:hover { | |
| color: rgba(227, 88, 25, var(--tw-text-opacity)); | |
| } | |
| .hover\:text-orange-800:hover { | |
| color: rgba(202, 79, 22, var(--tw-text-opacity)); | |
| } | |
| .group:hover .group-hover\:text-orange-500 { | |
| --tw-text-opacity: 1; | |
| color: rgba(255, 142, 91, var(--tw-text-opacity)); | |
| } | |
| .group:hover .group-hover\:text-orange-600 { | |
| --tw-text-opacity: 1; | |
| color: rgba(244, 107, 46, var(--tw-text-opacity)); | |
| } | |
| .group:hover .group-hover\:text-orange-700 { | |
| --tw-text-opacity: 1; | |
| color: rgba(227, 88, 25, var(--tw-text-opacity)); | |
| } | |
| .group:hover .group-hover\:text-orange-800 { | |
| --tw-text-opacity: 1; | |
| color: rgba(202, 79, 22, var(--tw-text-opacity)); | |
| } | |
| .group:hover .group-hover\:text-yellow-400 { | |
| --tw-text-opacity: 1; | |
| color: rgba(255, 215, 72, var(--tw-text-opacity)); | |
| } | |
| .group:hover .group-hover\:text-yellow-500 { | |
| --tw-text-opacity: 1; | |
| color: rgba(253, 200, 11, var(--tw-text-opacity)); | |
| } | |
| .group:hover .group-hover\:text-yellow-600 { | |
| --tw-text-opacity: 1; | |
| color: rgba(235, 169, 0, var(--tw-text-opacity)); | |
| } | |
| .group:hover .group-hover\:text-blue-700 { | |
| --tw-text-opacity: 1; | |
| color: rgba(32, 91, 246, var(--tw-text-opacity)); | |
| } | |
| .group:hover .group-hover\:text-blue-800 { | |
| --tw-text-opacity: 1; | |
| color: rgba(5, 66, 216, var(--tw-text-opacity)); | |
| } | |
| .group:hover .group-hover\:bg-blue-200 { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(216, 230, 255, var(--tw-bg-opacity)); | |
| } | |
| group-hover:bg-blue-500 .group-hover\:bg-blue-500 { | |
| background-color: rgba(68, 132, 255, var(--tw-bg-opacity)); | |
| } | |
| group-hover:bg-blue-600 .group-hover\:bg-blue-600 { | |
| background-color: rgba(60, 114, 255, var(--tw-bg-opacity)); | |
| } | |
| .group:hover .group-hover\:bg-blue-700 { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(32, 91, 246, var(--tw-bg-opacity)); | |
| } | |
| group-hover:bg-gray-500 .group-hover\:bg-gray-600 { | |
| background-color: rgba(94, 109, 140, var(--tw-bg-opacity)); | |
| } | |
| group-hover:bg-gray-600 .group-hover\:bg-gray-600 { | |
| background-color: rgba(72, 85, 112, var(--tw-bg-opacity)); | |
| } | |
| group-hover:bg-gray-700 .group-hover\:bg-gray-700 { | |
| background-color: rgba(52, 63, 85, var(--tw-bg-opacity)); | |
| } | |
| group-hover:text-blue-100 .group-hover\:text-blue-100 { | |
| color: rgba(235, 245, 255, var(--tw-text-opacity)); | |
| } | |
| group-hover:text-blue-200 .group-hover\:text-blue-200 { | |
| color: rgba(216, 230, 255, var(--tw-text-opacity)); | |
| } | |
| .group:hover .group-hover\:text-gray-500 { | |
| --tw-text-opacity: 1; | |
| color: rgba(94, 109, 140, var(--tw-text-opacity)); | |
| } | |
| group-hover:text-gray-500:hover .group-hover\:text-gray-500 { | |
| color: rgba(94, 109, 140, var(--tw-text-opacity)); | |
| } | |
| group-hover:text-gray-600:hover .group-hover\:text-gray-600 { | |
| color: rgba(72, 85, 112, var(--tw-text-opacity)); | |
| } | |
| group-focus:text-blue-100 .group-focus\:text-blue-100 { | |
| color: rgba(235, 245, 255, var(--tw-text-opacity)); | |
| } | |
| group-focus:text-blue-800 .group-focus\:text-blue-800 { | |
| color: rgba(32, 91, 246, var(--tw-text-opacity)); | |
| } | |
| group-focus:text-blue-800 .group-focus\:text-blue-800 { | |
| color: rgba(5, 66, 216, var(--tw-text-opacity)); | |
| } | |
| .focus\:ring-blue-600:focus { | |
| --tw-ring-color: rgba(56, 112, 255, var(--tw-ring-opacity)); | |
| } | |
| .focus\:ring-blue-700:focus { | |
| --tw-ring-color: rgba(32, 91, 246, var(--tw-ring-opacity)); | |
| } | |
| .focus\:ring-blue-800:focus { | |
| --tw-ring-color: rgba(5, 66, 216, var(--tw-ring-opacity)); | |
| } | |
| .focus\:border-blue-400:focus { | |
| border-color: rgba(82, 146, 255, var(--tw-border-opacity)); | |
| } | |
| .focus\:border-blue-500:focus { | |
| border-color: rgba(68, 132, 255, var(--tw-border-opacity)); | |
| } | |
| .focus\:border-blue-600:focus { | |
| border-color: rgba(60, 114, 255, var(--tw-border-opacity)); | |
| } | |
| .focus\:border-blue-700:focus { | |
| border-color: rgba(32, 91, 246, var(--tw-border-opacity)); | |
| } | |
| .focus\:text-blue-800:focus { | |
| --tw-text-opacity: 1; | |
| color: rgba(5, 66, 216, var(--tw-text-opacity)); | |
| } | |
| .focus\:bg-blue-100:focus { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(235, 245, 255, var(--tw-bg-opacity)); | |
| } | |
| .focus\:bg-blue-200:focus { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(216, 230, 255, var(--tw-bg-opacity)); | |
| } | |
| .focus\:bg-blue-600:focus { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(60, 114, 255, var(--tw-bg-opacity)); | |
| } | |
| .focus\:bg-blue-700:focus { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(32, 91, 246, var(--tw-bg-opacity)); | |
| } | |
| .focus\:.text-gray-900:focus { | |
| color: rgba(40, 47, 62, var(--tw-text-opacity)); | |
| } | |
| /*--- input validation ---*/ | |
| .border-red-300 { | |
| color: rgba(255, 166, 160, var(--tw-border-opacity)); | |
| } | |
| .placeholder-red-400 { | |
| color: rgba(248, 135, 127, var(--tw-placeholder-opacity)); | |
| } | |
| .placeholder-red-500 { | |
| color: rgba(246, 96, 81, var(--tw-placeholder-opacity)); | |
| } | |
| .placeholder-red-600 { | |
| color: rgba(235, 81, 66, var(--tw-placeholder-opacity)); | |
| } | |
| .hover\:text-red-700:hover { | |
| color: rgba(227, 88, 25, var(--tw-text-opacity)); | |
| } | |
| .hover\:text-red-800:hover { | |
| color: rgba(192, 46, 33, var(--tw-text-opacity)); | |
| } | |
| .group:hover .group-hover\:text-red-700 { | |
| --tw-text-opacity: 1; | |
| color: rgba(227, 88, 25, var(--tw-text-opacity)); | |
| } | |
| .group:hover .group-hover\:text-red-800 { | |
| --tw-text-opacity: 1; | |
| color: rgba(192, 46, 33, var(--tw-text-opacity)); | |
| } | |
| .hover\:border-red-500:hover { | |
| color: rgba(246, 96, 81, var(--tw-border-opacity)); | |
| } | |
| .hover\:placeholder-red-600:hover { | |
| color: rgba(235, 81, 66, var(--tw-placeholder-opacity)); | |
| } | |
| .focus\:border-red-300:focus { | |
| color: rgba(255, 166, 160, var(--tw-border-opacity)); | |
| } | |
| .focus\:placeholder-red-600:focus { | |
| color: rgba(235, 81, 66, var(--tw-placeholder-opacity)); | |
| } | |
| .grid-cols-6 { | |
| grid-template-columns: repeat(6, minmax(0, 1fr)); | |
| } | |
| .grid-cols-10 { | |
| grid-template-columns: repeat(10, minmax(0, 1fr)); | |
| } | |
| /*mobile overlay-opacity 75*/ | |
| bg-gray-600 { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(72, 85, 112, var(--tw-bg-opacity)); | |
| } | |
| /*mobile menu items*/ | |
| .hover\:bg-gray-800:hover { | |
| --tw-bg-opacity: 1; | |
| background-color: rgba(48, 56, 75, var(--tw-bg-opacity)); | |
| } | |
| .ease-in-out { | |
| transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .scale-105, | |
| .transform { | |
| transform: var(--tw-transform); | |
| } | |
| .hover\:scale-105:hover, | |
| .hover\:transform:hover { | |
| transform: var(--tw-transform); | |
| } | |
| .to-gray-50 { | |
| --tw-gradient-to: #f7f9fd; | |
| } | |
| .to-gray-600 { | |
| --tw-gradient-to: #485570; | |
| } | |
| .to-gray-700 { | |
| --tw-gradient-to: #343f55; | |
| } | |
| .to-blue-500 { | |
| --tw-gradient-to: #4484FF; | |
| } | |
| .to-blue-600 { | |
| --tw-gradient-to: #3c72ff; | |
| } | |
| .to-blue-700 { | |
| --tw-gradient-to: #205bf6; | |
| } | |
| .to-blue-800 { | |
| --tw-gradient-to: #0542D8; | |
| } | |
| .to-blue-900 { | |
| --tw-gradient-to: #003cb0; | |
| } | |
| .to-orange-500 { | |
| --tw-gradient-to: #ff8e5b; | |
| } | |
| .to-orange-600 { | |
| --tw-gradient-to: #f46b2e; | |
| } | |
| .to-orange-700 { | |
| --tw-gradient-to: #e35819; | |
| } | |
| .to-octane-400 { | |
| --tw-gradient-to: #FAFC74; | |
| } | |
| .to-octane-600 { | |
| --tw-gradient-to: #e1e42f; | |
| } | |
| .from-blue-50 { | |
| --tw-gradient-from: #f8fbff; | |
| --tw-gradient-stops: var(--tw-gradient-from), | |
| var(--tw-gradient-to, rgba(248, 251, 255, 0)); | |
| } | |
| .from-blue-600 { | |
| --tw-gradient-from: #3c72ff; | |
| --tw-gradient-stops: var(--tw-gradient-from), | |
| var(--tw-gradient-to, rgba(60, 115, 255, 0)); | |
| } | |
| .from-blue-700 { | |
| --tw-gradient-from: #205bf6; | |
| --tw-gradient-stops: var(--tw-gradient-from), | |
| var(--tw-gradient-to, rgba(32, 91, 246, 0)); | |
| } | |
| .from-blue-800 { | |
| --tw-gradient-from: #0542D8; | |
| --tw-gradient-stops: var(--tw-gradient-from), | |
| var(--tw-gradient-to, rgba(5, 66, 216, 0)); | |
| } | |
| .from-blue-900 { | |
| --tw-gradient-from: #003cb0; | |
| --tw-gradient-stops: var(--tw-gradient-from), | |
| var(--tw-gradient-to, rgba(0, 60, 176, 0)); | |
| } | |
| .from-gray-700 { | |
| --tw-gradient-from: #343F55; | |
| --tw-gradient-stops: var(--tw-gradient-from),var(--tw-gradient-to, rgba(52, 63, 85, 0)); | |
| } | |
| .from-purple-500 { | |
| --tw-gradient-from: #747cff; | |
| --tw-gradient-stops: var(--tw-gradient-from), | |
| var(--tw-gradient-to, rgba(122, 124, 255, 0)); | |
| } | |
| .from-purple-600 { | |
| --tw-gradient-from: #6062ff; | |
| --tw-gradient-stops: var(--tw-gradient-from), | |
| var(--tw-gradient-to, rgba(96, 98, 255, 0)); | |
| } | |
| .from-purple-700 { | |
| --tw-gradient-from: #5045FF; /*old 4c48ff*/ | |
| --tw-gradient-stops: var(--tw-gradient-from), | |
| var(--tw-gradient-to, rgba(80, 69, 255, 0)); | |
| } | |
| .from-octane-500 { | |
| --tw-gradient-from: #eef139; | |
| --tw-gradient-stops: var(--tw-gradient-from), | |
| var(--tw-gradient-to, rgba(238, 241, 57, 0)); | |
| } | |
| .via-blue-50 { | |
| --tw-gradient-stops: var(--tw-gradient-from), #f8fbff, | |
| var(--tw-gradient-to, rgba(248, 251, 255, 0)); | |
| } | |
| .via-blue-500 { | |
| --tw-gradient-stops: var(--tw-gradient-from), #4484ff, | |
| var(--tw-gradient-to, rgba(68, 132, 255, 0)); | |
| } | |
| .via-blue-600 { | |
| --tw-gradient-stops: var(--tw-gradient-from), #3c72ff, | |
| var(--tw-gradient-to, rgba(60, 114, 255, 0)); | |
| } | |
| .via-blue-700 { | |
| --tw-gradient-stops: var(--tw-gradient-from), #205bf6, | |
| var(--tw-gradient-to, rgba(32, 91, 246, 0)); | |
| } | |
| .via-blue-800 { | |
| --tw-gradient-stops: var(--tw-gradient-from), #0542D8, /*old #054dd7*/ | |
| var(--tw-gradient-to, rgba(5, 66, 216, 0)); | |
| } | |
| .via-blue-900 { | |
| --tw-gradient-stops: var(--tw-gradient-from), #003CB0, | |
| var(--tw-gradient-to, rgba(0, 60, 176, 0)); | |
| } | |
| .via-purple-500 { | |
| --tw-gradient-stops: var(--tw-gradient-from), #7a7cff, | |
| var(--tw-gradient-to, rgba(122, 124, 255, 0)); | |
| } | |
| .via-purple-600 { | |
| --tw-gradient-stops: var(--tw-gradient-from), #6062ff, | |
| var(--tw-gradient-to, rgba(96, 98, 255, 0)); | |
| } | |
| .via-purple-700 { | |
| --tw-gradient-stops: var(--tw-gradient-from), #4c48ff, | |
| var(--tw-gradient-to, rgba(76, 72, 255, 0)); | |
| } | |
| .via-gray-600 { | |
| --tw-gradient-stops: var(--tw-gradient-from), #485570, | |
| var(--tw-gradient-to, rgba(72, 85, 112, 0)); | |
| } | |
| .via-gray-700 { | |
| --tw-gradient-stops: var(--tw-gradient-from), #343f55, | |
| var(--tw-gradient-to, rgba(52, 63, 85, 0)); | |
| } | |
| .via-white { | |
| --tw-gradient-stops: var(--tw-gradient-from), #fff, | |
| var(--tw-gradient-to, rgba(255, 255, 255, 0)); | |
| } | |
| .bg-opacity-10 { | |
| --tw-bg-opacity: 0.1; | |
| } | |
| .bg-opacity-20 { | |
| --tw-bg-opacity: 0.2; | |
| } | |
| .bg-opacity-30 { | |
| --tw-bg-opacity: 0.3; | |
| } | |
| .bg-opacity-50 { | |
| --tw-bg-opacity: 0.5; | |
| } | |
| .hover\:bg-opacity-10:hover { | |
| --tw-bg-opacity: 0.1; | |
| } | |
| .hover\:bg-opacity-20:hover { | |
| --tw-bg-opacity: 0.2; | |
| } | |
| .hover\:bg-opacity-30:hover { | |
| --tw-bg-opacity: 0.3; | |
| } | |
| .hover\:bg-opacity-40:hover { | |
| --tw-bg-opacity: 0.4; | |
| } | |
| .hover\:bg-opacity-50:hover { | |
| --tw-bg-opacity: 0.5; | |
| } | |
| .hover\:bg-opacity-60:hover { | |
| --tw-bg-opacity: 0.6; | |
| } | |
| .hover\:bg-opacity-90:hover { | |
| --tw-bg-opacity: 0.9; | |
| } | |
| .border-r { | |
| border-right-width: 1px; | |
| } | |
| .border-r-2 { | |
| border-right-width: 2px; | |
| } | |
| .border-opacity-30 { | |
| --tw-border-opacity: 0.3; | |
| } | |
| .border-opacity-40 { | |
| --tw-border-opacity: 0.4; | |
| } | |
| .border-opacity-90 { | |
| --tw-border-opacity: 0.9; | |
| } | |
| .shadow-sm { | |
| --tw-shadow: 0 1px 2px 0 rgba (52, 63, 85, 0.05); | |
| box-shadow: var(--tw-ring-offset-shadow, 0 0 #343f55), | |
| var(--tw-ring-shadow, 0 0 #343f55), var(--tw-shadow); | |
| } | |
| @media (min-width: 640px) { | |
| .sm\:shadow-sm { | |
| --tw-shadow: 0 1px 2px 0 rgba (52, 63, 85, 0.05); | |
| box-shadow: var(--tw-ring-offset-shadow, 0 0 #343f55), | |
| var(--tw-ring-shadow, 0 0 #343f55), var(--tw-shadow); | |
| } | |
| } | |
| @media (min-width: 1280px) { | |
| .xl\:border-gray-100 { | |
| border-color: rgba(236, 241, 249, var(--tw-border-opacity)); | |
| } | |
| .xl\:border-gray-200 { | |
| border-color: rgba(219, 227, 243, var(--tw-border-opacity)); | |
| } | |
| } | |
| /*to add variant plugin for hover and group-hover font-{weight} | |
| // tailwind.config.js | |
| module.exports = { | |
| variants: { | |
| extend: { | |
| // ... | |
| fontWeight: ['hover', 'focus'], | |
| } | |
| } | |
| } */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://use.typekit.net/wfk6sbz.css" rel="stylesheet" /> | |
| <link href="https://heyatsuko.com/libs/rb-tw.css" rel="stylesheet" /> | |
| <link href="https://tailwindui.com/css/components-v2.css" rel="stylesheet" /> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment