ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
kristof
2020-11-08 09:21:13 +01:00
parent 50527d0370
commit 6cc0d341d5
494 changed files with 59442 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

376
tailwindui/components/application-ui/data-display/description-lists/index.html Normal file
View File

@@ -0,0 +1,376 @@
<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"/>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.1/dist/alpine.js" defer></script>
<link href="https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/darkula.css" rel="stylesheet"/>
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
<style>
* { box-sizing: border-box; }
.font-sans { font-family: "Inter", sans-serif; }
.hljs {
background: #252f3f;
color: white;
}
.hljs-tag {
color: white;
}
.hljs-name {
color: #ff8383;
}
.hljs-attr {
color: #ffe484;
font-style: italic;
}
.hljs-string {
color: #b5f4a5;
}
</style>
</head>
<body class="font-sans antialiased text-gray-900">
<main>
<div class="py-4 sm:py-12">
<div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="pb-2">
<nav class="flex items-center text-sm leading-5 font-medium">
<a href="/#application-ui" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
Application UI
</a>
<svg class="flex-shrink-0 mx-2 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
<a href="/#application-ui-data-display" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
Data Display
</a>
</nav>
</div>
<h2 class="text-2xl leading-8 font-semibold font-display text-gray-900 sm:text-3xl sm:leading-9">
Description Lists
</h2>
</div>
<div class="mt-6 bg-white max-w-8xl mx-auto sm:px-6 lg:px-8">
<div class="max-w-8xl mx-auto">
<div id="component-4c0b6c0bfdf449db1b75dc19d3049e769216db5c" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
<a href="#component-4c0b6c0bfdf449db1b75dc19d3049e769216db5c">Left-aligned in card</a>
</h3>
<div class="ml-4 flex flex-shrink-0 items-center">
<div class="flex items-center text-sm sm:hidden">
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<div class="hidden sm:flex items-center text-sm md:text-base">
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
Preview
</button>
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
Code
</button>
<textarea class="hidden">Code goes here</textarea>
</div>
<div class="hidden sm:flex sm:items-center">
<div class="pl-4 pr-3 self-stretch">
<div class="h-full border-l border-gray-200"></div>
</div>
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<title>Copy</title>
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="relative bg-gray-500">
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
<iframe x-ref="iframe" class="w-full" src="/components/application-ui/data-display/description-lists/left_aligned_in_card.html" style="height: 265px;"></iframe>
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
</svg>
</div>
</div>
</div>
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
</div>
</div>
</div>
<div id="component-e90f2ea1215bf5af8dfa438c07db099f48961cd7" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
<a href="#component-e90f2ea1215bf5af8dfa438c07db099f48961cd7">Left-aligned striped in card</a>
</h3>
<div class="ml-4 flex flex-shrink-0 items-center">
<div class="flex items-center text-sm sm:hidden">
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<div class="hidden sm:flex items-center text-sm md:text-base">
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
Preview
</button>
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
Code
</button>
<textarea class="hidden">Code goes here</textarea>
</div>
<div class="hidden sm:flex sm:items-center">
<div class="pl-4 pr-3 self-stretch">
<div class="h-full border-l border-gray-200"></div>
</div>
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<title>Copy</title>
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="relative bg-gray-500">
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
<iframe x-ref="iframe" class="w-full" src="/components/application-ui/data-display/description-lists/left_aligned_striped_in_card.html" style="height: 265px;"></iframe>
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
</svg>
</div>
</div>
</div>
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
</div>
</div>
</div>
<div id="component-7997dadeddb4e922b07b65f048969f10d1cdf0d9" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
<a href="#component-7997dadeddb4e922b07b65f048969f10d1cdf0d9">Left-aligned with inline actions</a>
</h3>
<div class="ml-4 flex flex-shrink-0 items-center">
<div class="flex items-center text-sm sm:hidden">
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<div class="hidden sm:flex items-center text-sm md:text-base">
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
Preview
</button>
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
Code
</button>
<textarea class="hidden">Code goes here</textarea>
</div>
<div class="hidden sm:flex sm:items-center">
<div class="pl-4 pr-3 self-stretch">
<div class="h-full border-l border-gray-200"></div>
</div>
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<title>Copy</title>
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="relative bg-gray-500">
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
<iframe x-ref="iframe" class="w-full" src="/components/application-ui/data-display/description-lists/left_aligned_with_inline_actions.html" style="height: 265px;"></iframe>
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
</svg>
</div>
</div>
</div>
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
</div>
</div>
</div>
<div id="component-1e4e553e5266d02e4a9d36f5384a23aa828278cf" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
<a href="#component-1e4e553e5266d02e4a9d36f5384a23aa828278cf">Left-aligned</a>
</h3>
<div class="ml-4 flex flex-shrink-0 items-center">
<div class="flex items-center text-sm sm:hidden">
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<div class="hidden sm:flex items-center text-sm md:text-base">
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
Preview
</button>
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
Code
</button>
<textarea class="hidden">Code goes here</textarea>
</div>
<div class="hidden sm:flex sm:items-center">
<div class="pl-4 pr-3 self-stretch">
<div class="h-full border-l border-gray-200"></div>
</div>
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<title>Copy</title>
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="relative bg-gray-500">
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
<iframe x-ref="iframe" class="w-full" src="/components/application-ui/data-display/description-lists/left_aligned.html" style="height: 265px;"></iframe>
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
</svg>
</div>
</div>
</div>
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
</div>
</div>
</div>
<div id="component-f223d90488431951c4e21eb663dd818dfd0b2df5" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
<a href="#component-f223d90488431951c4e21eb663dd818dfd0b2df5">Two-column in card</a>
</h3>
<div class="ml-4 flex flex-shrink-0 items-center">
<div class="flex items-center text-sm sm:hidden">
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<div class="hidden sm:flex items-center text-sm md:text-base">
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
Preview
</button>
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
Code
</button>
<textarea class="hidden">Code goes here</textarea>
</div>
<div class="hidden sm:flex sm:items-center">
<div class="pl-4 pr-3 self-stretch">
<div class="h-full border-l border-gray-200"></div>
</div>
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<title>Copy</title>
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="relative bg-gray-500">
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
<iframe x-ref="iframe" class="w-full" src="/components/application-ui/data-display/description-lists/two_column_in_card.html" style="height: 265px;"></iframe>
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
</svg>
</div>
</div>
</div>
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<script>
(function() {
const getDocHeight = doc => {
doc = doc || document;
const body = doc.body;
const html = doc.documentElement;
const height = Math.max(
body.scrollHeight,
body.offsetHeight,
html.clientHeight,
html.scrollHeight,
html.offsetHeight
);
return height;
};
window.resizableIFrame = function() {
return {
resizing: !1,
width: "100%",
init: function() {}
};
};
const iframes = document.querySelectorAll("iframe");
Array.from(iframes).forEach(iframe => {
iframe.addEventListener("load", e => {
const iframe = e.srcElement;
const doc = iframe.contentDocument || iframe.contentWindow.document;
doc.body.classList.add("antialiased", "font-sans", "bg-white")
iframe.style.visibility = "hidden";
iframe.style.height = "10px";
const height = Math.max(getDocHeight(doc), 256) + "px";
iframe.style.height = height;
iframe.style.visibility = "visible";
const html = doc.body.innerHTML.trim();
const container = iframe.parentElement.parentElement.parentElement;
hljs.configure({useBR: false, tabReplace: ' '});
const highlighted = hljs.highlight('html', html);
const codeElem = container.children[1].querySelector("code");
codeElem.innerHTML = highlighted.value;
});
});
})();
</script>
</body>
</html>

102
tailwindui/components/application-ui/data-display/description-lists/left_aligned.html Normal file
View File

@@ -0,0 +1,102 @@
<!--
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
Read the documentation to get started: https://tailwindui.com/documentation
--><html>
<head /><body>
<div>
<div>
<h3 class="text-lg leading-6 font-medium text-gray-900">
Applicant Information
</h3>
<p class="max-w-2xl text-sm leading-5 text-gray-500">
Personal details and application.
</p>
</div>
<div class="mt-5 border-t border-gray-200 pt-5">
<dl>
<div class="sm:grid sm:grid-cols-3 sm:gap-4">
<dt class="text-sm leading-5 font-medium text-gray-500">
Full name
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
Margot Foster
</dd>
</div>
<div class="mt-8 sm:grid sm:mt-5 sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<dt class="text-sm leading-5 font-medium text-gray-500">
Application for
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
Backend Developer
</dd>
</div>
<div class="mt-8 sm:grid sm:mt-5 sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<dt class="text-sm leading-5 font-medium text-gray-500">
Email address
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
margotfoster@example.com
</dd>
</div>
<div class="mt-8 sm:grid sm:mt-5 sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<dt class="text-sm leading-5 font-medium text-gray-500">
Salary expectation
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
$120,000
</dd>
</div>
<div class="mt-8 sm:grid sm:mt-5 sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<dt class="text-sm leading-5 font-medium text-gray-500">
About
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat. Excepteur qui ipsum aliquip consequat sint. Sit id mollit nulla mollit nostrud in ea officia proident. Irure nostrud pariatur mollit ad adipisicing reprehenderit deserunt qui eu.
</dd>
</div>
<div class="mt-8 sm:grid sm:mt-5 sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:pt-5">
<dt class="text-sm leading-5 font-medium text-gray-500">
Attachments
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
<ul class="border border-gray-200 rounded-md">
<li class="pl-3 pr-4 py-3 flex items-center justify-between text-sm leading-5">
<div class="w-0 flex-1 flex items-center">
<!-- Heroicon name: paper-clip -->
<svg class="flex-shrink-0 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd" />
</svg>
<span class="ml-2 flex-1 w-0 truncate">
resume_back_end_developer.pdf
</span>
</div>
<div class="ml-4 flex-shrink-0">
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out">
Download
</a>
</div>
</li>
<li class="border-t border-gray-200 pl-3 pr-4 py-3 flex items-center justify-between text-sm leading-5">
<div class="w-0 flex-1 flex items-center">
<!-- Heroicon name: paper-clip -->
<svg class="flex-shrink-0 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd" />
</svg>
<span class="ml-2 flex-1 w-0 truncate">
coverletter_back_end_developer.pdf
</span>
</div>
<div class="ml-4 flex-shrink-0">
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out">
Download
</a>
</div>
</li>
</ul>
</dd>
</div>
</dl>
</div>
</div>
</body>
</html>

102
tailwindui/components/application-ui/data-display/description-lists/left_aligned_in_card.html Normal file
View File

@@ -0,0 +1,102 @@
<!--
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
Read the documentation to get started: https://tailwindui.com/documentation
--><html>
<head /><body>
<div class="bg-white shadow overflow-hidden sm:rounded-lg">
<div class="px-4 py-5 border-b border-gray-200 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">
Applicant Information
</h3>
<p class="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
Personal details and application.
</p>
</div>
<div class="px-4 py-5 sm:p-0">
<dl>
<div class="sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5">
<dt class="text-sm leading-5 font-medium text-gray-500">
Full name
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
Margot Foster
</dd>
</div>
<div class="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
<dt class="text-sm leading-5 font-medium text-gray-500">
Application for
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
Backend Developer
</dd>
</div>
<div class="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
<dt class="text-sm leading-5 font-medium text-gray-500">
Email address
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
margotfoster@example.com
</dd>
</div>
<div class="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
<dt class="text-sm leading-5 font-medium text-gray-500">
Salary expectation
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
$120,000
</dd>
</div>
<div class="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
<dt class="text-sm leading-5 font-medium text-gray-500">
About
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat. Excepteur qui ipsum aliquip consequat sint. Sit id mollit nulla mollit nostrud in ea officia proident. Irure nostrud pariatur mollit ad adipisicing reprehenderit deserunt qui eu.
</dd>
</div>
<div class="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:border-t sm:border-gray-200 sm:px-6 sm:py-5">
<dt class="text-sm leading-5 font-medium text-gray-500">
Attachments
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
<ul class="border border-gray-200 rounded-md">
<li class="pl-3 pr-4 py-3 flex items-center justify-between text-sm leading-5">
<div class="w-0 flex-1 flex items-center">
<!-- Heroicon name: paper-clip -->
<svg class="flex-shrink-0 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd" />
</svg>
<span class="ml-2 flex-1 w-0 truncate">
resume_back_end_developer.pdf
</span>
</div>
<div class="ml-4 flex-shrink-0">
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out">
Download
</a>
</div>
</li>
<li class="border-t border-gray-200 pl-3 pr-4 py-3 flex items-center justify-between text-sm leading-5">
<div class="w-0 flex-1 flex items-center">
<!-- Heroicon name: paper-clip -->
<svg class="flex-shrink-0 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd" />
</svg>
<span class="ml-2 flex-1 w-0 truncate">
coverletter_back_end_developer.pdf
</span>
</div>
<div class="ml-4 flex-shrink-0">
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out">
Download
</a>
</div>
</li>
</ul>
</dd>
</div>
</dl>
</div>
</div>
</body>
</html>

102
tailwindui/components/application-ui/data-display/description-lists/left_aligned_striped_in_card.html Normal file
View File

@@ -0,0 +1,102 @@
<!--
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
Read the documentation to get started: https://tailwindui.com/documentation
--><html>
<head /><body>
<div class="bg-white shadow overflow-hidden sm:rounded-lg">
<div class="px-4 py-5 border-b border-gray-200 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">
Applicant Information
</h3>
<p class="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
Personal details and application.
</p>
</div>
<div>
<dl>
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium text-gray-500">
Full name
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
Margot Foster
</dd>
</div>
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium text-gray-500">
Application for
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
Backend Developer
</dd>
</div>
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium text-gray-500">
Email address
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
margotfoster@example.com
</dd>
</div>
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium text-gray-500">
Salary expectation
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
$120,000
</dd>
</div>
<div class="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium text-gray-500">
About
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat. Excepteur qui ipsum aliquip consequat sint. Sit id mollit nulla mollit nostrud in ea officia proident. Irure nostrud pariatur mollit ad adipisicing reprehenderit deserunt qui eu.
</dd>
</div>
<div class="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt class="text-sm leading-5 font-medium text-gray-500">
Attachments
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
<ul class="border border-gray-200 rounded-md">
<li class="pl-3 pr-4 py-3 flex items-center justify-between text-sm leading-5">
<div class="w-0 flex-1 flex items-center">
<!-- Heroicon name: paper-clip -->
<svg class="flex-shrink-0 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd" />
</svg>
<span class="ml-2 flex-1 w-0 truncate">
resume_back_end_developer.pdf
</span>
</div>
<div class="ml-4 flex-shrink-0">
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out">
Download
</a>
</div>
</li>
<li class="border-t border-gray-200 pl-3 pr-4 py-3 flex items-center justify-between text-sm leading-5">
<div class="w-0 flex-1 flex items-center">
<!-- Heroicon name: paper-clip -->
<svg class="flex-shrink-0 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd" />
</svg>
<span class="ml-2 flex-1 w-0 truncate">
coverletter_back_end_developer.pdf
</span>
</div>
<div class="ml-4 flex-shrink-0">
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out">
Download
</a>
</div>
</li>
</ul>
</dd>
</div>
</dl>
</div>
</div>
</body>
</html>

135
tailwindui/components/application-ui/data-display/description-lists/left_aligned_with_inline_actions.html Normal file
View File

@@ -0,0 +1,135 @@
<!--
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
Read the documentation to get started: https://tailwindui.com/documentation
--><html>
<head /><body>
<div class="space-y-1">
<h3 class="text-lg leading-6 font-medium text-gray-900">
Applicant Information
</h3>
<p class="max-w-2xl text-sm leading-5 text-gray-500">
Personal details and application.
</p>
</div>
<div class="mt-6 border-t border-gray-200">
<dl class="divide-y divide-gray-200">
<div class="py-4 space-y-1 sm:py-5 sm:grid sm:grid-cols-3 sm:gap-4">
<dt class="text-sm leading-5 font-medium text-gray-500">
Full name
</dt>
<dd class="flex space-x-4 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
<span class="flex-grow"> Margot Foster</span>
<span class="flex-shrink-0">
<button type="button" class="font-medium text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out">
Update
</button>
</span>
</dd>
</div>
<div class="py-4 space-y-1 sm:grid sm:py-5 sm:grid-cols-3 sm:gap-4">
<dt class="text-sm leading-5 font-medium text-gray-500">
Application for
</dt>
<dd class="flex space-x-4 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
<span class="flex-grow"> Backend Developer</span>
<span class="flex-shrink-0">
<button type="button" class="font-medium text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out">
Update
</button>
</span>
</dd>
</div>
<div class="py-4 space-y-1 sm:grid sm:py-5 sm:grid-cols-3 sm:gap-4">
<dt class="text-sm leading-5 font-medium text-gray-500">
Email address
</dt>
<dd class="flex space-x-4 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
<span class="flex-grow"> margotfoster@example.com</span>
<span class="flex-shrink-0">
<button type="button" class="font-medium text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out">
Update
</button>
</span>
</dd>
</div>
<div class="py-4 space-y-1 sm:grid sm:py-5 sm:grid-cols-3 sm:gap-4">
<dt class="text-sm leading-5 font-medium text-gray-500">
Salary expectation
</dt>
<dd class="flex space-x-4 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
<span class="flex-grow"> $120,000</span>
<span class="flex-shrink-0">
<button type="button" class="font-medium text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out">
Update
</button>
</span>
</dd>
</div>
<div class="py-4 space-y-1 sm:grid sm:py-5 sm:grid-cols-3 sm:gap-4">
<dt class="text-sm leading-5 font-medium text-gray-500">
About
</dt>
<dd class="flex space-x-4 text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
<span class="flex-grow">
Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat. Excepteur qui ipsum aliquip consequat sint. Sit id mollit nulla mollit nostrud in ea officia proident. Irure nostrud pariatur mollit ad adipisicing reprehenderit deserunt qui eu.
</span>
<span class="flex-shrink-0">
<button type="button" class="font-medium text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out">
Update
</button>
</span>
</dd>
</div>
<div class="py-4 space-y-1 sm:grid sm:py-5 sm:grid-cols-3 sm:gap-4">
<dt class="text-sm leading-5 font-medium text-gray-500">
Attachments
</dt>
<dd class="text-sm leading-5 text-gray-900 sm:mt-0 sm:col-span-2">
<ul class="border border-gray-200 rounded-md divide-y divide-gray-200">
<li class="pl-3 pr-4 py-3 flex items-center justify-between space-x-4 text-sm leading-5">
<div class="w-0 flex-1 flex items-center space-x-2">
<!-- Heroicon name: paper-clip -->
<svg class="flex-shrink-0 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd" />
</svg>
<span class="flex-1 w-0 truncate">
resume_back_end_developer.pdf
</span>
</div>
<div class="flex-shrink-0 flex space-x-4">
<button type="button" class="font-medium text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out">
Update
</button>
<span class="text-gray-300" aria-hidden="true">|</span>
<button type="button" class="font-medium text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out">
Remove
</button>
</div>
</li>
<li class="pl-3 pr-4 py-3 flex items-center justify-between space-x-4 text-sm leading-5">
<div class="w-0 flex-1 flex items-center space-x-2">
<!-- Heroicon name: paper-clip -->
<svg class="flex-shrink-0 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd" />
</svg>
<span class="flex-1 w-0 truncate">
coverletter_back_end_developer.pdf
</span>
</div>
<div class="flex-shrink-0 flex space-x-4">
<button type="button" class="font-medium text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out">
Update
</button>
<span class="text-gray-300" aria-hidden="true">|</span>
<button type="button" class="font-medium text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out">
Remove
</button>
</div>
</li>
</ul>
</dd>
</div>
</dl>
</div>
</body>
</html>

102
tailwindui/components/application-ui/data-display/description-lists/two_column_in_card.html Normal file
View File

@@ -0,0 +1,102 @@
<!--
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
Read the documentation to get started: https://tailwindui.com/documentation
--><html>
<head /><body>
<div class="bg-white shadow overflow-hidden sm:rounded-lg">
<div class="px-4 py-5 border-b border-gray-200 sm:px-6">
<h3 class="text-lg leading-6 font-medium text-gray-900">
Applicant Information
</h3>
<p class="mt-1 max-w-2xl text-sm leading-5 text-gray-500">
Personal details and application.
</p>
</div>
<div class="px-4 py-5 sm:px-6">
<dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
<div class="sm:col-span-1">
<dt class="text-sm leading-5 font-medium text-gray-500">
Full name
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900">
Margot Foster
</dd>
</div>
<div class="sm:col-span-1">
<dt class="text-sm leading-5 font-medium text-gray-500">
Application for
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900">
Backend Developer
</dd>
</div>
<div class="sm:col-span-1">
<dt class="text-sm leading-5 font-medium text-gray-500">
Email address
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900">
margotfoster@example.com
</dd>
</div>
<div class="sm:col-span-1">
<dt class="text-sm leading-5 font-medium text-gray-500">
Salary expectation
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900">
$120,000
</dd>
</div>
<div class="sm:col-span-2">
<dt class="text-sm leading-5 font-medium text-gray-500">
About
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900">
Fugiat ipsum ipsum deserunt culpa aute sint do nostrud anim incididunt cillum culpa consequat. Excepteur qui ipsum aliquip consequat sint. Sit id mollit nulla mollit nostrud in ea officia proident. Irure nostrud pariatur mollit ad adipisicing reprehenderit deserunt qui eu.
</dd>
</div>
<div class="sm:col-span-2">
<dt class="text-sm leading-5 font-medium text-gray-500">
Attachments
</dt>
<dd class="mt-1 text-sm leading-5 text-gray-900">
<ul class="border border-gray-200 rounded-md">
<li class="pl-3 pr-4 py-3 flex items-center justify-between text-sm leading-5">
<div class="w-0 flex-1 flex items-center">
<!-- Heroicon name: paper-clip -->
<svg class="flex-shrink-0 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd" />
</svg>
<span class="ml-2 flex-1 w-0 truncate">
resume_back_end_developer.pdf
</span>
</div>
<div class="ml-4 flex-shrink-0">
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out">
Download
</a>
</div>
</li>
<li class="border-t border-gray-200 pl-3 pr-4 py-3 flex items-center justify-between text-sm leading-5">
<div class="w-0 flex-1 flex items-center">
<!-- Heroicon name: paper-clip -->
<svg class="flex-shrink-0 h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd" />
</svg>
<span class="ml-2 flex-1 w-0 truncate">
coverletter_back_end_developer.pdf
</span>
</div>
<div class="ml-4 flex-shrink-0">
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 transition duration-150 ease-in-out">
Download
</a>
</div>
</li>
</ul>
</dd>
</div>
</dl>
</div>
</div>
</body>
</html>

268
tailwindui/components/application-ui/data-display/stats/index.html Normal file
View File

@@ -0,0 +1,268 @@
<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"/>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.0.1/dist/alpine.js" defer></script>
<link href="https://cdn.jsdelivr.net/npm/highlightjs-themes@1.0.0/darkula.css" rel="stylesheet"/>
<script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
<style>
* { box-sizing: border-box; }
.font-sans { font-family: "Inter", sans-serif; }
.hljs {
background: #252f3f;
color: white;
}
.hljs-tag {
color: white;
}
.hljs-name {
color: #ff8383;
}
.hljs-attr {
color: #ffe484;
font-style: italic;
}
.hljs-string {
color: #b5f4a5;
}
</style>
</head>
<body class="font-sans antialiased text-gray-900">
<main>
<div class="py-4 sm:py-12">
<div class="max-w-8xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="pb-2">
<nav class="flex items-center text-sm leading-5 font-medium">
<a href="/#application-ui" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
Application UI
</a>
<svg class="flex-shrink-0 mx-2 h-5 w-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
<a href="/#application-ui-data-display" class="text-gray-500 hover:text-gray-700 focus:outline-none focus:underline transition duration-150 ease-in-out">
Data Display
</a>
</nav>
</div>
<h2 class="text-2xl leading-8 font-semibold font-display text-gray-900 sm:text-3xl sm:leading-9">
Stats
</h2>
</div>
<div class="mt-6 bg-white max-w-8xl mx-auto sm:px-6 lg:px-8">
<div class="max-w-8xl mx-auto">
<div id="component-2ec02934bbf35ec45d8f0021b4783e581496845d" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
<a href="#component-2ec02934bbf35ec45d8f0021b4783e581496845d">Simple</a>
</h3>
<div class="ml-4 flex flex-shrink-0 items-center">
<div class="flex items-center text-sm sm:hidden">
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<div class="hidden sm:flex items-center text-sm md:text-base">
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
Preview
</button>
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
Code
</button>
<textarea class="hidden">Code goes here</textarea>
</div>
<div class="hidden sm:flex sm:items-center">
<div class="pl-4 pr-3 self-stretch">
<div class="h-full border-l border-gray-200"></div>
</div>
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<title>Copy</title>
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="relative bg-gray-500">
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
<iframe x-ref="iframe" class="w-full" src="/components/application-ui/data-display/stats/simple.html" style="height: 265px;"></iframe>
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
</svg>
</div>
</div>
</div>
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
</div>
</div>
</div>
<div id="component-185e3f127fd0efc84812342d4d7fcf78bfe3cb6c" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
<a href="#component-185e3f127fd0efc84812342d4d7fcf78bfe3cb6c">With brand icon</a>
</h3>
<div class="ml-4 flex flex-shrink-0 items-center">
<div class="flex items-center text-sm sm:hidden">
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<div class="hidden sm:flex items-center text-sm md:text-base">
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
Preview
</button>
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
Code
</button>
<textarea class="hidden">Code goes here</textarea>
</div>
<div class="hidden sm:flex sm:items-center">
<div class="pl-4 pr-3 self-stretch">
<div class="h-full border-l border-gray-200"></div>
</div>
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<title>Copy</title>
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="relative bg-gray-500">
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
<iframe x-ref="iframe" class="w-full" src="/components/application-ui/data-display/stats/with_brand_icon.html" style="height: 265px;"></iframe>
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
</svg>
</div>
</div>
</div>
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
</div>
</div>
</div>
<div id="component-c6eac8e3655252b013cfaf742cc89be0808489b1" x-data="{ activeTab: 'preview' }" class="border-b border-t border-gray-200 sm:border sm:rounded-lg overflow-hidden mb-16">
<div class="px-4 py-2 border-b border-gray-200 flex justify-between items-center bg-white sm:py-4 sm:px-6 sm:items-baseline">
<h3 class="font-regular text-base md:text-lg leading-snug truncate">
<a href="#component-c6eac8e3655252b013cfaf742cc89be0808489b1">With shared borders</a>
</h3>
<div class="ml-4 flex flex-shrink-0 items-center">
<div class="flex items-center text-sm sm:hidden">
<button type="button" @click="activeTab === 'preview' ? (activeTab = 'code') : (activeTab = 'preview')" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-400 hover:text-gray-600 focus:text-gray-600': activeTab !== 'code'}" class="inline-block rounded-lg font-medium leading-none py-3 px-3 focus:outline-none text-gray-400 hover:text-gray-600 focus:text-gray-600">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M12.316 3.051a1 1 0 01.633 1.265l-4 12a1 1 0 11-1.898-.632l4-12a1 1 0 011.265-.633zM5.707 6.293a1 1 0 010 1.414L3.414 10l2.293 2.293a1 1 0 11-1.414 1.414l-3-3a1 1 0 010-1.414l3-3a1 1 0 011.414 0zm8.586 0a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-3 3a1 1 0 11-1.414-1.414L16.586 10l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
</div>
<div class="hidden sm:flex items-center text-sm md:text-base">
<button type="button" @click="activeTab = 'preview'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'preview', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'preview'}" class="inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none bg-indigo-50 text-indigo-700">
Preview
</button>
<button type="button" @click="activeTab = 'code'" :class="{'bg-indigo-50 text-indigo-700': activeTab === 'code', 'text-gray-500 hover:text-indigo-600 focus:text-indigo-600': activeTab !== 'code'}" class="ml-2 inline-block rounded-lg font-medium leading-none py-2 px-3 focus:outline-none text-gray-500 hover:text-indigo-600 focus:text-indigo-600">
Code
</button>
<textarea class="hidden">Code goes here</textarea>
</div>
<div class="hidden sm:flex sm:items-center">
<div class="pl-4 pr-3 self-stretch">
<div class="h-full border-l border-gray-200"></div>
</div>
<button type="button" @click="$refs.clipboardCode.select(); document.execCommand('copy')" class="ml-3 text-gray-400 hover:text-gray-500">
<svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
<title>Copy</title>
<path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"></path>
<path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="relative bg-gray-500">
<div :class="{ 'block': activeTab === 'preview', 'hidden': activeTab !== 'preview' }" class="block">
<div x-data="resizableIFrame()" x-init="init()" x-ref="root" :style="'max-width: 100%; width: ' + width" class="sm:min-w-preview-mobile relative sm:pr-4" style="max-width: 100%; width: 100%">
<iframe x-ref="iframe" class="w-full" src="/components/application-ui/data-display/stats/with_shared_borders.html" style="height: 265px;"></iframe>
<div :class="{ 'pointer-events-none': !resizing }" class="absolute opacity-0 inset-0 pointer-events-none"></div>
<div x-ref="handle" class="sr-only sm:not-sr-only sm:border-l sm:bg-gray-100 sm:absolute sm:right-0 sm:inset-y-0 sm:flex sm:items-center sm:w-4">
<svg class="h-4 w-4 text-gray-600 pointer-events-none" fill="currentColor" viewBox="0 0 24 24">
<path d="M8 5h2v14H8zM14 5h2v14h-2z"></path>
</svg>
</div>
</div>
</div>
<div :class="{ 'block': activeTab === 'code', 'hidden': activeTab !== 'code' }" class="hidden">
<pre class="block scrollbar-none m-0 p-0 overflow-auto text-white text-sm bg-gray-800 leading-normal"><code class="inline-block p-4 scrolling-touch subpixel-antialiased"></code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<script>
(function() {
const getDocHeight = doc => {
doc = doc || document;
const body = doc.body;
const html = doc.documentElement;
const height = Math.max(
body.scrollHeight,
body.offsetHeight,
html.clientHeight,
html.scrollHeight,
html.offsetHeight
);
return height;
};
window.resizableIFrame = function() {
return {
resizing: !1,
width: "100%",
init: function() {}
};
};
const iframes = document.querySelectorAll("iframe");
Array.from(iframes).forEach(iframe => {
iframe.addEventListener("load", e => {
const iframe = e.srcElement;
const doc = iframe.contentDocument || iframe.contentWindow.document;
doc.body.classList.add("antialiased", "font-sans", "bg-white")
iframe.style.visibility = "hidden";
iframe.style.height = "10px";
const height = Math.max(getDocHeight(doc), 256) + "px";
iframe.style.height = height;
iframe.style.visibility = "visible";
const html = doc.body.innerHTML.trim();
const container = iframe.parentElement.parentElement.parentElement;
hljs.configure({useBR: false, tabReplace: ' '});
const highlighted = hljs.highlight('html', html);
const codeElem = container.children[1].querySelector("code");
codeElem.innerHTML = highlighted.value;
});
});
})();
</script>
</body>
</html>

50
tailwindui/components/application-ui/data-display/stats/simple.html Normal file
View File

@@ -0,0 +1,50 @@
<!--
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
Read the documentation to get started: https://tailwindui.com/documentation
--><html>
<head /><body>
<div>
<h3 class="text-lg leading-6 font-medium text-gray-900">
Last 30 days
</h3>
<div class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<dl>
<dt class="text-sm leading-5 font-medium text-gray-500 truncate">
Total Subscribers
</dt>
<dd class="mt-1 text-3xl leading-9 font-semibold text-gray-900">
71,897
</dd>
</dl>
</div>
</div>
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<dl>
<dt class="text-sm leading-5 font-medium text-gray-500 truncate">
Avg. Open Rate
</dt>
<dd class="mt-1 text-3xl leading-9 font-semibold text-gray-900">
58.16%
</dd>
</dl>
</div>
</div>
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<dl>
<dt class="text-sm leading-5 font-medium text-gray-500 truncate">
Avg. Click Rate
</dt>
<dd class="mt-1 text-3xl leading-9 font-semibold text-gray-900">
24.57%
</dd>
</dl>
</div>
</div>
</div>
</div>
</body>
</html>

134
tailwindui/components/application-ui/data-display/stats/with_brand_icon.html Normal file
View File

@@ -0,0 +1,134 @@
<!--
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
Read the documentation to get started: https://tailwindui.com/documentation
--><html>
<head /><body>
<div>
<h3 class="text-lg leading-6 font-medium text-gray-900">
Last 30 days
</h3>
<div class="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
<!-- Heroicon name: users -->
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
</div>
<div class="ml-5 w-0 flex-1">
<dl>
<dt class="text-sm leading-5 font-medium text-gray-500 truncate">
Total Subscribers
</dt>
<dd class="flex items-baseline">
<div class="text-2xl leading-8 font-semibold text-gray-900">
71,897
</div>
<div class="ml-2 flex items-baseline text-sm leading-5 font-semibold text-green-600">
<svg class="self-center flex-shrink-0 h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
<span class="sr-only">
Increased by
</span>
122
</div>
</dd>
</dl>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-4 sm:px-6">
<div class="text-sm leading-5">
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
View all
</a>
</div>
</div>
</div>
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
<!-- Heroicon name: mail-open -->
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 19v-8.93a2 2 0 01.89-1.664l7-4.666a2 2 0 012.22 0l7 4.666A2 2 0 0121 10.07V19M3 19a2 2 0 002 2h14a2 2 0 002-2M3 19l6.75-4.5M21 19l-6.75-4.5M3 10l6.75 4.5M21 10l-6.75 4.5m0 0l-1.14.76a2 2 0 01-2.22 0l-1.14-.76" />
</svg>
</div>
<div class="ml-5 w-0 flex-1">
<dl>
<dt class="text-sm leading-5 font-medium text-gray-500 truncate">
Avg. Open Rate.
</dt>
<dd class="flex items-baseline">
<div class="text-2xl leading-8 font-semibold text-gray-900">
58.16%
</div>
<div class="ml-2 flex items-baseline text-sm leading-5 font-semibold text-green-600">
<svg class="self-center flex-shrink-0 h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
<span class="sr-only">
Increased by
</span>
5.4%
</div>
</dd>
</dl>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-4 sm:px-6">
<div class="text-sm leading-5">
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
View all
</a>
</div>
</div>
</div>
<div class="bg-white overflow-hidden shadow rounded-lg">
<div class="px-4 py-5 sm:p-6">
<div class="flex items-center">
<div class="flex-shrink-0 bg-indigo-500 rounded-md p-3">
<!-- Heroicon name: cursor-click -->
<svg class="h-6 w-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122" />
</svg>
</div>
<div class="ml-5 w-0 flex-1">
<dl>
<dt class="text-sm leading-5 font-medium text-gray-500 truncate">
Avg. Click Rate
</dt>
<dd class="flex items-baseline">
<div class="text-2xl leading-8 font-semibold text-gray-900">
24.57
</div>
<div class="ml-2 flex items-baseline text-sm leading-5 font-semibold text-red-600">
<svg class="self-center flex-shrink-0 h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="sr-only">
Decreased by
</span>
3.2%
</div>
</dd>
</dl>
</div>
</div>
</div>
<div class="bg-gray-50 px-4 py-4 sm:px-6">
<div class="text-sm leading-5">
<a href="#" class="font-medium text-indigo-600 hover:text-indigo-500 transition ease-in-out duration-150">
View all
</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

92
tailwindui/components/application-ui/data-display/stats/with_shared_borders.html Normal file
View File

@@ -0,0 +1,92 @@
<!--
Tailwind UI components require Tailwind CSS v1.8 and the @tailwindcss/ui plugin.
Read the documentation to get started: https://tailwindui.com/documentation
--><html>
<head /><body>
<div>
<h3 class="text-lg leading-6 font-medium text-gray-900">
Last 30 days
</h3>
<div class="mt-5 grid grid-cols-1 rounded-lg bg-white overflow-hidden shadow md:grid-cols-3">
<div>
<div class="px-4 py-5 sm:p-6">
<dl>
<dt class="text-base leading-6 font-normal text-gray-900">
Total Subscribers
</dt>
<dd class="mt-1 flex justify-between items-baseline md:block lg:flex">
<div class="flex items-baseline text-2xl leading-8 font-semibold text-indigo-600">
71,897
<span class="ml-2 text-sm leading-5 font-medium text-gray-500">
from 70,946
</span>
</div>
<div class="inline-flex items-baseline px-2.5 py-0.5 rounded-full text-sm font-medium leading-5 bg-green-100 text-green-800 md:mt-2 lg:mt-0">
<svg class="-ml-1 mr-0.5 flex-shrink-0 self-center h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
<span class="sr-only">
Increased by
</span>
12%
</div>
</dd>
</dl>
</div>
</div>
<div class="border-t border-gray-200 md:border-0 md:border-l">
<div class="px-4 py-5 sm:p-6">
<dl>
<dt class="text-base leading-6 font-normal text-gray-900">
Avg. Open Rate
</dt>
<dd class="mt-1 flex justify-between items-baseline md:block lg:flex">
<div class="flex items-baseline text-2xl leading-8 font-semibold text-indigo-600">
58.16%
<span class="ml-2 text-sm leading-5 font-medium text-gray-500">
from 56.14%
</span>
</div>
<div class="inline-flex items-baseline px-2.5 py-0.5 rounded-full text-sm font-medium leading-5 bg-green-100 text-green-800 md:mt-2 lg:mt-0">
<svg class="-ml-1 mr-0.5 flex-shrink-0 self-center h-5 w-5 text-green-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M5.293 9.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 7.414V15a1 1 0 11-2 0V7.414L6.707 9.707a1 1 0 01-1.414 0z" clip-rule="evenodd" />
</svg>
<span class="sr-only">
Increased by
</span>
2.02%
</div>
</dd>
</dl>
</div>
</div>
<div class="border-t border-gray-200 md:border-0 md:border-l">
<div class="px-4 py-5 sm:p-6">
<dl>
<dt class="text-base leading-6 font-normal text-gray-900">
Avg. Click Rate
</dt>
<dd class="mt-1 flex justify-between items-baseline md:block lg:flex">
<div class="flex items-baseline text-2xl leading-8 font-semibold text-indigo-600">
24.57%
<span class="ml-2 text-sm leading-5 font-medium text-gray-500">
from 28.62
</span>
</div>
<div class="inline-flex items-baseline px-2.5 py-0.5 rounded-full text-sm font-medium leading-5 bg-red-100 text-red-800 md:mt-2 lg:mt-0">
<svg class="-ml-1 mr-0.5 flex-shrink-0 self-center h-5 w-5 text-red-500" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M14.707 10.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 12.586V5a1 1 0 012 0v7.586l2.293-2.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>
<span class="sr-only">
Decreased by
</span>
4.05%
</div>
</dd>
</dl>
</div>
</div>
</div>
</div>
</body>
</html>