557 lines
26 KiB
HTML
557 lines
26 KiB
HTML
<html>
|
|
<head>
|
|
<title>Tailwind UI Components</title>
|
|
<link href="https://fonts.googleapis.com/css?family=Inter&display=swap" rel="stylesheet"/>
|
|
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/ui@latest/dist/tailwind-ui.min.css" rel="stylesheet"/>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
.font-sans { font-family: "Inter", sans-serif; }
|
|
</style>
|
|
</head>
|
|
|
|
<body class="font-sans antialiased text-gray-900">
|
|
<main>
|
|
<div class="max-w-8xl mx-auto grid grid-cols-1 row-gap-16 px-4 py-4 sm:px-6 sm:py-12 lg:px-8">
|
|
|
|
<div id="marketing">
|
|
<div class="pb-2">
|
|
<div class="h-5"></div>
|
|
</div>
|
|
<h2 class="text-2xl leading-8 font-semibold tracking-tight font-display text-gray-900 sm:text-3xl sm:leading-9">
|
|
Marketing
|
|
</h2>
|
|
<div class="mt-6 grid grid-cols-1 row-gap-8">
|
|
|
|
<div id="marketing-page-sections" class="border-t border-gray-200 pt-8 grid grid-cols-1 row-gap-6 lg:grid-cols-4 lg:gap-5">
|
|
<div>
|
|
<h3 class="text-lg leading-7 font-medium tracking-tight text-gray-900">
|
|
Page Sections
|
|
</h3>
|
|
</div>
|
|
<div class="grid grid-cols-1 row-gap-8 sm:grid-cols-2 sm:col-gap-5 sm:row-gap-6 md:grid-cols-3 lg:col-span-3">
|
|
<a href="/components/marketing/sections/heroes/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Hero Sections</p>
|
|
<p class="text-sm leading-5 text-gray-500">6 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/marketing/sections/feature-sections/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Feature Sections</p>
|
|
<p class="text-sm leading-5 text-gray-500">6 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/marketing/sections/cta-sections/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">CTA Sections</p>
|
|
<p class="text-sm leading-5 text-gray-500">7 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/marketing/sections/pricing/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Pricing Sections</p>
|
|
<p class="text-sm leading-5 text-gray-500">7 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/marketing/sections/header/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Header Sections</p>
|
|
<p class="text-sm leading-5 text-gray-500">3 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/marketing/sections/faq-sections/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">FAQs</p>
|
|
<p class="text-sm leading-5 text-gray-500">6 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/marketing/sections/newsletter-sections/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Newsletter Sections</p>
|
|
<p class="text-sm leading-5 text-gray-500">3 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/marketing/sections/stats-sections/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Stats</p>
|
|
<p class="text-sm leading-5 text-gray-500">3 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/marketing/sections/testimonials/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Testimonials</p>
|
|
<p class="text-sm leading-5 text-gray-500">3 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/marketing/sections/blog-sections/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Blog Sections</p>
|
|
<p class="text-sm leading-5 text-gray-500">3 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/marketing/sections/contact-sections/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Contact Sections</p>
|
|
<p class="text-sm leading-5 text-gray-500">5 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/marketing/sections/team-sections/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Team Sections</p>
|
|
<p class="text-sm leading-5 text-gray-500">8 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/marketing/sections/content-sections/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Content Sections</p>
|
|
<p class="text-sm leading-5 text-gray-500">5 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/marketing/sections/footers/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Footers</p>
|
|
<p class="text-sm leading-5 text-gray-500">7 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/marketing/sections/logo-clouds/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Logo Clouds</p>
|
|
<p class="text-sm leading-5 text-gray-500">5 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div><!-- end sub-category Page Sections -->
|
|
<div id="marketing-elements" class="border-t border-gray-200 pt-8 grid grid-cols-1 row-gap-6 lg:grid-cols-4 lg:gap-5">
|
|
<div>
|
|
<h3 class="text-lg leading-7 font-medium tracking-tight text-gray-900">
|
|
Elements
|
|
</h3>
|
|
</div>
|
|
<div class="grid grid-cols-1 row-gap-8 sm:grid-cols-2 sm:col-gap-5 sm:row-gap-6 md:grid-cols-3 lg:col-span-3">
|
|
<a href="/components/marketing/elements/headers/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Headers</p>
|
|
<p class="text-sm leading-5 text-gray-500">4 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/marketing/elements/banners/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Banners</p>
|
|
<p class="text-sm leading-5 text-gray-500">4 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/marketing/elements/flyout-menus/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Flyout Menus</p>
|
|
<p class="text-sm leading-5 text-gray-500">6 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div><!-- end sub-category Elements -->
|
|
<div id="marketing-page-examples" class="border-t border-gray-200 pt-8 grid grid-cols-1 row-gap-6 lg:grid-cols-4 lg:gap-5">
|
|
<div>
|
|
<h3 class="text-lg leading-7 font-medium tracking-tight text-gray-900">
|
|
Page Examples
|
|
</h3>
|
|
</div>
|
|
<div class="grid grid-cols-1 row-gap-8 sm:grid-cols-2 sm:col-gap-5 sm:row-gap-6 md:grid-cols-3 lg:col-span-3">
|
|
<a href="/components/marketing/page-examples/pricing-pages/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Pricing Pages</p>
|
|
<p class="text-sm leading-5 text-gray-500">4 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div><!-- end sub-category Page Examples -->
|
|
</div>
|
|
</div><!-- end category Marketing -->
|
|
|
|
<div id="application-ui">
|
|
<div class="pb-2">
|
|
<div class="h-5"></div>
|
|
</div>
|
|
<h2 class="text-2xl leading-8 font-semibold tracking-tight font-display text-gray-900 sm:text-3xl sm:leading-9">
|
|
Application UI
|
|
</h2>
|
|
<div class="mt-6 grid grid-cols-1 row-gap-8">
|
|
|
|
<div id="application-ui-application-shells" class="border-t border-gray-200 pt-8 grid grid-cols-1 row-gap-6 lg:grid-cols-4 lg:gap-5">
|
|
<div>
|
|
<h3 class="text-lg leading-7 font-medium tracking-tight text-gray-900">
|
|
Application Shells
|
|
</h3>
|
|
</div>
|
|
<div class="grid grid-cols-1 row-gap-8 sm:grid-cols-2 sm:col-gap-5 sm:row-gap-6 md:grid-cols-3 lg:col-span-3">
|
|
<a href="/components/application-ui/application-shells/stacked/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Stacked Layouts</p>
|
|
<p class="text-sm leading-5 text-gray-500">8 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/application-shells/sidebar/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Sidebar Layouts</p>
|
|
<p class="text-sm leading-5 text-gray-500">7 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div><!-- end sub-category Application Shells -->
|
|
<div id="application-ui-headings" class="border-t border-gray-200 pt-8 grid grid-cols-1 row-gap-6 lg:grid-cols-4 lg:gap-5">
|
|
<div>
|
|
<h3 class="text-lg leading-7 font-medium tracking-tight text-gray-900">
|
|
Headings
|
|
</h3>
|
|
</div>
|
|
<div class="grid grid-cols-1 row-gap-8 sm:grid-cols-2 sm:col-gap-5 sm:row-gap-6 md:grid-cols-3 lg:col-span-3">
|
|
<a href="/components/application-ui/headings/page-headings/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Page Headings</p>
|
|
<p class="text-sm leading-5 text-gray-500">6 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/headings/card-headings/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Card Headings</p>
|
|
<p class="text-sm leading-5 text-gray-500">5 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/headings/section-headings/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Section Headings</p>
|
|
<p class="text-sm leading-5 text-gray-500">9 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div><!-- end sub-category Headings -->
|
|
<div id="application-ui-data-display" class="border-t border-gray-200 pt-8 grid grid-cols-1 row-gap-6 lg:grid-cols-4 lg:gap-5">
|
|
<div>
|
|
<h3 class="text-lg leading-7 font-medium tracking-tight text-gray-900">
|
|
Data Display
|
|
</h3>
|
|
</div>
|
|
<div class="grid grid-cols-1 row-gap-8 sm:grid-cols-2 sm:col-gap-5 sm:row-gap-6 md:grid-cols-3 lg:col-span-3">
|
|
<a href="/components/application-ui/data-display/description-lists/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Description Lists</p>
|
|
<p class="text-sm leading-5 text-gray-500">5 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/data-display/stats/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Stats</p>
|
|
<p class="text-sm leading-5 text-gray-500">3 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div><!-- end sub-category Data Display -->
|
|
<div id="application-ui-lists" class="border-t border-gray-200 pt-8 grid grid-cols-1 row-gap-6 lg:grid-cols-4 lg:gap-5">
|
|
<div>
|
|
<h3 class="text-lg leading-7 font-medium tracking-tight text-gray-900">
|
|
Lists
|
|
</h3>
|
|
</div>
|
|
<div class="grid grid-cols-1 row-gap-8 sm:grid-cols-2 sm:col-gap-5 sm:row-gap-6 md:grid-cols-3 lg:col-span-3">
|
|
<a href="/components/application-ui/lists/tables/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Tables</p>
|
|
<p class="text-sm leading-5 text-gray-500">3 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/lists/stacked-lists/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Stacked Lists</p>
|
|
<p class="text-sm leading-5 text-gray-500">4 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/lists/grid-lists/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Grid Lists</p>
|
|
<p class="text-sm leading-5 text-gray-500">3 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div><!-- end sub-category Lists -->
|
|
<div id="application-ui-forms" class="border-t border-gray-200 pt-8 grid grid-cols-1 row-gap-6 lg:grid-cols-4 lg:gap-5">
|
|
<div>
|
|
<h3 class="text-lg leading-7 font-medium tracking-tight text-gray-900">
|
|
Forms
|
|
</h3>
|
|
</div>
|
|
<div class="grid grid-cols-1 row-gap-8 sm:grid-cols-2 sm:col-gap-5 sm:row-gap-6 md:grid-cols-3 lg:col-span-3">
|
|
<a href="/components/application-ui/forms/form-layouts/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Form Layouts</p>
|
|
<p class="text-sm leading-5 text-gray-500">5 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/forms/input-groups/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Input Groups</p>
|
|
<p class="text-sm leading-5 text-gray-500">14 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/forms/select-menus/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Select Menus</p>
|
|
<p class="text-sm leading-5 text-gray-500">6 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/forms/sign-in-forms/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Sign-in and Registration</p>
|
|
<p class="text-sm leading-5 text-gray-500">3 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/forms/radio-groups/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Radio Groups</p>
|
|
<p class="text-sm leading-5 text-gray-500">3 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/forms/toggles/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Toggles</p>
|
|
<p class="text-sm leading-5 text-gray-500">5 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/forms/action-panels/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Action Panels</p>
|
|
<p class="text-sm leading-5 text-gray-500">8 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div><!-- end sub-category Forms -->
|
|
<div id="application-ui-feedback" class="border-t border-gray-200 pt-8 grid grid-cols-1 row-gap-6 lg:grid-cols-4 lg:gap-5">
|
|
<div>
|
|
<h3 class="text-lg leading-7 font-medium tracking-tight text-gray-900">
|
|
Feedback
|
|
</h3>
|
|
</div>
|
|
<div class="grid grid-cols-1 row-gap-8 sm:grid-cols-2 sm:col-gap-5 sm:row-gap-6 md:grid-cols-3 lg:col-span-3">
|
|
<a href="/components/application-ui/feedback/alerts/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Alerts</p>
|
|
<p class="text-sm leading-5 text-gray-500">6 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div><!-- end sub-category Feedback -->
|
|
<div id="application-ui-navigation" class="border-t border-gray-200 pt-8 grid grid-cols-1 row-gap-6 lg:grid-cols-4 lg:gap-5">
|
|
<div>
|
|
<h3 class="text-lg leading-7 font-medium tracking-tight text-gray-900">
|
|
Navigation
|
|
</h3>
|
|
</div>
|
|
<div class="grid grid-cols-1 row-gap-8 sm:grid-cols-2 sm:col-gap-5 sm:row-gap-6 md:grid-cols-3 lg:col-span-3">
|
|
<a href="/components/application-ui/navigation/navbars/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Navbars</p>
|
|
<p class="text-sm leading-5 text-gray-500">10 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/navigation/pagination/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Pagination</p>
|
|
<p class="text-sm leading-5 text-gray-500">3 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/navigation/tabs/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Tabs</p>
|
|
<p class="text-sm leading-5 text-gray-500">6 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/navigation/vertical-navigation/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Vertical Navigation</p>
|
|
<p class="text-sm leading-5 text-gray-500">6 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/navigation/sidebar-navigation/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Sidebar Navigation</p>
|
|
<p class="text-sm leading-5 text-gray-500">8 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/navigation/breadcrumbs/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Breadcrumbs</p>
|
|
<p class="text-sm leading-5 text-gray-500">4 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/navigation/steps/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Steps</p>
|
|
<p class="text-sm leading-5 text-gray-500">7 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div><!-- end sub-category Navigation -->
|
|
<div id="application-ui-overlays" class="border-t border-gray-200 pt-8 grid grid-cols-1 row-gap-6 lg:grid-cols-4 lg:gap-5">
|
|
<div>
|
|
<h3 class="text-lg leading-7 font-medium tracking-tight text-gray-900">
|
|
Overlays
|
|
</h3>
|
|
</div>
|
|
<div class="grid grid-cols-1 row-gap-8 sm:grid-cols-2 sm:col-gap-5 sm:row-gap-6 md:grid-cols-3 lg:col-span-3">
|
|
<a href="/components/application-ui/overlays/modals/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Modals</p>
|
|
<p class="text-sm leading-5 text-gray-500">6 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/overlays/slide-overs/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Slide-overs</p>
|
|
<p class="text-sm leading-5 text-gray-500">11 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/overlays/notifications/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Notifications</p>
|
|
<p class="text-sm leading-5 text-gray-500">6 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div><!-- end sub-category Overlays -->
|
|
<div id="application-ui-elements" class="border-t border-gray-200 pt-8 grid grid-cols-1 row-gap-6 lg:grid-cols-4 lg:gap-5">
|
|
<div>
|
|
<h3 class="text-lg leading-7 font-medium tracking-tight text-gray-900">
|
|
Elements
|
|
</h3>
|
|
</div>
|
|
<div class="grid grid-cols-1 row-gap-8 sm:grid-cols-2 sm:col-gap-5 sm:row-gap-6 md:grid-cols-3 lg:col-span-3">
|
|
<a href="/components/application-ui/elements/avatars/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Avatars</p>
|
|
<p class="text-sm leading-5 text-gray-500">11 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/elements/dropdowns/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Dropdowns</p>
|
|
<p class="text-sm leading-5 text-gray-500">5 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/elements/badges/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Badges</p>
|
|
<p class="text-sm leading-5 text-gray-500">7 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/elements/buttons/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Buttons</p>
|
|
<p class="text-sm leading-5 text-gray-500">5 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/elements/button-groups/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Button Groups</p>
|
|
<p class="text-sm leading-5 text-gray-500">5 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div><!-- end sub-category Elements -->
|
|
<div id="application-ui-layout" class="border-t border-gray-200 pt-8 grid grid-cols-1 row-gap-6 lg:grid-cols-4 lg:gap-5">
|
|
<div>
|
|
<h3 class="text-lg leading-7 font-medium tracking-tight text-gray-900">
|
|
Layout
|
|
</h3>
|
|
</div>
|
|
<div class="grid grid-cols-1 row-gap-8 sm:grid-cols-2 sm:col-gap-5 sm:row-gap-6 md:grid-cols-3 lg:col-span-3">
|
|
<a href="/components/application-ui/layout/containers/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Containers</p>
|
|
<p class="text-sm leading-5 text-gray-500">4 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/layout/panels/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Panels</p>
|
|
<p class="text-sm leading-5 text-gray-500">10 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div><!-- end sub-category Layout -->
|
|
<div id="application-ui-page-examples" class="border-t border-gray-200 pt-8 grid grid-cols-1 row-gap-6 lg:grid-cols-4 lg:gap-5">
|
|
<div>
|
|
<h3 class="text-lg leading-7 font-medium tracking-tight text-gray-900">
|
|
Page Examples
|
|
</h3>
|
|
</div>
|
|
<div class="grid grid-cols-1 row-gap-8 sm:grid-cols-2 sm:col-gap-5 sm:row-gap-6 md:grid-cols-3 lg:col-span-3">
|
|
<a href="/components/application-ui/page-examples/home-screens/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Home Screens</p>
|
|
<p class="text-sm leading-5 text-gray-500">3 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
<a href="/components/application-ui/page-examples/settings-screens/index.html" class="block group ">
|
|
<div class="mt-3">
|
|
<p class="text-sm leading-5 font-medium text-gray-900">Settings Screens</p>
|
|
<p class="text-sm leading-5 text-gray-500">4 components</p>
|
|
</div>
|
|
</a>
|
|
|
|
</div>
|
|
</div><!-- end sub-category Page Examples -->
|
|
</div>
|
|
</div><!-- end category Application UI -->
|
|
</main></body></html> |