Skip to content

Instantly share code, notes, and snippets.

@neisdev

neisdev/index.html

Created August 11, 2024 22:51
Show Gist options
  • Save neisdev/2b413f49fa963ca5eb8295d5e35ead44 to your computer and use it in GitHub Desktop.
Save neisdev/2b413f49fa963ca5eb8295d5e35ead44 to your computer and use it in GitHub Desktop.
Download ZIP
Projects responsive - rb3.0
Raw
index.html
<div class="relative h-screen flex overflow-hidden bg-gradient-to-r from-white via-blue-50 to-gray-50">
<!-- Narrow sidebar -->
<aside class="flex w-40 h-screen bg-gradient-to-bl from-gray-700 via-gray-700 to-gray-800 md:flex-shrink-0 flex-col">
<div class="flex-1 flex flex-col pt-5 pb-4 overflow-y-auto">
<header class="flex items-center flex-shrink-0 border-bottom border-solid border-gray-100"><img class="px-3 h-6 w-auto " src="https://app.rollbar.com//images/common/rollbar-icon-white.svg" alt="" aria-hidden="true"><span class="text-sm font-bold tracking-wider text-white">Rollbar</span></header>
<nav class="mt-5 mx-1 flex-1 space-y-1"><a class="text-gray-300 fill-current hover:text-white hover:no-underline group flex items-center px-3 py-2 text-sm gap-x-2.5 font-normal rounded-md" href="https://rollbar.com/Rollbar/"><svg class="h-6 w-6 group-hover:text-gray-100 " 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>Dashboard</a><a class="text-gray-300 fill-current hover:text-white hover:no-underline group flex items-center px-3 py-2 text-sm font-normal gap-x-2.5 rounded-md" href="https://rollbar.com/Rollbar/all/items"><svg class="group-hover:text-gray-100 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>Items</a><a class="text-gray-300 fill-current hover:text-white hover:no-underline group flex items-center px-3 py-2 text-sm font-normal gap-x-2.5 rounded-md" href="https://rollbar.com/Rollbar/all/versions"><svg class="flex-shrink-0 h-5 w-5" aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<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>Version</a><a class="text-gray-300 fill-current hover:text-white hover:no-underline group flex items-center px-3 py-2 text-sm font-normal gap-x-2.5 rounded-md" href="https://rollbar.com/Rollbar/all/deploys"><svg class="h-5 w-5 group-hover:text-gray-100 " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 23" 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>Deploys</a><a class="text-gray-300 fill-current hover:text-white hover:no-underline group flex items-center px-3 py-2 text-sm font-normal gap-x-2.5 rounded-md" href="https://rollbar.com/Rollbar/all/rql"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 flex-shrink-0" fill="none" viewBox="0 0 22 22" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path>
</svg>RQL</a><a class="text-gray-300 fill-current hover:text-white hover:no-underline group flex items-center px-3 py-2 text-sm font-normal gap-x-2.5 rounded-md" href="https://rollbar.com/Rollbar/all/people"><svg class="h-5 w-5 group-hover:text-gray-100 " 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 class="bg-current-nav-item text-white fill-current hover:text-white hover:no-underline group flex items-center px-3 py-2 text-sm font-normal gap-x-2.5 rounded-md" href="/a/Rollbar/projects"><svg class="h-5 w-5 group-hover:text-gray-100 " 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 class="text-gray-300 fill-current hover:text-white hover:no-underline group flex items-center px-3 py-2 text-xs font-normal gap-x-2.5" href="https://rollbar.com/settings/accounts/Rollbar/"><svg class="text-gray-300 h-5 w-5 group-hover:text-gray-100 " xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 22 22" 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></nav>
</div>
<div class="flex-shrink-0 flex flex-col py-4"><a class="text-gray-300 fill-current hover:text-white hover:no-underline group flex items-center px-3 py-2 text-sm font-normal rounded-md" href="https://headwayapp.co/rollbar-changelog"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class=" mr-2.5 flex-shrink-0 h-5 w-5" 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 class="text-gray-300 fill-current hover:text-white hover:no-underline group flex items-center px-3 py-2 text-sm font-normal rounded-md" href="https://rollbar.com/settings/accounts/Rollbar/subscription/change/"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="mr-2.5 flex-shrink-0 h-5 w-5" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"></path>
</svg>Upgrade</a><a class="text-gray-300 fill-current hover:text-white hover:no-underline group flex items-center px-3 py-2 text-sm font-normal rounded-md" href="/a/Rollbar/projects#"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="mr-2.5 flex-shrink-0 h-5 w-5" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>Help</a><a data-testid="desktop-user-menu" href="https://rollbar.com/settings" class="flex-shrink-0 w-full px-3 group flex rounded-md items-center group-hover:text-white group-hover:no-underline mt-2"><img class="block h-7 w-7 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=2&amp;w=256&amp;h=256&amp;q=80" alt="">
<div class="ml-3">
<p class="text-xs text-white font-bold tracking-widest">atsuko</p>
<p class="text-xs text-gray-300">Manage Settings</p>
</div>
</a></div>
</aside>
<!--
Mobile menu
Off-canvas menu for mobile, show/hide based on off-canvas menu state.
-->
<div class="hidden md:hidden" role="dialog" aria-modal="true">
<div class="fixed inset-0 z-40 flex">
<!--
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 max-w-xs w-full bg-gradient-to-b from-gray-700 via-gray-700 to-gray-800 pt-5 pb-4 flex-1 flex flex-col">
<!--
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-1 right-0 -mr-14 p-1">
<button type="button" class="h-12 w-12 rounded-full flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-white">
<!-- 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>
<span class="sr-only">Close sidebar</span>
</button>
</div>
<div class="flex-shrink-0 px-4 flex items-center">
<img class="px-3 h-7 w-auto opacity-90" src="https://app.rollbar.com//images/common/rollbar-icon-white.svg" alt="" aria-hidden="true">
<span class="text-base text-white font-bold tracking-wider">Rollbar</span>
</div>
<div class="mt-5 flex-1 h-0 px-2 overflow-y-auto">
<nav class="h-full flex flex-col">
<div class="space-y-1">
<a href="#" class="text-gray-100 hover:bg-gray-800 hover:text-gray-200 group py-2 px-3 rounded-md flex items-center text-sm font-normal tracking-wide">
<!--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="text-gray-100 hover:bg-gray-800 hover:text-gray-200 group py-2 px-3 rounded-md flex items-center text-sm font-normal tracking-wide">
<!-- 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>All Files</span>
</a>
<a href="#" class="fill-current text-gray-100 hover:bg-gray-800 hover:text-gray-200 group py-2 px-3 rounded-md flex items-center text-sm font-normal tracking-wide" 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 24 24" 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 text-gray-100 hover:bg-gray-800 hover:text-gray-200 group py-2 px-3 rounded-md flex items-center text-sm font-normal tracking-wide" 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 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>
<span>People</span>
</a>
<a href="#" class="fill-current text-gray-100 hover:bg-gray-800 hover:text-gray-200 group py-2 px-3 rounded-md flex items-center text-sm font-normal tracking-wide">
<!-- 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 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>
<span>Projects</span>
</a>
<a href="#" class="text-gray-100 hover:bg-gray-800 hover:text-gray-200 group py-2 px-3 rounded-md flex items-center text-sm font-normal tracking-wide">
<!-- 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 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>Settings</span>
</a>
</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>
</div>
<!-- Content area -->
<section aria-labelledby="projects-header" class="min-w-0 flex-1 lg:h-full flex flex-col overflow-y-auto lg:overflow-hidden">
<!-- Title, subtext, buttons, ellipsis menu -->
<div class="bg-transparent shadow-none">
<div class="flex justify-between items-center pl-4 pr-2 sm:px-6 lg:px-8 pb-2">
<div class="sm:w-0 flex-1">
<!-- responsive breadcrumb --->
<div class="mb-1 mt-5 hidden">
<nav class="flex" aria-label="Breadcrumb">
<div class="flex sm:hidden">
<a href="#" class="group inline-flex space-x-3 items-center text-sm font-medium text-gray-500 hover:text-blue-600">
<svg class="flex-shrink-0 -mr-1 mt-0.5 h-4 w-4 text-gray-400 group-hover:text-gray-600" x-description="Heroicon name: solid/arrow-narrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd"></path>
</svg>
<span>Back to Projects</span>
</a>
</div>
<div class="hidden sm:block">
<ol role="list" class="flex items-center space-x-3">
<li>
<div class="flex items-center">
<a href="#" class="text-sm font-medium 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-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-sm font-medium text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-800">Barcelona-backend</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-sm font-medium text-gray-500 hover:text-blue-600 focus:outline-none focus:text-blue-800" aria-current="page">General</a>
</div>
</li>
</ol>
</div>
</nav>
</div>
<h1 id="project-heading" class="text-2xl font-medium text-gray-900">Projects</h1>
</div>
<!-- buttons -->
<div class="flex items-center mt-3 px-3 sm:flex-shrink-0 z-10 space-x-3">
<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>
</div>
<!--- Content container --->
<div class="min-h-0 flex-1 overflow-y-auto">
<!-- Content section-->
<div class="flex flex-col py-2 sm:py-4 sm:py-6 xl:pt-4 gap-y-4 md:gap-y-6 mx-auto">
<div class="px-4 sm:px-6 md:px-8">
<div class="grid grid-cols-1 md:grid-cols-6 lg:grid-cols-10 lg:grid-rows-none flex items-end justify-start gap-x-4 gap-y-1.5 md:gap-y-2.5 lg:gap-y-0 w-full">
<div class="col-span-full md:col-span-6 lg: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-wider 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">&amp;nbsp</p>
</div>
</div>
</div>
<div class="col-span-full md:col-span-2 lg: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="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-500" 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 lg: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="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-500" 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 lg: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="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-500" 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>
<div data-testid="stacked-list-projects" class="mt-8">
<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 text-sm leading-5 font-normal text-gray-400 tracking-wide truncate overflow-ellipsis"><a class="font-semibold text-gray-700" href="https://rollbar.com/Rollbar/foobar123/settings/general">foobar</a>
<div>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 text-sm leading-5 font-normal text-gray-400 tracking-wide truncate overflow-ellipsis"><a class="font-semibold text-gray-700" href="https://rollbar.com/Rollbar/foobar123/settings/general">icicles</a>
<div>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 text-sm leading-5 font-normal text-gray-400 tracking-wide overflow-ellipsis">
<div><a class="font-semibold text-blue-600 hover:text-blue-800" href="https://rollbar.com/Rollbar/api-monitoring/settings/general">spacebar</a></div>
<div>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 text-sm leading-5 font-normal tracking-wide text-gray-400 overflow-ellipsis">
<div><a class="font-semibold text-blue-600 hover:text-blue-800" href="https://rollbar.com/Rollbar/api-monitoring/settings/general">rollballing</a></div>
<div>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 text-sm leading-5 font-normal tracking-wider text-gray-400 overflow-ellipsis">
<div><a class="font-semibold text-blue-600 hover:text-blue-800" href="https://rollbar.com/Rollbar/api-monitoring/settings/general">not-a-robot</a></div>
<div>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>
</div>
</div>
</section>
</div>
Raw
script.js
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]";
Raw
style.css
/* Note: Using Tailwind Components V2 CSS */
body {
font-family: Bio-sans, -apple-system, sans-serif;
}
button,
input,
optgroup,
select,
textarea {
font-family: Bio-sans, -apple-system, sans-serif;
}
.text-md {
font-size: 0.937rem;
line-height: 1.25rem;
}
.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;
}
.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, 242, 255, var(--tw-bg-opacity));
}
.bg-blue-300 {
background-color: rgba(177, 206, 251, 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, 77, 215, 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 {
background-color: rgba(255, 246, 242, var(--tw-bg-opacity));
}
.bg-orange-100 {
background-color: rgba(255, 233, 223, var(--tw-bg-opacity));
}
.bg-orange-200 {
background-color: rgba(255, 222, 207, var(--tw-bg-opacity));
}
.bg-orange-300 {
background-color: rgba(255, 189, 152, var(--tw-bg-opacity));
}
.bg-orange-400 {
background-color: rgba(255, 158, 116, var(--tw-bg-opacity));
}
.bg-orange-500 {
background-color: rgba(255, 142, 91, var(--tw-bg-opacity));
}
.bg-orange-600 {
background-color: rgba(244, 107, 46, var(--tw-bg-opacity));
}
.bg-orange-700 {
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, 242, 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, 77, 215, 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-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, 242, 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, 242, 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, 77, 215, 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, 242, 255, 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, 77, 215, 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, 242, 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, 77, 215, var(--tw-text-opacity));
}
.hover\:text-orange-700:hover {
color: rgba(227, 88, 25, 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-blue-800 {
--tw-text-opacity: 1;
color: rgba(5, 77, 215, var(--tw-text-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: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, 242, 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: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, 242, 255, var(--tw-text-opacity));
}
group-focus:text-blue-800 .group-focus\:text-blue-800 {
color: rgba(5, 77, 215, var(--tw-text-opacity));
}
.focus\:ring-blue-600:focus {
--tw-ring-color: rgba(60, 114, 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, 77, 215, 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, 77, 215, var(--tw-text-opacity));
}
.focus\:bg-blue-100:focus {
--tw-bg-opacity: 1;
background-color: rgba(235, 242, 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-600 {
--tw-gradient-to: #3c72ff;
}
.to-blue-700 {
--tw-gradient-to: #205bf6;
}
.to-blue-800 {
--tw-gradient-to: #054dd7;
}
.to-blue-900 {
--tw-gradient-to: #003cb0;
}
.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: #054dd7;
--tw-gradient-stops: var(--tw-gradient-from),
var(--tw-gradient-to, rgba(5, 77, 215, 0));
}
.from-blue-900 {
--tw-gradient-from: #003cb0;
--tw-gradient-stops: var(--tw-gradient-from),
var(--tw-gradient-to, rgba(0, 60, 176, 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), #054dd7,
var(--tw-gradient-to, rgba(5, 77, 215, 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-25 {
--tw-bg-opacity: 0.25;
}
.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-25:hover {
--tw-bg-opacity: 0.25;
}
.hover\:bg-opacity-30:hover {
--tw-bg-opacity: 0.3;
}
.hover\:bg-opacity-50:hover {
--tw-bg-opacity: 0.5;
}
.hover\:bg-opacity-50:hover {
--tw-bg-opacity: 0.5;
}
.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'],
}
}
} */
Raw
styles
<link href="https://use.typekit.net/wfk6sbz.css" rel="stylesheet" />
<link href="https://heyatsuko.com/libs/rb-tw.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