├── tailwind-v3
    ├── avatar
    │   ├── default-avatar.html
    │   ├── square-avatar.html
    │   ├── stacked-avatars.html
    │   ├── avatar-with-border.html
    │   ├── avatar-with-status.html
    │   └── avatar-with-initials.html
    ├── link
    │   ├── default-link.html
    │   ├── link-within-text.html
    │   ├── button-link.html
    │   └── link-with-icon.html
    ├── spinner
    │   ├── default-spinner.html
    │   └── spinner-color-variants.html
    ├── progress
    │   ├── progress-bar-default.html
    │   ├── progress-bar-label-inside.html
    │   ├── progress-bar-label-outside.html
    │   ├── progress-bar-multiple.html
    │   ├── progress-bar-gradient.html
    │   └── progress-bar-color-variants.html
    ├── skeleton
    │   ├── profile-skeleton.html
    │   ├── default-skeleton.html
    │   └── image-skeleton.html
    ├── kbd
    │   ├── kbd-within-text.html
    │   ├── number-keys.html
    │   ├── function-keys.html
    │   └── frequently-used-keys.html
    ├── text-area
    │   ├── default-textarea.html
    │   └── textarea-states.html
    ├── text-input
    │   ├── default-text-input.html
    │   ├── input-with-mask.html
    │   ├── search-input.html
    │   ├── text-input-states.html
    │   └── password-input.html
    ├── breadcrumbs
    │   ├── breadcrumb-with-slash.html
    │   ├── breadcrumb-with-chevron.html
    │   └── breadcrumb-with-icon.html
    ├── tooltip
    │   ├── default-tooltip.html
    │   ├── tooltip-with-description.html
    │   └── click-tooltip.html
    ├── file-input
    │   ├── default-file-input.html
    │   ├── file-input-with-helper-text.html
    │   ├── file-input-with-drag-and-drop.html
    │   └── file-input-states.html
    ├── banner
    │   ├── simple-banner.html
    │   ├── fixed-banner.html
    │   ├── banner-with-button.html
    │   └── cookie-banner.html
    ├── range
    │   ├── default-range-slider.html
    │   ├── range-slider-with-value.html
    │   ├── range-slider-with-icons.html
    │   └── range-slider-with-ticks.html
    ├── card
    │   ├── default-card.html
    │   ├── horizontal-card.html
    │   ├── pricing-card.html
    │   ├── card-with-button.html
    │   └── testimonial-card.html
    ├── radio
    │   ├── radio-with-description.html
    │   ├── default-radio.html
    │   └── radio-with-container.html
    ├── select
    │   ├── default-select.html
    │   ├── select-with-dependant.html
    │   └── select-states.html
    ├── toggle
    │   ├── default-toggle.html
    │   └── toggle-with-container.html
    ├── pagination
    │   ├── pagination-with-next-preview.html
    │   ├── default-pagination.html
    │   └── pagination-with-ellipsis.html
    ├── chat-bubble
    │   ├── default-chat-bubble.html
    │   ├── chat-bubble-with-timestamp.html
    │   ├── typing-indicator.html
    │   └── chat-bubble-with-avatar.html
    ├── checkbox
    │   ├── default-checkbox.html
    │   ├── checkbox-with-container.html
    │   ├── checkbox-with-description.html
    │   └── checkbox-with-custom-icon.html
    ├── badge
    │   ├── notification-badge.html
    │   ├── default-badge.html
    │   ├── animating-notification-badge.html
    │   ├── soft-color-badge.html
    │   └── badge-with-indicator.html
    ├── table
    │   ├── default-table.html
    │   ├── table-with-action.html
    │   └── striped-table.html
    ├── rating
    │   ├── emoji-rating.html
    │   └── default-rating.html
    ├── steps
    │   ├── default-steps.html
    │   ├── steps-with-labels.html
    │   └── vertical-steps.html
    ├── counter
    │   ├── split-counter.html
    │   └── default-counter.html
    ├── alert
    │   └── alert-with-list.html
    ├── modal
    │   ├── video-modal.html
    │   ├── modal-backdrop-style.html
    │   ├── modal-placement.html
    │   ├── default-modal.html
    │   └── modal-transition.html
    ├── tabs
    │   └── default-tabs.html
    ├── dropdowns
    │   ├── dropdown-with-click.html
    │   ├── dropdown-with-hover.html
    │   └── dropdown-with-divider.html
    ├── navbar
    │   ├── default-navbar.html
    │   └── with-call-to-action.html
    ├── buttons
    │   ├── ghost-button.html
    │   ├── default-button.html
    │   └── outline-button.html
    └── carousel
    │   ├── carousel-with-touch.html
    │   └── carousel-with-fixed-aspect-ratio.html
├── LICENSE
└── README.md


/tailwind-v3/avatar/default-avatar.html:
--------------------------------------------------------------------------------
1 | <img class="size-14 rounded-full object-cover" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
2 | 


--------------------------------------------------------------------------------
/tailwind-v3/avatar/square-avatar.html:
--------------------------------------------------------------------------------
1 | <img class="size-14 rounded-md object-cover" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp"
2 |     alt="Rounded avatar">


--------------------------------------------------------------------------------
/tailwind-v3/link/default-link.html:
--------------------------------------------------------------------------------
1 | <a href="#" class="font-medium text-black underline-offset-2 hover:underline focus:underline focus:outline-none dark:text-white">Read if bored</a>
2 | 


--------------------------------------------------------------------------------
/tailwind-v3/link/link-within-text.html:
--------------------------------------------------------------------------------
1 | <p class="text-neutral-600 dark:text-neutral-300">Follow us on <a href="#" class="font-medium text-black underline-offset-2 hover:underline focus:underline focus:outline-none dark:text-white">social media</a> and become our virtual BFF. We promise not to send cat videos (just kidding, we totally will).</p>
2 | 


--------------------------------------------------------------------------------
/tailwind-v3/link/button-link.html:
--------------------------------------------------------------------------------
1 | <a href="#" class="whitespace-nowrap rounded-md bg-black px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-100 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 dark:bg-white dark:text-black dark:focus-visible:outline-white" role="button">I'm a link</a>
2 | 


--------------------------------------------------------------------------------
/tailwind-v3/spinner/default-spinner.html:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="size-5 fill-neutral-600 motion-safe:animate-spin dark:fill-neutral-300">
2 |     <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25" />
3 |     <path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" />
4 | </svg>
5 | 


--------------------------------------------------------------------------------
/tailwind-v3/link/link-with-icon.html:
--------------------------------------------------------------------------------
1 | <p class="text-neutral-600 dark:text-neutral-300">Find out more <a href="#" class="font-medium text-black underline-offset-2 hover:underline focus:underline focus:outline-none dark:text-white">about our company
2 | 	<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true" stroke="currentColor" class="size-4 inline">
3 | 		<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
4 | 	</svg></a>
5 | </p>
6 | 


--------------------------------------------------------------------------------
/tailwind-v3/progress/progress-bar-default.html:
--------------------------------------------------------------------------------
1 | <div x-data="{ currentVal: 20 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-md bg-neutral-50 dark:bg-neutral-900" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal">
2 |     <div class="h-full rounded-md bg-black dark:bg-white" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`">
3 |     </div>
4 | </div>


--------------------------------------------------------------------------------
/tailwind-v3/skeleton/profile-skeleton.html:
--------------------------------------------------------------------------------
1 | <div class="flex items-center gap-2">
2 | 	<div class="size-16 animate-pulse rounded-full bg-neutral-50 dark:bg-neutral-900" aria-hidden="true"></div>
3 | 	<div class="flex w-52 flex-col gap-2">
4 | 		<div class="h-3.5 w-full animate-pulse rounded-md bg-neutral-50 dark:bg-neutral-900" aria-hidden="true"></div>
5 | 		<div class="h-3.5 w-1/2 animate-pulse rounded-md bg-neutral-50 dark:bg-neutral-900" aria-hidden="true"></div>
6 | 	</div>
7 | 	<span class="sr-only">loading</span>
8 | </div>
9 | 


--------------------------------------------------------------------------------
/tailwind-v3/skeleton/default-skeleton.html:
--------------------------------------------------------------------------------
1 | <div class="flex w-full flex-col gap-2">
2 | 	<div class="h-3.5 w-full animate-pulse rounded-md bg-neutral-50 dark:bg-neutral-900" aria-hidden="true"></div>
3 | 	<div class="h-3.5 w-full animate-pulse rounded-md bg-neutral-50 dark:bg-neutral-900" aria-hidden="true"></div>
4 | 	<div class="h-3.5 w-full animate-pulse rounded-md bg-neutral-50 dark:bg-neutral-900" aria-hidden="true"></div>
5 | 	<div class="h-3.5 w-1/2 animate-pulse rounded-md bg-neutral-50 dark:bg-neutral-900" aria-hidden="true"></div>
6 | 	<span class="sr-only">loading</span>
7 | </div>
8 | 


--------------------------------------------------------------------------------
/tailwind-v3/kbd/kbd-within-text.html:
--------------------------------------------------------------------------------
1 | <p class="leading-7 text-neutral-600 *:align-middle dark:text-neutral-300">To <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">Tab</kbd> or to <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">Space</kbd> that's the question! </p>
2 | 


--------------------------------------------------------------------------------
/tailwind-v3/text-area/default-textarea.html:
--------------------------------------------------------------------------------
1 | <div class="flex w-full max-w-md flex-col gap-1 text-neutral-600 dark:text-neutral-300">
2 |     <label for="textArea" class="w-fit pl-0.5 text-sm">Comment</label>
3 |     <textarea id="textArea" class="w-full rounded-md border border-neutral-300 bg-neutral-50 px-2.5 py-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:border-neutral-700 dark:bg-neutral-900/50 dark:focus-visible:outline-white" rows="3" placeholder="We'd love to hear from you..."></textarea>
4 | </div>
5 | 


--------------------------------------------------------------------------------
/tailwind-v3/text-input/default-text-input.html:
--------------------------------------------------------------------------------
1 | <div class="flex w-full max-w-xs flex-col gap-1 text-neutral-600 dark:text-neutral-300">
2 |     <label for="textInputDefault" class="w-fit pl-0.5 text-sm">Name</label>
3 |     <input id="textInputDefault" type="text" class="w-full rounded-md border border-neutral-300 bg-neutral-50 px-2 py-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:border-neutral-700 dark:bg-neutral-900/50 dark:focus-visible:outline-white" name="name" placeholder="Enter your name" autocomplete="name"/>
4 | </div>
5 | 


--------------------------------------------------------------------------------
/tailwind-v3/text-input/input-with-mask.html:
--------------------------------------------------------------------------------
1 | <div x-data class="flex w-full max-w-xs flex-col gap-1 text-neutral-600 dark:text-neutral-300">
2 |     <label for="phoneInput" class="w-fit pl-0.5 text-sm">Phone</label>
3 |     <input id="phoneInput" type="text" class="w-full rounded-md border border-neutral-300 bg-neutral-50 px-2 py-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:border-neutral-700 dark:bg-neutral-900/50 dark:focus-visible:outline-white" x-mask="(999) 999-9999" name="phone" autocomplete="tel-national" placeholder="(999) 999-9999"/>
4 | </div>
5 | 


--------------------------------------------------------------------------------
/tailwind-v3/breadcrumbs/breadcrumb-with-slash.html:
--------------------------------------------------------------------------------
 1 | <nav class="text-sm font-medium text-neutral-600 dark:text-neutral-300" aria-label="breadcrumb">
 2 | 	<ol class="flex flex-wrap items-center gap-2">
 3 | 		<li class="flex items-center gap-2">
 4 | 			<a href="#" class="hover:text-neutral-900 dark:hover:text-white">Home</a>
 5 | 			<span aria-hidden="true">/</span>
 6 | 		</li>
 7 | 		<li class="flex items-center gap-2">
 8 | 			<a href="#" class="hover:text-neutral-900 dark:hover:text-white">Components</a>
 9 | 			<span aria-hidden="true">/</span>
10 | 		</li>
11 | 		<li class="text-neutral-900 font-bold dark:text-white" aria-current="page">Breadcrumb</li>
12 | 	</ol>
13 | </nav>
14 | 


--------------------------------------------------------------------------------
/tailwind-v3/progress/progress-bar-label-inside.html:
--------------------------------------------------------------------------------
1 | <div x-data="{ currentVal: 20 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return (((val-min)/(max-min))*100).toFixed(0)} }" class="flex h-4 w-full overflow-hidden rounded-md bg-neutral-50 dark:bg-neutral-900" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal">
2 |     <div class="h-full rounded-md bg-black p-0.5 text-center text-xs font-semibold leading-none text-neutral-100 dark:bg-white dark:text-black" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`">
3 |         <span x-text="`${calcPercentage(minVal, maxVal, currentVal)}%`"></span>
4 |     </div>
5 | </div>


--------------------------------------------------------------------------------
/tailwind-v3/tooltip/default-tooltip.html:
--------------------------------------------------------------------------------
1 | <div class="relative">
2 |     <button type="button" class="peer cursor-pointer rounded-md bg-neutral-50 px-4 py-2 font-medium tracking-wide text-neutral-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black dark:bg-neutral-900 dark:text-neutral-300 dark:focus-visible:outline-white" aria-describedby="tooltipExample">Hover Me</button>
3 |     <div id="tooltipExample" class="absolute -top-9 left-1/2 -translate-x-1/2 z-10 whitespace-nowrap rounded bg-neutral-950 px-2 py-1 text-center text-sm text-white opacity-0 transition-all ease-out peer-hover:opacity-100 peer-focus:opacity-100 dark:bg-white dark:text-neutral-900" role="tooltip">Tooltip top</div>
4 | </div>
5 | 


--------------------------------------------------------------------------------
/tailwind-v3/file-input/default-file-input.html:
--------------------------------------------------------------------------------
1 | <div class="relative flex w-full max-w-sm flex-col gap-1">
2 |     <label class="w-fit pl-0.5 text-sm text-neutral-600 dark:text-neutral-300" for="fileInput">Upload File</label>
3 |     <input id="fileInput" type="file" class="w-full overflow-clip rounded-md border border-neutral-300 bg-neutral-50/50 text-sm text-neutral-600 file:mr-4 file:cursor-pointer file:border-none file:bg-neutral-50 file:px-4 file:py-2 file:font-medium file:text-neutral-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:border-neutral-700 dark:bg-neutral-900/50 dark:text-neutral-300 dark:file:bg-neutral-900 dark:file:text-white dark:focus-visible:outline-white" />
4 | </div>
5 | 


--------------------------------------------------------------------------------
/tailwind-v3/skeleton/image-skeleton.html:
--------------------------------------------------------------------------------
1 | <div>
2 | 	<div class="flex h-44 w-60 items-center justify-center rounded-md bg-neutral-50 motion-safe:animate-pulse dark:bg-neutral-900" aria-hidden="true">
3 | 		<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-12 fill-neutral-600/10 dark:fill-neutral-300/10">
4 | 			<path fill-rule="evenodd" d="M1 5.25A2.25 2.25 0 0 1 3.25 3h13.5A2.25 2.25 0 0 1 19 5.25v9.5A2.25 2.25 0 0 1 16.75 17H3.25A2.25 2.25 0 0 1 1 14.75v-9.5Zm1.5 5.81v3.69c0 .414.336.75.75.75h13.5a.75.75 0 0 0 .75-.75v-2.69l-2.22-2.219a.75.75 0 0 0-1.06 0l-1.91 1.909.47.47a.75.75 0 1 1-1.06 1.06L6.53 8.091a.75.75 0 0 0-1.06 0l-2.97 2.97ZM12 7a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z" clip-rule="evenodd" />
5 | 		</svg>
6 | 	</div>
7 | 	<span class="sr-only">loading</span>
8 | </div>
9 | 


--------------------------------------------------------------------------------
/tailwind-v3/banner/simple-banner.html:
--------------------------------------------------------------------------------
1 | <div class="relative flex border-neutral-300 bg-neutral-50 p-4 text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 border-b">
2 |     <p class="px-6 text-xs sm:text-sm text-pretty mx-auto">Limited Time Offer! Explore exclusive <a href="#" class="font-medium text-black underline-offset-2 hover:underline focus:underline focus:outline-none dark:text-white">deals & savings</a> </p>
3 |     <button class="absolute top-1/2 -translate-y-1/2 right-4" aria-label="dismiss banner">
4 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2.5" class="h-4 w-4 shrink-0">
5 |             <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
6 |         </svg>
7 |     </button>
8 | </div>


--------------------------------------------------------------------------------
/tailwind-v3/file-input/file-input-with-helper-text.html:
--------------------------------------------------------------------------------
1 | <div class="relative flex w-full max-w-sm flex-col gap-1 text-neutral-600 dark:text-neutral-300">
2 |     <label for="fileInput" class="w-fit pl-0.5 text-sm">Upload File</label>
3 |     <input id="fileInput" type="file" class="w-full max-w-md overflow-clip rounded-md border border-neutral-300 bg-neutral-50/50 text-sm file:mr-4 file:cursor-pointer file:border-none file:bg-neutral-50 file:px-4 file:py-2 file:font-medium file:text-neutral-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:border-neutral-700 dark:bg-neutral-900/50 dark:file:bg-neutral-900 dark:file:text-white dark:focus-visible:outline-white" />
4 |     <small class="pl-0.5">PNG, JPG, WebP - Max 5MB</small>
5 | </div>
6 | 


--------------------------------------------------------------------------------
/tailwind-v3/progress/progress-bar-label-outside.html:
--------------------------------------------------------------------------------
 1 | <div x-data="{ currentVal: 20 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return (((val-min)/(max-min))*100).toFixed(0)} }" class="w-full">
 2 |     <div class="mb-1 flex items-end justify-between gap-2 text-neutral-600 dark:text-neutral-300">   
 3 |         <span>Progress</span>
 4 |         <span x-text="`${calcPercentage(minVal, maxVal, currentVal)}%`"></span>
 5 |     </div> 
 6 |     <div class="flex h-2.5 w-full overflow-hidden rounded-md bg-neutral-50 dark:bg-neutral-900" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal">
 7 |         <div class="h-full rounded-md bg-black dark:bg-white" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`">
 8 |         </div>
 9 |     </div>
10 | </div>
11 | 


--------------------------------------------------------------------------------
/tailwind-v3/banner/fixed-banner.html:
--------------------------------------------------------------------------------
1 | <div class="fixed inset-x-0 top-0 z-10 flex border-neutral-300 bg-neutral-50 p-4 text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 border-b">
2 |     <p class="px-6 text-xs sm:text-sm text-pretty mx-auto">Limited Time Offer! Explore exclusive <a href="#" class="font-medium text-black underline-offset-2 hover:underline focus:underline focus:outline-none dark:text-white">deals & savings</a> </p>
3 |     <button class="absolute top-1/2 -translate-y-1/2 right-4" aria-label="dismiss banner">
4 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2.5" class="h-4 w-4 shrink-0">
5 |             <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
6 |         </svg>
7 |     </button>
8 | </div>


--------------------------------------------------------------------------------
/tailwind-v3/avatar/stacked-avatars.html:
--------------------------------------------------------------------------------
 1 | <div class="flex items-center -space-x-4">
 2 |     <img class="size-14 rounded-full border-2 border-white object-cover dark:border-neutral-950"
 3 |         src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
 4 |     <img class="size-14 rounded-full border-2 border-white object-cover dark:border-neutral-950"
 5 |         src="https://penguinui.s3.amazonaws.com/component-assets/avatar-3.webp" alt="Rounded avatar">
 6 |     <img class="size-14 rounded-full border-2 border-white object-cover dark:border-neutral-950"
 7 |         src="https://penguinui.s3.amazonaws.com/component-assets/avatar-5.webp" alt="Rounded avatar">
 8 |     <img class="size-14 rounded-full border-2 border-white object-cover dark:border-neutral-950"
 9 |         src="https://penguinui.s3.amazonaws.com/component-assets/avatar-1.webp" alt="Rounded avatar">
10 | </div>


--------------------------------------------------------------------------------
/tailwind-v3/range/default-range-slider.html:
--------------------------------------------------------------------------------
1 | <div class="flex w-full flex-col gap-4 text-neutral-600 dark:text-neutral-300"></div>
2 |     <label for="rangeSlider" class="w-fit pl-0.5 text-sm">Mood Meter</label>
3 |     <input id="rangeSlider" type="range" class="h-2 w-full appearance-none bg-neutral-50 focus:outline-black dark:bg-neutral-900 dark:focus:outline-white [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-black active:[&::-moz-range-thumb]:scale-110 [&::-moz-range-thumb]:dark:bg-white [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:border-none [&::-webkit-slider-thumb]:bg-black active:[&::-webkit-slider-thumb]:scale-110 [&::-webkit-slider-thumb]:dark:bg-white [&::-moz-range-thumb]:rounded-full [&::-webkit-slider-thumb]:rounded-full rounded-full" value="20" min="0" max="100" step="1" />
4 | </div>


--------------------------------------------------------------------------------
/tailwind-v3/avatar/avatar-with-border.html:
--------------------------------------------------------------------------------
 1 | <!-- info Border Avatar -->
 2 | <img class="size-14 rounded-full border-2 border-sky-500 object-cover object-center p-0.5" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
 3 | 
 4 | <!-- success Border Avatar -->
 5 | <img class="size-14 rounded-full border-2 border-green-500 object-cover object-center p-0.5" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
 6 | 
 7 | <!-- warning Border Avatar -->
 8 | <img class="size-14 rounded-full border-2 border-amber-500 object-cover object-center p-0.5" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
 9 | 
10 | <!-- danger Border Avatar -->
11 | <img class="size-14 rounded-full border-2 border-red-500 object-cover object-center p-0.5" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
12 | 
13 | 


--------------------------------------------------------------------------------
/tailwind-v3/text-input/search-input.html:
--------------------------------------------------------------------------------
1 | <div class="relative flex w-full max-w-xs flex-col gap-1 text-neutral-600 dark:text-neutral-300">
2 |     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true" class="absolute left-2.5 top-1/2 size-5 -translate-y-1/2 text-neutral-600/50 dark:text-neutral-300/50"> 
3 |         <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
4 |     </svg>
5 |     <input type="search" class="w-full rounded-md border border-neutral-300 bg-neutral-50 py-2 pl-10 pr-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:border-neutral-700 dark:bg-neutral-900/50 dark:focus-visible:outline-white" name="search" placeholder="Search" aria-label="search"/>
6 | </div>
7 | 


--------------------------------------------------------------------------------
/tailwind-v3/tooltip/tooltip-with-description.html:
--------------------------------------------------------------------------------
1 | <div class="relative">
2 |     <button type="button" class="peer cursor-pointer rounded-md bg-neutral-50 px-4 py-2 font-medium tracking-wide text-neutral-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black dark:bg-neutral-900 dark:text-neutral-300 dark:focus-visible:outline-white" aria-describedby="tooltipExample">Hover Me</button>
3 |     <div id="tooltipExample" class="pointer-events-none absolute bottom-full mb-2 left-1/2 -translate-x-1/2 z-10 flex w-64 flex-col gap-1 rounded bg-neutral-950 p-2.5 text-xs text-neutral-300 opacity-0 transition-all ease-out peer-hover:opacity-100 peer-focus:opacity-100 dark:bg-white dark:text-neutral-600" role="tooltip">
4 |         <span class="text-sm font-medium text-white dark:text-neutral-900">Tooltip top</span>
5 |         <p class="text-balance">A rich tooltip that contains longer text and is usually used to add a description.</p>
6 |     </div>
7 | </div>
8 | 


--------------------------------------------------------------------------------
/tailwind-v3/tooltip/click-tooltip.html:
--------------------------------------------------------------------------------
1 | <div x-data="{ showTooltip: false }" class="relative">
2 |     <button @click="showTooltip = !showTooltip" type="button" class="cursor-pointer rounded-md bg-neutral-50 px-4 py-2 font-medium tracking-wide text-neutral-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black dark:bg-neutral-900 dark:text-neutral-300 dark:focus-visible:outline-white" aria-describedby="tooltipExample">Hover Me</button>
3 |     <div x-cloak x-show="showTooltip" @click.outside="showTooltip = false" id="tooltipExample" class="absolute -top-9 left-1/2 -translate-x-1/2 z-10 whitespace-nowrap rounded bg-neutral-950 px-2 py-1 text-center text-sm text-white dark:bg-white dark:text-neutral-900" role="tooltip" x-transition:enter="transition ease-out" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition ease-out" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0">Tooltip top</div>
4 | </div>
5 | 


--------------------------------------------------------------------------------
/tailwind-v3/progress/progress-bar-multiple.html:
--------------------------------------------------------------------------------
1 | <div x-data="{ currentValA: 20, currentValB: 30, currentValC: 25 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-md bg-neutral-50 dark:bg-neutral-900">
2 |     <div class="h-full rounded-l-md bg-black dark:bg-white" :style="`width: ${calcPercentage(minVal, maxVal, currentValA)}%`" role="progressbar" aria-label="progress bar A" :aria-valuenow="currentValA" :aria-valuemin="minVal" :aria-valuemax="maxVal"></div>
3 |     <div class="h-full bg-sky-500 dark:bg-sky-500" :style="`width: ${calcPercentage(minVal, maxVal, currentValB)}%`" role="progressbar" aria-label="progress bar B" :aria-valuenow="currentValB" :aria-valuemin="minVal" :aria-valuemax="maxVal"></div>
4 |     <div class="h-full rounded-r-md bg-green-500 dark:bg-green-500" :style="`width: ${calcPercentage(minVal, maxVal, currentValC)}%`" role="progressbar" aria-label="progress bar C" :aria-valuenow="currentValC" :aria-valuemin="minVal" :aria-valuemax="maxVal"></div>
5 | </div>


--------------------------------------------------------------------------------
/tailwind-v3/card/default-card.html:
--------------------------------------------------------------------------------
 1 | <article class="group flex rounded-md max-w-sm flex-col overflow-hidden border border-neutral-300 bg-neutral-50 text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">
 2 |     <div class="h-44 md:h-64 overflow-hidden"> 
 3 |         <img src="https://penguinui.s3.amazonaws.com/component-assets/card-img-1.webp" class="object-cover transition duration-700 ease-out group-hover:scale-105" alt="a penguin robot talking with a human" />
 4 |     </div>
 5 |     <div class="flex flex-col gap-4 p-6">
 6 |         <span class="text-sm font-medium">Features</span>
 7 |         <h3 class="text-balance text-xl lg:text-2xl font-bold text-neutral-900 dark:text-white" aria-describedby="featureDescription">Penguai can teach you Javascript</h3>
 8 |         <p id="featureDescription" class="text-pretty text-sm">
 9 |             Learning JavaScript doesn't need to be difficult. Our penguin AI
10 |             robot can learn how much you know and will go at your speed.
11 |             Although Penguai is small, he's got a mighty big CPU.
12 |         </p>
13 |     </div>
14 | </article>


--------------------------------------------------------------------------------
/tailwind-v3/breadcrumbs/breadcrumb-with-chevron.html:
--------------------------------------------------------------------------------
 1 | <nav class="text-sm font-medium text-neutral-600 dark:text-neutral-300" aria-label="breadcrumb">
 2 | 	<ol class="flex flex-wrap items-center gap-1">
 3 | 		<li class="flex items-center gap-1">
 4 | 			<a href="#" class="hover:text-neutral-900 dark:hover:text-white">Home</a>
 5 | 			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" stroke-width="2" stroke="currentColor" class="size-4">
 6 | 				<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
 7 | 			</svg>
 8 | 		</li>
 9 | 		<li class="flex items-center gap-1">
10 | 			<a href="#" class="hover:text-neutral-900 dark:hover:text-white">Components</a>
11 | 			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" stroke-width="2" stroke="currentColor" class="size-4">
12 | 				<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
13 | 			</svg>
14 | 		</li>
15 | 		<li class="flex items-center text-neutral-900 gap-1 font-bold dark:text-white" aria-current="page">Breadcrumb</li>
16 | 	</ol>
17 | </nav>
18 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 Salar Houshvand
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/tailwind-v3/radio/radio-with-description.html:
--------------------------------------------------------------------------------
1 | <div class="flex flex-col text-neutral-600 dark:text-neutral-300">
2 |     <div class="flex items-center justify-start gap-2 font-medium has-[:disabled]:opacity-75">
3 |         <input id="radioMac" type="radio" class="before:content[''] relative h-4 w-4 appearance-none rounded-full border border-neutral-300 bg-neutral-50 before:invisible before:absolute before:left-1/2 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-neutral-100 checked:border-black checked:bg-black checked:before:visible focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-neutral-800 checked:focus:outline-black disabled:cursor-not-allowed dark:border-neutral-700 dark:bg-neutral-900 dark:before:bg-black dark:checked:border-white dark:checked:bg-white dark:focus:outline-neutral-300 dark:checked:focus:outline-white" name="radioDefault" value="" aria-describedby="radioMacDescription" checked >
4 |         <label for="radioMac" class="text-sm">Mac</label>
5 |     </div>
6 |     <span id="radioMacDescription" class="ml-6 text-sm">For macOS Big Sur and higher</span>
7 | </div>
8 | 


--------------------------------------------------------------------------------
/tailwind-v3/select/default-select.html:
--------------------------------------------------------------------------------
 1 | <div class="relative flex w-full max-w-xs flex-col gap-1 text-neutral-600 dark:text-neutral-300">
 2 |     <label for="os" class="w-fit pl-0.5 text-sm">Operating System</label>
 3 |     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="absolute pointer-events-none right-4 top-8 h-5 w-5">
 4 |         <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
 5 |     </svg>
 6 |     <select id="os" name="os" class="w-full appearance-none rounded-md border border-neutral-300 bg-neutral-50 px-4 py-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:border-neutral-700 dark:bg-neutral-900/50 dark:focus-visible:outline-white">
 7 |         <option selected>Please Select</option>
 8 |         <option value="mac">Mac</option>
 9 |         <option value="windows">Windows</option>
10 |         <option value="linux">Linux</option>
11 |     </select>
12 | </div>
13 | 


--------------------------------------------------------------------------------
/tailwind-v3/banner/banner-with-button.html:
--------------------------------------------------------------------------------
 1 | <div class="relative flex border-neutral-300 bg-neutral-50 p-4 text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 border-b">
 2 |     <div class="mx-auto flex flex-wrap items-center gap-2 px-6">
 3 |         <p class="sm:text-sm text-pretty text-xs">Get Fit Anywhere, Anytime 💪</p>
 4 |         <button type="button" class="cursor-pointer whitespace-nowrap bg-black px-4 py-1 text-center text-xs font-medium tracking-wide text-neutral-100 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 disabled:cursor-not-allowed disabled:opacity-75 dark:bg-white dark:text-black dark:focus-visible:outline-white rounded-md">Start free trial</button>
 5 |     </div>
 6 |     <button class="absolute top-1/2 -translate-y-1/2 right-4" aria-label="dismiss banner">
 7 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2.5" class="h-4 w-4 shrink-0">
 8 |             <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
 9 |         </svg>
10 |     </button>
11 | </div>


--------------------------------------------------------------------------------
/tailwind-v3/toggle/default-toggle.html:
--------------------------------------------------------------------------------
1 | <label for="defaultToggle" class="inline-flex cursor-pointer items-center gap-3">
2 |     <input id="defaultToggle" type="checkbox" class="peer sr-only" role="switch" checked  />
3 |     <span class="trancking-wide text-sm font-medium text-neutral-600 peer-checked:text-neutral-900 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-neutral-300 dark:peer-checked:text-white">Toggle</span>
4 |     <div class="relative h-6 w-11 after:h-5 after:w-5 peer-checked:after:translate-x-5 rounded-full border border-neutral-300 bg-neutral-50 after:absolute after:bottom-0 after:left-[0.0625rem] after:top-0 after:my-auto after:rounded-full after:bg-neutral-600 after:transition-all after:content-[''] peer-checked:bg-black peer-checked:after:bg-neutral-100 peer-focus:outline peer-focus:outline-2 peer-focus:outline-offset-2 peer-focus:outline-neutral-800 peer-focus:peer-checked:outline-black peer-active:outline-offset-0 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:border-neutral-700 dark:bg-neutral-900 dark:after:bg-neutral-300 dark:peer-checked:bg-white dark:peer-checked:after:bg-black dark:peer-focus:outline-neutral-300 dark:peer-focus:peer-checked:outline-white" aria-hidden="true"></div>
5 | </label>
6 | 


--------------------------------------------------------------------------------
/tailwind-v3/pagination/pagination-with-next-preview.html:
--------------------------------------------------------------------------------
 1 | <nav aria-label="pagination">
 2 | 	<ul class="flex flex-shrink-0 items-center gap-2 text-sm font-medium">
 3 | 		<li>
 4 | 			<a href="#" class="flex items-center rounded-md p-1 text-neutral-600 hover:text-black dark:text-neutral-300 dark:hover:text-white" aria-label="previous page">
 5 | 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-6">
 6 | 					<path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
 7 | 				</svg>
 8 | 				Previous
 9 | 			</a>
10 | 		</li>
11 | 		<li>
12 | 			<a href="#" class="flex items-center rounded-md p-1 text-neutral-600 hover:text-black dark:text-neutral-300 dark:hover:text-white" aria-label="next page">
13 | 				Next
14 | 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-6">
15 | 					<path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
16 | 				</svg>
17 | 			</a>
18 | 		</li>
19 | 	</ul>
20 | </nav>
21 | 


--------------------------------------------------------------------------------
/tailwind-v3/chat-bubble/default-chat-bubble.html:
--------------------------------------------------------------------------------
 1 | <div class="flex w-full flex-col gap-4">
 2 |     <!-- Recieved -->
 3 |     <div class="mr-auto flex max-w-[80%] flex-col gap-2 rounded-r-md rounded-tl-md bg-neutral-50 p-4 md:max-w-[60%] dark:bg-neutral-900">
 4 |         <span class="font-semibold text-neutral-900 dark:text-white">Penguin UI</span>
 5 |         <div class="text-sm text-neutral-600 dark:text-neutral-300">
 6 |             Hi there! How can I assist you today?
 7 |         </div>
 8 |     </div>
 9 | 
10 |     <!-- Sent -->
11 |     <div class="ml-auto flex max-w-[80%] flex-col gap-2 rounded-l-xl rounded-tr-xl bg-black p-4 text-sm text-neutral-100 md:max-w-[60%] dark:bg-white dark:text-black">
12 |         I accidentally deleted some important files. Can they be recovered?
13 |     </div>
14 | 
15 |     <!-- Recieved -->
16 |     <div class="mr-auto flex max-w-[80%] flex-col gap-2 rounded-r-md rounded-tl-md bg-neutral-50 p-4 text-neutral-600 md:max-w-[60%] dark:bg-neutral-900 dark:text-neutral-300">
17 |         <span class="font-semibold text-neutral-900 dark:text-white">Penguin UI</span>
18 |         <div class="text-sm">
19 |             I'm sorry to hear that. Let me guide you through the process to resolve it. Could you please provide your username?
20 |         </div>
21 |     </div>
22 | </div>
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Penguin UI
 2 | 
 3 | > **Warning**: This is the old version of Penguin UI components compatible with Tailwind CSS v3.4. For new components with more variants, please visit [penguinui.com](https://www.penguinui.com/).
 4 | 
 5 | A collection of beautifully designed UI components with **Tailwind CSS** and **Alpine JS**.  
 6 | [Check the main website](https://www.penguinui.com/).
 7 | 
 8 | 
 9 | 
10 | ## Getting Started
11 | 
12 | To use **Penguin UI**, you simply copy and paste the code from our website; therefore, Penguin UI doesn't require any installation or npm package. However, it has two main dependencies:
13 | 
14 | - **Tailwind CSS**: V3.4
15 | - **Alpine JS**: Some interactive components require the latest version of Alpine JS (currently V3) to function properly.
16 | 
17 | 
18 | 
19 | ## Installing Tailwind CSS
20 | 
21 | There are various ways to install Tailwind CSS. Please refer to [Tailwind's documentation](https://tailwindcss.com/docs/installation) to find the best installation method for your project.
22 | 
23 | 
24 | 
25 | ## Installing Alpine JS
26 | 
27 | The easiest way to add Alpine JS to your project is to include it with a `<script>` tag in the `<head>` of your HTML page:
28 | 
29 | ```html
30 | <head>
31 |     ...
32 |     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
33 | </head>
34 | 


--------------------------------------------------------------------------------
/tailwind-v3/toggle/toggle-with-container.html:
--------------------------------------------------------------------------------
1 | <label for="toggleWithContainer" class="inline-flex min-w-[14rem] cursor-pointer items-center justify-between gap-3 rounded-md border border-neutral-300 bg-neutral-50 px-4 py-1.5 dark:border-neutral-700 dark:bg-neutral-900">
2 |     <input id="toggleWithContainer" type="checkbox" class="peer sr-only" role="switch" checked />
3 |     <span class="trancking-wide text-sm font-medium text-neutral-600 peer-checked:text-neutral-900 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-neutral-300 dark:peer-checked:text-white">Toggle</span>
4 |     <div class="relative h-6 w-11 after:h-5 after:w-5 peer-checked:after:translate-x-5 rounded-full border border-neutral-300 bg-white after:absolute after:bottom-0 after:left-[0.0625rem] after:top-0 after:my-auto after:rounded-full after:bg-neutral-600 after:transition-all after:content-[''] peer-checked:bg-black peer-checked:after:bg-neutral-100 peer-focus:outline peer-focus:outline-2 peer-focus:outline-offset-2 peer-focus:outline-neutral-800 peer-focus:peer-checked:outline-black peer-active:outline-offset-0 peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:border-neutral-700 dark:bg-neutral-950 dark:after:bg-neutral-300 dark:peer-checked:bg-white dark:peer-checked:after:bg-black dark:peer-focus:outline-neutral-300 dark:peer-focus:peer-checked:outline-white" aria-hidden="true"></div>
5 | </label>
6 | 


--------------------------------------------------------------------------------
/tailwind-v3/file-input/file-input-with-drag-and-drop.html:
--------------------------------------------------------------------------------
 1 | <div class="flex w-full max-w-xl text-center flex-col gap-1">
 2 |     <span class="w-fit pl-0.5 text-sm text-neutral-600 dark:text-neutral-300">Cover Picture</span>
 3 |     <div class="flex w-full flex-col items-center justify-center gap-2 rounded-md border border-dashed border-neutral-300 p-8 text-neutral-600 dark:border-neutral-700 dark:text-neutral-300">
 4 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor" class="w-12 h-12 opacity-75">
 5 |             <path fill-rule="evenodd" d="M10.5 3.75a6 6 0 0 0-5.98 6.496A5.25 5.25 0 0 0 6.75 20.25H18a4.5 4.5 0 0 0 2.206-8.423 3.75 3.75 0 0 0-4.133-4.303A6.001 6.001 0 0 0 10.5 3.75Zm2.03 5.47a.75.75 0 0 0-1.06 0l-3 3a.75.75 0 1 0 1.06 1.06l1.72-1.72v4.94a.75.75 0 0 0 1.5 0v-4.94l1.72 1.72a.75.75 0 1 0 1.06-1.06l-3-3Z" clip-rule="evenodd"/>
 6 |         </svg>
 7 |         <div class="group">
 8 |             <label for="fileInputDragDrop" class="cursor-pointer font-medium text-black group-focus-within:underline dark:text-white">
 9 |                 <input id="fileInputDragDrop" type="file" class="sr-only" aria-describedby="validFileFormats" />
10 |                 Browse
11 |             </label>
12 |              or drag and drop here
13 |         </div>
14 |         <small id="validFileFormats">PNG, JPG, WebP - Max 5MB</small>
15 |     </div>
16 | </div>
17 | 


--------------------------------------------------------------------------------
/tailwind-v3/checkbox/default-checkbox.html:
--------------------------------------------------------------------------------
 1 | <label for="checkboxDefault" class="flex cursor-pointer items-center gap-2 text-sm font-medium text-neutral-600 dark:text-neutral-300 [&:has(input:checked)]:text-neutral-900 dark:[&:has(input:checked)]:text-white [&:has(input:disabled)]:opacity-75 [&:has(input:disabled)]:cursor-not-allowed">
 2 |     <div class="relative flex items-center">
 3 |         <input id="checkboxDefault" type="checkbox" class="before:content[''] peer relative size-4 cursor-pointer appearance-none overflow-hidden rounded border border-neutral-300 bg-neutral-50 before:absolute before:inset-0 checked:border-black checked:before:bg-black focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-neutral-800 checked:focus:outline-black active:outline-offset-0 disabled:cursor-not-allowed dark:border-neutral-700 dark:bg-neutral-900 dark:checked:border-white dark:checked:before:bg-white dark:focus:outline-neutral-300 dark:checked:focus:outline-white" checked/>
 4 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-neutral-100 peer-checked:visible dark:text-black">
 5 |             <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
 6 |         </svg>
 7 |     </div>
 8 |     <span>Notifications</span>
 9 | </label>
10 | 


--------------------------------------------------------------------------------
/tailwind-v3/chat-bubble/chat-bubble-with-timestamp.html:
--------------------------------------------------------------------------------
 1 | <div class="flex w-full flex-col gap-4">
 2 |     <!-- Recieved -->
 3 |     <div class="mr-auto flex max-w-[80%] flex-col gap-2 rounded-r-md rounded-tl-md bg-neutral-50 p-4 text-neutral-900 md:max-w-[60%] dark:bg-neutral-900 dark:text-white">
 4 |         <span class="font-semibold">Penguin UI</span>
 5 |         <div class="text-sm text-neutral-600 dark:text-neutral-300">
 6 |             Hi there! How can I assist you today?
 7 |         </div>
 8 |         <span class="ml-auto text-xs">11:32 AM</span>
 9 |     </div>
10 | 
11 |     <!-- Sent -->
12 |     <div class="ml-auto flex max-w-[80%] flex-col gap-2 rounded-l-xl rounded-tr-xl bg-black p-4 text-sm text-neutral-100 md:max-w-[60%] dark:bg-white dark:text-black">
13 |         I accidentally deleted some important files. Can they be recovered?
14 |         <span class="ml-auto text-xs">11:34 AM</span>
15 |     </div>
16 | 
17 |     <!-- Recieved -->
18 |     <div class="mr-auto flex max-w-[80%] flex-col gap-2 rounded-r-md rounded-tl-md bg-neutral-50 p-4 text-neutral-900 md:max-w-[60%] dark:bg-neutral-900 dark:text-white">
19 |         <span class="font-semibold">Penguin UI</span>
20 |         <div class="text-sm text-neutral-600 dark:text-neutral-300">
21 |             I'm sorry to hear that. Let me guide you through the process to resolve it. Could you please provide your username?
22 |         </div>
23 |         <span class="ml-auto text-xs">11:35 AM</span>
24 |     </div>
25 | </div>
26 | 


--------------------------------------------------------------------------------
/tailwind-v3/badge/notification-badge.html:
--------------------------------------------------------------------------------
 1 | <button class="relative w-fit text-neutral-600 dark:text-neutral-300" aria-label="notifications">
 2 |     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="size-8">
 3 |          <path fill-rule="evenodd" d="M5.25 9a6.75 6.75 0 0113.5 0v.75c0 2.123.8 4.057 2.118 5.52a.75.75 0 01-.297 1.206c-1.544.57-3.16.99-4.831 1.243a3.75 3.75 0 11-7.48 0 24.585 24.585 0 01-4.831-1.244.75.75 0 01-.298-1.205A8.217 8.217 0 005.25 9.75V9zm4.502 8.9a2.25 2.25 0 104.496 0 25.057 25.057 0 01-4.496 0z" clip-rule="evenodd"/>
 4 |     </svg>
 5 |     <span class="sr-only">notifications</span>
 6 |     <span class="absolute left-1/2 -top-1 rounded-full bg-red-500 px-1 leading-4 text-xs font-medium text-white">99+</span>
 7 | </button>
 8 | 
 9 | <button class="relative w-fit text-neutral-600 dark:text-neutral-300" aria-label="messages">
10 |     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="size-8">
11 |          <path fill-rule="evenodd" d="M4.848 2.771A49.144 49.144 0 0112 2.25c2.43 0 4.817.178 7.152.52 1.978.292 3.348 2.024 3.348 3.97v6.02c0 1.946-1.37 3.678-3.348 3.97-1.94.284-3.916.455-5.922.505a.39.39 0 00-.266.112L8.78 21.53A.75.75 0 017.5 21v-3.955a48.842 48.842 0 01-2.652-.316c-1.978-.29-3.348-2.024-3.348-3.97V6.741c0-1.946 1.37-3.68 3.348-3.97z" clip-rule="evenodd"/>
12 |     </svg>
13 |     <span class="absolute -right-0.5 top-0 size-3 rounded-full bg-red-500 text-xs font-medium"></span>
14 | </button>
15 | 


--------------------------------------------------------------------------------
/tailwind-v3/breadcrumbs/breadcrumb-with-icon.html:
--------------------------------------------------------------------------------
 1 | <nav class="text-sm font-medium text-neutral-600 dark:text-neutral-300" aria-label="breadcrumb">
 2 | 	<ol class="flex flex-wrap items-center gap-1">
 3 | 		<li class="flex items-center gap-1.5">
 4 | 			<a href="#" aira-label="home" class="hover:text-neutral-900 dark:hover:text-white">
 5 | 				<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true" class="size-4">
 6 | 					<path fill-rule="evenodd" clip-rule="evenodd" d="M9.293 2.293a1 1 0 0 1 1.414 0l7 7A1 1 0 0 1 17 11h-1v6a1 1 0 0 1-1 1h-2a1 1 0 0 1-1-1v-3a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-6H3a1 1 0 0 1-.707-1.707l7-7Z" />
 7 | 				</svg>	
 8 | 			</a>
 9 | 			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" stroke-width="2" stroke="currentColor" class="size-4">
10 | 				<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
11 | 			</svg>
12 | 		</li>
13 | 		<li class="flex items-center gap-1">
14 | 			<a href="#" class="hover:text-neutral-900 dark:hover:text-white">Components</a>
15 | 			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true" stroke-width="2" stroke="currentColor" class="size-4">
16 | 				<path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
17 | 			</svg>
18 | 		</li>
19 | 		<li class="flex items-center gap-1 font-bold text-neutral-900 dark:text-white" aria-current="page">Breadcrumb</li>
20 | 	</ol>
21 | </nav>
22 | 


--------------------------------------------------------------------------------
/tailwind-v3/range/range-slider-with-value.html:
--------------------------------------------------------------------------------
1 | <div x-data="{ currentVal: 20 }" class="flex w-full items-center gap-4 text-neutral-600 dark:text-neutral-300">
2 |     <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="size-6 shrink-0" aria-hidden="true">
3 |         <path d="M13.5 4.06c0-1.336-1.616-2.005-2.56-1.06l-4.5 4.5H4.508c-1.141 0-2.318.664-2.66 1.905A9.76 9.76 0 0 0 1.5 12c0 .898.121 1.768.35 2.595.341 1.24 1.518 1.905 2.659 1.905h1.93l4.5 4.5c.945.945 2.561.276 2.561-1.06V4.06ZM18.584 5.106a.75.75 0 0 1 1.06 0c3.808 3.807 3.808 9.98 0 13.788a.75.75 0 0 1-1.06-1.06 8.25 8.25 0 0 0 0-11.668.75.75 0 0 1 0-1.06Z" />
4 |     </svg>
5 |     <label for="rangeSlider" class="sr-only">Brightness</label>
6 |     <input x-model="currentVal" id="rangeSlider" type="range" class="h-2 w-full appearance-none bg-neutral-50 focus:outline-black dark:bg-neutral-900 dark:focus:outline-white [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-black active:[&::-moz-range-thumb]:scale-110 [&::-moz-range-thumb]:dark:bg-white [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:border-none [&::-webkit-slider-thumb]:bg-black active:[&::-webkit-slider-thumb]:scale-110 [&::-webkit-slider-thumb]:dark:bg-white [&::-moz-range-thumb]:rounded-full [&::-webkit-slider-thumb]:rounded-full rounded-full" min="0" max="100" step="1" />
7 |     <span class="w-10 text-lg font-bold text-neutral-900 dark:text-white" x-text="currentVal"></span>
8 | </div>


--------------------------------------------------------------------------------
/tailwind-v3/checkbox/checkbox-with-container.html:
--------------------------------------------------------------------------------
 1 | <label for="checkboxDefault" class="inline-flex min-w-[14rem] cursor-pointer items-center justify-between rounded-md gap-3 border border-neutral-300 bg-neutral-50 px-4 py-2 text-sm font-medium text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 [&:has(input:checked)]:text-neutral-900 dark:[&:has(input:checked)]:text-white [&:has(input:disabled)]:opacity-75 [&:has(input:disabled)]:cursor-not-allowed">
 2 |     <span>Notifications</span>
 3 |     <div class="relative flex items-center">
 4 |         <input id="checkboxDefault" type="checkbox" class="before:content[''] peer relative size-4 cursor-pointer appearance-none overflow-hidden rounded border border-neutral-300 bg-white before:absolute before:inset-0 checked:border-black checked:before:bg-black focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-neutral-800 checked:focus:outline-black active:outline-offset-0 disabled:cursor-not-allowed dark:border-neutral-700 dark:bg-neutral-950 dark:checked:border-white dark:checked:before:bg-white dark:focus:outline-neutral-300 dark:checked:focus:outline-white" checked />
 5 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-neutral-100 peer-checked:visible dark:text-black">
 6 |             <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
 7 |         </svg>
 8 |     </div>
 9 | </label>
10 | 


--------------------------------------------------------------------------------
/tailwind-v3/table/default-table.html:
--------------------------------------------------------------------------------
 1 | <div class="overflow-hidden w-full overflow-x-auto rounded-md border border-neutral-300 dark:border-neutral-700">
 2 |     <table class="w-full text-left text-sm text-neutral-600 dark:text-neutral-300">
 3 |         <thead class="border-b border-neutral-300 bg-neutral-50 text-sm text-neutral-900 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white">
 4 |             <tr>
 5 |                 <th scope="col" class="p-4">CustomerID</th>
 6 |                 <th scope="col" class="p-4">Name</th>
 7 |                 <th scope="col" class="p-4">Email</th>
 8 |                 <th scope="col" class="p-4">Membership</th>
 9 |             </tr>
10 |         </thead>
11 |         <tbody class="divide-y divide-neutral-300 dark:divide-neutral-700">
12 |                 <tr>
13 |                     <td class="p-4">2335</td>
14 |                     <td class="p-4">Alice Brown</td>
15 |                     <td class="p-4">alice.brown@gmail.com</td>
16 |                     <td class="p-4">Silver</td>
17 |                 </tr>
18 |                 <tr>
19 |                     <td class="p-4">2338</td>
20 |                     <td class="p-4">Bob Johnson</td>
21 |                     <td class="p-4">johnson.bob@outlook.com</td>
22 |                     <td class="p-4">Gold</td>
23 |                 </tr>
24 |                 <tr>
25 |                     <td class="p-4">2342</td>
26 |                     <td class="p-4">Sarah Adams</td>
27 |                     <td class="p-4">s.adams@gmail.com</td>
28 |                     <td class="p-4">Gold</td>
29 |                 </tr>
30 |         </tbody>
31 |     </table>
32 | </div>
33 | 


--------------------------------------------------------------------------------
/tailwind-v3/checkbox/checkbox-with-description.html:
--------------------------------------------------------------------------------
 1 | <div class="flex flex-col items-start">
 2 |     <label for="checkboxDefault" class="flex cursor-pointer items-center gap-2 text-sm font-medium text-neutral-600 dark:text-neutral-300 [&:has(input:checked)]:text-neutral-900 dark:[&:has(input:checked)]:text-white [&:has(input:disabled)]:opacity-75 [&:has(input:disabled)]:cursor-not-allowed">
 3 |         <div class="relative flex items-center">
 4 |             <input id="checkboxDefault" type="checkbox" class="before:content[''] peer relative size-4 cursor-pointer appearance-none overflow-hidden rounded border border-neutral-300 bg-neutral-50 before:absolute before:inset-0 checked:border-black checked:before:bg-black focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-neutral-800 checked:focus:outline-black active:outline-offset-0 disabled:cursor-not-allowed dark:border-neutral-700 dark:bg-neutral-900 dark:checked:border-white dark:checked:before:bg-white dark:focus:outline-neutral-300 dark:checked:focus:outline-white" aria-describedby="checkboxDescription" checked/>
 5 |             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-neutral-100 peer-checked:visible dark:text-black">
 6 |                 <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/>
 7 |             </svg>
 8 |         </div>
 9 |         <span>Email Updates</span>
10 |     </label>
11 |     <span id="checkboxDescription" class="ml-6 text-sm text-neutral-600 dark:text-neutral-300">You only gonna get good news, promise.</span>
12 | </div>
13 | 


--------------------------------------------------------------------------------
/tailwind-v3/card/horizontal-card.html:
--------------------------------------------------------------------------------
 1 | <article class="group grid rounded-md max-w-2xl grid-cols-1 md:grid-cols-8 overflow-hidden border border-neutral-300 bg-neutral-50 text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">
 2 |     <!-- image -->
 3 |     <div class="col-span-3 overflow-hidden">
 4 |         <img src="https://penguinui.s3.amazonaws.com/component-assets/card-img-4.webp" class="h-52 md:h-full w-full object-cover transition duration-700 ease-out group-hover:scale-105" alt="a men wearing VR goggles" />
 5 |     </div>
 6 |     <!-- body -->
 7 |     <div class="flex flex-col justify-center p-6 col-span-5">
 8 |         <small class="mb-4 font-medium">Artificial Intelligence</small>
 9 |         <h3 class="text-balance text-xl font-bold text-neutral-900 lg:text-2xl dark:text-white" aria-describedby="articleDescription">AI-Powered VR Goggles Redefine Reality: Augmented Vision for Al</h3>
10 |         <p id="articleDescription" class="my-4 max-w-lg text-pretty text-sm">
11 |             Experience the next level of augmented reality with smart
12 |             goggles integrating cutting-edge AI for seamless interaction
13 |             with the world around you.
14 |         </p>
15 |         <a href="#" class="w-fit font-medium text-black underline-offset-2 hover:underline focus:underline focus:outline-none dark:text-white">
16 |            Read full story
17 |             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="2.5" aria-hidden="true" class="inline size-4">
18 |                 <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
19 |             </svg>
20 |         </a>
21 |     </div>
22 | </article>


--------------------------------------------------------------------------------
/tailwind-v3/card/pricing-card.html:
--------------------------------------------------------------------------------
 1 | <article class="group flex rounded-md w-full max-w-xs flex-col overflow-hidden border-2 border-black bg-neutral-50 p-6 text-neutral-600 dark:border-white dark:bg-neutral-900 dark:text-neutral-300">
 2 |     <span class="ml-auto w-fit rounded-md bg-black px-2 py-1 text-xs font-medium text-neutral-100 dark:bg-white dark:text-black">TOP CHOICE</span>
 3 |     <h3 class="text-xl text-balance md:text-2xl font-bold text-neutral-900 dark:text-white" aria-describedby="planDescription">Premium</h3>
 4 |     <p id="planDescription" class="mt-2 text-pretty text-xs font-medium">Best tools for productivity</p>
 5 |     <span class="mt-8 text-balance text-3xl md:text-4xl font-medium text-neutral-600 dark:text-neutral-300">$8.99</span>
 6 |     <span class="mt-2 text-pretty text-xs font-medium">Per month</span>
 7 |     <h4 class="mt-12 font-medium text-neutral-900 dark:text-white">Features</h4>
 8 |     <ul class="mt-4 list-inside list-disc space-y-2 text-sm font-medium marker:text-lg marker:text-black dark:marker:text-white">
 9 |         <li>Unlimited access to all courses</li>
10 |         <li>Personalized learning plan</li>
11 |         <li>Offline viewing</li>
12 |         <li>No ads</li>
13 |         <li>High quality video</li>
14 |         <li>Cancel anytime</li>
15 |     </ul>
16 |     <button type="button" class="cursor-pointer mt-12 w-full whitespace-nowrap bg-black px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-100 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:bg-white dark:text-black dark:focus-visible:outline-white rounded-md">Start your free trial</button>
17 | </article>


--------------------------------------------------------------------------------
/tailwind-v3/badge/default-badge.html:
--------------------------------------------------------------------------------
 1 | <!-- default Badge -->
 2 | <span class="rounded-md w-fit border border-neutral-300 bg-neutral-50 px-2 py-1 text-xs font-medium text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">Bagde</span>
 3 | 
 4 | <!-- inverse Badge -->
 5 | <span class="rounded-md w-fit border border-neutral-700 bg-neutral-900 px-2 py-1 text-xs font-medium text-neutral-300 dark:border-neutral-300 dark:bg-neutral-50 dark:text-neutral-600">Bagde</span>
 6 | 
 7 | <!-- primary Badge -->
 8 | <span class="rounded-md w-fit border border-black bg-black px-2 py-1 text-xs font-medium text-neutral-100 dark:border-white dark:bg-white dark:text-neutral-100">Bagde</span>
 9 | 
10 | <!-- secondary Badge -->
11 | <span class="rounded-md w-fit border border-neutral-800 bg-neutral-800 px-2 py-1 text-xs font-medium text-white dark:border-neutral-300 dark:bg-neutral-300 dark:text-black">Bagde</span>
12 | 
13 | <!-- info Badge -->
14 | <span class="rounded-md w-fit border border-sky-500 bg-sky-500 px-2 py-1 text-xs font-medium text-white dark:border-sky-500 dark:bg-sky-500 dark:text-white">Bagde</span>
15 | 
16 | <!-- success Badge -->
17 | <span class="rounded-md w-fit border border-green-500 bg-green-500 px-2 py-1 text-xs font-medium text-white dark:border-green-500 dark:bg-green-500 dark:text-white">Bagde</span>
18 | 
19 | <!-- warning Badge -->
20 | <span class="rounded-md w-fit border border-amber-500 bg-amber-500 px-2 py-1 text-xs font-medium text-white dark:border-amber-500 dark:bg-amber-500 dark:text-white">Bagde</span>
21 | 
22 | <!-- danger Badge -->
23 | <span class="rounded-md w-fit border border-red-500 bg-red-500 px-2 py-1 text-xs font-medium text-white dark:border-red-500 dark:bg-red-500 dark:text-white">Bagde</span>
24 | 
25 | 


--------------------------------------------------------------------------------
/tailwind-v3/badge/animating-notification-badge.html:
--------------------------------------------------------------------------------
 1 | <!-- primary Badge -->
 2 | <span class="flex size-3 items-center justify-center rounded-full bg-black dark:bg-white" aria-label="notification">
 3 |     <span class="size-3 animate-ping rounded-full bg-black motion-reduce:animate-none dark:bg-white">
 4 |     </span>
 5 | </span>
 6 | 
 7 | <!-- secondary Badge -->
 8 | <span class="flex size-3 items-center justify-center rounded-full bg-neutral-800 dark:bg-neutral-300" aria-label="notification">
 9 |     <span class="size-3 animate-ping rounded-full bg-neutral-800 motion-reduce:animate-none dark:bg-neutral-300">
10 |     </span>
11 | </span>
12 | 
13 | <!-- info Badge -->
14 | <span class="flex size-3 items-center justify-center rounded-full bg-sky-500 dark:bg-sky-500" aria-label="notification">
15 |     <span class="size-3 animate-ping rounded-full bg-sky-500 motion-reduce:animate-none dark:bg-sky-500">
16 |     </span>
17 | </span>
18 | 
19 | <!-- success Badge -->
20 | <span class="flex size-3 items-center justify-center rounded-full bg-green-500 dark:bg-green-500" aria-label="notification">
21 |     <span class="size-3 animate-ping rounded-full bg-green-500 motion-reduce:animate-none dark:bg-green-500">
22 |     </span>
23 | </span>
24 | 
25 | <!-- warning Badge -->
26 | <span class="flex size-3 items-center justify-center rounded-full bg-amber-500 dark:bg-amber-500" aria-label="notification">
27 |     <span class="size-3 animate-ping rounded-full bg-amber-500 motion-reduce:animate-none dark:bg-amber-500">
28 |     </span>
29 | </span>
30 | 
31 | <!-- danger Badge -->
32 | <span class="flex size-3 items-center justify-center rounded-full bg-red-500 dark:bg-red-500" aria-label="notification">
33 |     <span class="size-3 animate-ping rounded-full bg-red-500 motion-reduce:animate-none dark:bg-red-500">
34 |     </span>
35 | </span>
36 | 
37 | 


--------------------------------------------------------------------------------
/tailwind-v3/avatar/avatar-with-status.html:
--------------------------------------------------------------------------------
 1 | <!-- Avatar - offline Status  -->
 2 | <div class="relative">
 3 |     <img class="size-14 rounded-full object-cover object-center" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
 4 |     <span class="absolute size-4 bottom-0.5 end-0 rounded-full border-2 border-white dark:border-neutral-950 bg-neutral-300 dark:bg-neutral-700">
 5 |     </span>
 6 | </div>
 7 | 
 8 | <!-- Avatar - info Status  -->
 9 | <div class="relative">
10 |     <img class="size-14 rounded-full object-cover object-center" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
11 |     <span class="absolute size-4 bottom-0.5 end-0 rounded-full border-2 border-white dark:border-neutral-950 bg-sky-500">
12 |     </span>
13 | </div>
14 | 
15 | <!-- Avatar - success Status  -->
16 | <div class="relative">
17 |     <img class="size-14 rounded-full object-cover object-center" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
18 |     <span class="absolute size-4 bottom-0.5 end-0 rounded-full border-2 border-white dark:border-neutral-950 bg-green-500">
19 |     </span>
20 | </div>
21 | 
22 | <!-- Avatar - warning Status  -->
23 | <div class="relative">
24 |     <img class="size-14 rounded-full object-cover object-center" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
25 |     <span class="absolute size-4 bottom-0.5 end-0 rounded-full border-2 border-white dark:border-neutral-950 bg-amber-500">
26 |     </span>
27 | </div>
28 | 
29 | <!-- Avatar - danger Status  -->
30 | <div class="relative">
31 |     <img class="size-14 rounded-full object-cover object-center" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="Rounded avatar">
32 |     <span class="absolute size-4 bottom-0.5 end-0 rounded-full border-2 border-white dark:border-neutral-950 bg-red-500">
33 |     </span>
34 | </div>
35 | 
36 | 


--------------------------------------------------------------------------------
/tailwind-v3/card/card-with-button.html:
--------------------------------------------------------------------------------
 1 | <article class="group flex rounded-md max-w-sm flex-col overflow-hidden border border-neutral-300 bg-neutral-50 text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">
 2 |     <div class="h-44 md:h-64 overflow-hidden"> 
 3 |         <img src="https://penguinui.s3.amazonaws.com/component-assets/card-img-2.webp" class="object-cover transition duration-700 ease-out group-hover:scale-105" alt="view of a coastal Mediterranean village on a hillside, with small boats in the water." />
 4 |     </div>
 5 |     <div class="flex flex-col gap-4 p-6">
 6 |         <div class="flex items-center gap-1 font-medium">
 7 |             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="size-5">
 8 |                 <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
 9 |                 <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
10 |             </svg>
11 |             <span>Europe</span>
12 |         </div>
13 |         <h3 class="text-balance text-xl lg:text-2xl font-bold text-neutral-900 dark:text-white" aria-describedby="tripDescription">Mediterranean Escape</h3>
14 |         <p id="tripDescription" class="text-pretty text-sm mb-2">
15 |             Relax under the sun, savor delicious cuisine, and create
16 |             memories that last a lifetime. Book your getaway now.
17 |         </p>
18 |         <button type="button" class="cursor-pointer whitespace-nowrap bg-black px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-100 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:bg-white dark:text-black dark:focus-visible:outline-white rounded-md">Book Now</button>
19 |     </div>
20 | </article>


--------------------------------------------------------------------------------
/tailwind-v3/avatar/avatar-with-initials.html:
--------------------------------------------------------------------------------
 1 | <!-- default Avatar -->
 2 | <span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-neutral-300 bg-neutral-50 text-2xl font-bold tracking-wider text-neutral-600/80 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300/80">JS</span>
 3 | 
 4 | <!-- inverse Avatar -->
 5 | <span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-neutral-700 bg-neutral-900 text-2xl font-bold tracking-wider text-neutral-300/80 dark:border-neutral-300 dark:bg-neutral-50 dark:text-neutral-600/80">JS</span>
 6 | 
 7 | <!-- primary Avatar -->
 8 | <span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-black bg-black text-2xl font-bold tracking-wider text-neutral-100/80 dark:border-white dark:bg-white dark:text-neutral-100/80">JS</span>
 9 | 
10 | <!-- secondary Avatar -->
11 | <span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-neutral-800 bg-neutral-800 text-2xl font-bold tracking-wider text-white/80 dark:border-neutral-300 dark:bg-neutral-300 dark:text-black/80">JS</span>
12 | 
13 | <!-- info Avatar -->
14 | <span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-sky-500 bg-sky-500 text-2xl font-bold tracking-wider text-white/80">JS</span>
15 | 
16 | <!-- success Avatar -->
17 | <span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-green-500 bg-green-500 text-2xl font-bold tracking-wider text-white/80">JS</span>
18 | 
19 | <!-- warning Avatar -->
20 | <span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-amber-500 bg-amber-500 text-2xl font-bold tracking-wider text-white/80">JS</span>
21 | 
22 | <!-- danger Avatar -->
23 | <span class="flex size-14 items-center justify-center overflow-hidden rounded-full border border-red-500 bg-red-500 text-2xl font-bold tracking-wider text-white/80">JS</span>
24 | 
25 | 


--------------------------------------------------------------------------------
/tailwind-v3/pagination/default-pagination.html:
--------------------------------------------------------------------------------
 1 | <nav aria-label="pagination">
 2 | 	<ul class="flex flex-shrink-0 items-center gap-2 text-sm font-medium">
 3 | 		<li>
 4 | 			<a href="#" class="flex items-center rounded-md p-1 text-neutral-600 hover:text-black dark:text-neutral-300 dark:hover:text-white" aria-label="previous page">
 5 | 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-6">
 6 | 					<path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
 7 | 				</svg>
 8 | 				Previous
 9 | 			</a>
10 | 		</li>
11 | 		<li><a href="#" class="flex size-6 items-center justify-center rounded-md p-1 text-neutral-600 hover:text-black dark:text-neutral-300 dark:hover:text-white" aria-label="page 1">1</a></li>
12 | 		<li><a href="#" class="flex size-6 items-center justify-center rounded-md bg-black p-1 font-bold text-neutral-100 dark:bg-white dark:text-black" aria-current="page" aria-label="page 2">2</a></li>
13 | 		<li><a href="#" class="flex size-6 items-center justify-center rounded-md p-1 text-neutral-600 hover:text-black dark:text-neutral-300 dark:hover:text-white" aria-label="page 3">3</a></li>
14 | 		<li><a href="#" class="flex size-6 items-center justify-center rounded-md p-1 text-neutral-600 hover:text-black dark:text-neutral-300 dark:hover:text-white" aria-label="page 4">4</a></li>
15 | 		<li>
16 | 			<a href="#" class="flex items-center rounded-md p-1 text-neutral-600 hover:text-black dark:text-neutral-300 dark:hover:text-white" aria-label="next page">
17 | 				Next
18 | 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-6">
19 | 					<path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
20 | 				</svg>
21 | 			</a>
22 | 		</li>
23 | 	</ul>
24 | </nav>
25 | 


--------------------------------------------------------------------------------
/tailwind-v3/rating/emoji-rating.html:
--------------------------------------------------------------------------------
 1 | <div x-data="{ currentVal: 3 }" class="flex items-center gap-1">
 2 |     <label for="veryDissatisfied" class="cursor-pointer transition hover:scale-125 has-[:focus]:scale-125">
 3 |         <span class="sr-only">very dissatisfied</span>
 4 |         <input x-model="currentVal" id="veryDissatisfied" type="radio" class="sr-only" name="rating" value="1">
 5 |         <span class="text-2xl" :class="currentVal > 0 ? 'grayscale-0' : 'grayscale'">🥴</span>
 6 |     </label>
 7 | 
 8 |     <label for="dissatisfied" class="cursor-pointer transition hover:scale-125 has-[:focus]:scale-125">
 9 |         <span class="sr-only">dissatisfied</span>
10 |         <input x-model="currentVal" id="dissatisfied" type="radio" class="sr-only" name="rating" value="2">
11 |         <span class="text-2xl" :class="currentVal > 1 ? 'grayscale-0' : 'grayscale'">😕</span>
12 |     </label>
13 | 
14 |     <label for="neutral" class="cursor-pointer transition hover:scale-125 has-[:focus]:scale-125">
15 |         <span class="sr-only">neutral</span>
16 |         <input x-model="currentVal" id="neutral" type="radio" class="sr-only" name="rating" value="3">
17 |         <span class="text-2xl" :class="currentVal > 2 ? 'grayscale-0' : 'grayscale'">😐</span>
18 |     </label>
19 | 
20 |     <label for="satisfied" class="cursor-pointer transition hover:scale-125 has-[:focus]:scale-125">
21 |         <span class="sr-only">satisfied</span>
22 |         <input x-model="currentVal" id="satisfied" type="radio" class="sr-only" name="rating" value="4">
23 |         <span class="text-2xl" :class="currentVal > 3 ? 'grayscale-0' : 'grayscale'">😊</span>
24 |     </label>
25 | 
26 |     <label for="verySatisfied" class="cursor-pointer transition hover:scale-125 has-[:focus]:scale-125">
27 |         <span class="sr-only">very satisfied</span>
28 |         <input x-model="currentVal" id="verySatisfied" type="radio" class="sr-only" name="rating" value="5">
29 |         <span class="text-2xl" :class="currentVal > 4 ? 'grayscale-0' : 'grayscale'">😍</span>
30 |     </label>
31 | </div>  
32 | 


--------------------------------------------------------------------------------
/tailwind-v3/text-input/text-input-states.html:
--------------------------------------------------------------------------------
 1 | <!-- Input with error -->
 2 | <div class="flex w-full max-w-xs flex-col gap-1 text-neutral-600 dark:text-neutral-300">
 3 |     <label for="inputError" class="flex w-fit items-center gap-1 pl-0.5 text-sm text-red-500">
 4 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="w-4 h-4">
 5 |             <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"/>
 6 |         </svg>
 7 |         Name
 8 |     </label>
 9 |     <input id="inputError" type="text" class="w-full rounded-md border border-red-500 bg-neutral-50 px-2 py-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:bg-neutral-900/50 dark:focus-visible:outline-white" name="inputStates"/>
10 |     <small class="pl-0.5 text-red-500">Error: Name field is required</small>
11 | </div>
12 | 
13 | <!-- Input with success -->
14 | <div class="flex w-full max-w-xs flex-col gap-1 text-neutral-600 dark:text-neutral-300">
15 |     <label for="inputSuccess" class="flex w-fit items-center gap-1 pl-0.5 text-sm text-green-500">
16 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="w-4 h-4">
17 |             <path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
18 |         </svg>
19 |         Name
20 |     </label>
21 |     <input id="inputSuccess" type="text" class="w-full rounded-md border border-green-500 bg-neutral-50 px-2 py-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:bg-neutral-900/50 dark:focus-visible:outline-white" value="John" name="inputStates"/>
22 | </div>
23 | 


--------------------------------------------------------------------------------
/tailwind-v3/banner/cookie-banner.html:
--------------------------------------------------------------------------------
 1 | <div class="flex max-w-sm flex-col gap-4 border-neutral-300 bg-neutral-50/50 text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900/50 dark:text-neutral-300 rounded-md border">
 2 |     <!-- Header -->
 3 |     <div class="flex items-center justify-between border-b border-neutral-300 bg-neutral-50/60 px-4 py-2 dark:border-neutral-700 dark:bg-neutral-900/20">
 4 |         <h3 class="flex items-center gap-2 font-semibold text-neutral-900 dark:text-white">
 5 |             <span class="text-3xl" aria-hidden="true">🍪</span>
 6 |             Cookie Time!
 7 |         </h3>
 8 |     </div>
 9 | 
10 |     <!-- Body -->
11 |     <div class="px-4 text-sm">
12 |         <p class="text-pretty">
13 |             We use cookies to make your experience sweet and crispy. For more information, please read our <a href="#" class="cursor-pointer font-medium text-black underline-offset-2 hover:underline focus:underline focus:outline-none dark:text-white">Privacy Policy</a>
14 |         </p>
15 |     </div>
16 | 
17 |     <!-- Footer -->
18 |     <div class="flex flex-col-reverse justify-end gap-2 border-t border-neutral-300 bg-neutral-50/60 px-4 py-2 sm:flex-row sm:items-center dark:border-neutral-700 dark:bg-neutral-950/20">
19 |         <button type="button" class="cursor-pointer whitespace-nowrap p-2 text-center text-xs font-medium tracking-wide text-neutral-600 transition hover:opacity-75 focus-visible:neutral-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:text-neutral-300 dark:focus-visible:outline-white rounded-md">No, thank you</button>
20 |         <button type="button" class="cursor-pointer whitespace-nowrap bg-black px-4 py-2 text-center text-xs font-medium tracking-wide text-neutral-100 transition hover:opacity-75 focus-visible:neutral-300 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:bg-white dark:text-black dark:focus-visible:outline-white rounded-md">Sounds Good!</button>
21 |     </div>
22 | </div>


--------------------------------------------------------------------------------
/tailwind-v3/text-area/textarea-states.html:
--------------------------------------------------------------------------------
 1 | <!-- Textarea with error -->
 2 | <div class="flex w-full max-w-md flex-col gap-1 text-neutral-600 dark:text-neutral-300">
 3 |     <label for="textareaError" class="flex w-fit items-center gap-1 pl-0.5 text-sm text-red-500">
 4 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="w-4 h-4">
 5 |             <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"/>
 6 |         </svg>
 7 |         Comment
 8 |     </label>
 9 |     <textarea id="textareaError" class="w-full rounded-md border border-red-500 bg-neutral-50 px-2.5 py-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:bg-neutral-900/50 dark:focus-visible:outline-white" name="comment" rows="3"></textarea>
10 |     <small class="pl-0.5 text-red-500">Error: Please add some comments to your evaluation</small>
11 | </div>
12 | 
13 | <!-- Textarea with success -->
14 | <div class="flex w-full max-w-md flex-col gap-1 text-neutral-600 dark:text-neutral-300">
15 |     <label for="textareaSuccess" class="flex w-fit items-center gap-1 pl-0.5 text-sm text-green-500">
16 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="w-4 h-4">
17 |             <path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
18 |         </svg>
19 |         Comment
20 |     </label>
21 |     <textarea id="textareaSuccess" class="w-full rounded-md border border-green-500 bg-neutral-50 px-2.5 py-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:bg-neutral-900/50 dark:focus-visible:outline-white" name="comment" rows="3"></textarea>
22 | </div>
23 | 


--------------------------------------------------------------------------------
/tailwind-v3/text-input/password-input.html:
--------------------------------------------------------------------------------
 1 | <div class="flex w-full max-w-xs flex-col gap-1 text-neutral-600 dark:text-neutral-300">
 2 |     <label for="passwordInput" class="w-fit pl-0.5 text-sm">Password</label>
 3 |     <div x-data="{ showPassword: false }" class="relative">
 4 |         <input :type="showPassword ? 'text' : 'password'" id="passwordInput" class="w-full rounded-md border border-neutral-300 bg-neutral-50 px-2 py-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:border-neutral-700 dark:bg-neutral-900/50 dark:focus-visible:outline-white" name="password" autocomplete="current-password" placeholder="Enter your password"/>
 5 |         <button type="button"  @click="showPassword = !showPassword" class="absolute right-2.5 top-1/2 -translate-y-1/2 text-neutral-600 dark:text-neutral-300" aria-label="Show password">
 6 |             <svg x-show="!showPassword" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="size-5"> 
 7 |                 <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
 8 |                 <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
 9 |             </svg>
10 |             <svg x-show="showPassword" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" class="size-5"> 
11 |                 <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
12 |             </svg>
13 |         </button>
14 |     </div>
15 | </div>
16 | 


--------------------------------------------------------------------------------
/tailwind-v3/chat-bubble/typing-indicator.html:
--------------------------------------------------------------------------------
 1 | <div class="flex w-full flex-col gap-4">
 2 |     <!-- Recieved -->
 3 |     <div class="flex items-end gap-2">
 4 |         <img class="size-8 rounded-full object-cover" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="avatar" />
 5 |         <div class="mr-auto flex max-w-[70%] flex-col gap-2 rounded-r-md rounded-tl-md bg-neutral-50 p-4 text-neutral-600 md:max-w-[60%] dark:bg-neutral-900 dark:text-neutral-300">
 6 |             <span class="font-semibold text-neutral-900 dark:text-white">Penguin UI</span>
 7 |             <div class="text-sm">
 8 |                 Hi there! How can I assist you today?
 9 |             </div>
10 |             <span class="ml-auto text-xs">11:32 AM</span>
11 |         </div>
12 |     </div>
13 | 
14 |     <!-- Sent -->
15 |     <div class="flex items-end gap-2">
16 |         <div class="ml-auto flex max-w-[70%] flex-col gap-2 rounded-l-xl rounded-tr-xl bg-black p-4 text-sm text-neutral-100 md:max-w-[60%] dark:bg-white dark:text-black">
17 |             I accidentally deleted some important files. Can they be recovered?
18 |             <span class="ml-auto text-xs">11:34 AM</span>
19 |         </div>
20 |         <span class="flex size-8 items-center justify-center overflow-hidden rounded-full border border-neutral-300 bg-neutral-50 text-sm font-bold tracking-wider text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">JS</span>
21 |     </div>
22 | 
23 |     <!-- Recieved -->
24 |     <div class="flex items-end gap-2">
25 |         <img class="size-8 rounded-full object-cover" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="avatar" />
26 |         <div class="flex gap-1">
27 |             <span class="size-1.5 rounded-full bg-neutral-600 motion-safe:animate-[bounce_1s_ease-in-out_infinite] dark:bg-neutral-300"></span>
28 |             <span class="size-1.5 rounded-full bg-neutral-600 motion-safe:animate-[bounce_0.5s_ease-in-out_infinite] dark:bg-neutral-300"></span>
29 |             <span class="size-1.5 rounded-full bg-neutral-600 motion-safe:animate-[bounce_1s_ease-in-out_infinite] dark:bg-neutral-300"></span>
30 |         </div>
31 |     </div>
32 | </div>
33 | 


--------------------------------------------------------------------------------
/tailwind-v3/range/range-slider-with-icons.html:
--------------------------------------------------------------------------------
 1 | <div class="flex w-full items-center gap-4 text-neutral-600 dark:text-neutral-300">
 2 |     <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" class="size-6" aria-hidden="true">
 3 |         <path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0M8.5 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m0 11a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m5-5a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m-11 0a.5.5 0 1 1 0-1 .5.5 0 0 1 0 1m9.743-4.036a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707m-7.779 7.779a.5.5 0 1 1-.707-.707.5.5 0 0 1 .707.707m7.072 0a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707M3.757 4.464a.5.5 0 1 1 .707-.707.5.5 0 0 1-.707.707" />
 4 |     </svg>
 5 |     <label for="rangeSlider" class="sr-only">Brightness</label>
 6 |     <input id="rangeSlider" type="range" class="h-2 w-full appearance-none bg-neutral-50 focus:outline-black dark:bg-neutral-900 dark:focus:outline-white [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-black active:[&::-moz-range-thumb]:scale-110 [&::-moz-range-thumb]:dark:bg-white [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:border-none [&::-webkit-slider-thumb]:bg-black active:[&::-webkit-slider-thumb]:scale-110 [&::-webkit-slider-thumb]:dark:bg-white [&::-moz-range-thumb]:rounded-full [&::-webkit-slider-thumb]:rounded-full rounded-full" value="20" min="0" max="100" step="1" />
 7 |     <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" class="size-6" aria-hidden="true">
 8 |         <path d="M12 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708" />
 9 |     </svg>
10 | </div>


--------------------------------------------------------------------------------
/tailwind-v3/steps/default-steps.html:
--------------------------------------------------------------------------------
 1 | <ol class="flex w-full items-center gap-2" aria-label="registration progress">
 2 | 	<!-- completed step -->
 3 | 	<li class="text-sm">
 4 | 		<div class="flex items-center gap-2" aria-label="create an account">
 5 | 			<span class="flex size-6 items-center justify-center rounded-full border border-black bg-black text-neutral-100 dark:border-white dark:bg-white dark:text-black">
 6 | 				<svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" aria-hidden="true">
 7 | 					<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
 8 | 				</svg>
 9 | 				<span class="sr-only">completed</span>
10 | 			</span>
11 | 		</div>
12 | 	</li>
13 | 	<!-- current step -->
14 | 	<li class="flex w-full items-center text-sm" aria-current="step" aria-label="choose a plan">
15 | 		<span class="h-0.5 w-full bg-black dark:bg-white" aria-hidden="true"></span>
16 | 		<div class="flex items-center gap-2 pl-2">
17 | 			<span class="flex size-6 flex-shrink-0 items-center justify-center rounded-full border border-black bg-black font-bold text-neutral-100 outline outline-2 outline-offset-2 outline-black dark:border-white dark:bg-white dark:text-black dark:outline-white">2</span>
18 | 		</div>
19 | 	</li>
20 | 	<li class="flex w-full items-center text-sm" aria-label="checkout">
21 | 		<span class="h-0.5 w-full bg-neutral-300 dark:bg-neutral-700" aria-hidden="true"></span>
22 | 		<div class="flex items-center gap-2 pl-2">
23 | 			<span class="flex size-6 flex-shrink-0 items-center justify-center rounded-full border border-neutral-300 bg-neutral-50 font-medium text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">3</span>
24 | 		</div>
25 | 	</li>
26 | 	<li aria-label="start trial" class="flex w-full items-center text-sm">
27 | 		<span aria-hidden="true" class="h-0.5 w-full bg-neutral-300 dark:bg-neutral-700"></span>
28 | 		<div class="flex items-center gap-2 pl-2">
29 | 			<span class="flex size-6 flex-shrink-0 items-center justify-center rounded-full border border-neutral-300 bg-neutral-50 font-medium text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">4</span>
30 | 		</div>
31 | 	</li>
32 | </ol>
33 | 


--------------------------------------------------------------------------------
/tailwind-v3/chat-bubble/chat-bubble-with-avatar.html:
--------------------------------------------------------------------------------
 1 | <div class="flex w-full flex-col gap-4">
 2 |     <!-- Recieved -->
 3 |     <div class="flex items-end gap-2">
 4 |         <img class="size-8 rounded-full object-cover" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="avatar" />
 5 |         <div class="mr-auto flex max-w-[70%] flex-col gap-2 rounded-r-md rounded-tl-md bg-neutral-50 p-4 text-neutral-600 md:max-w-[60%] dark:bg-neutral-900 dark:text-neutral-300">
 6 |             <span class="font-semibold text-neutral-900 dark:text-white">Penguin UI</span>
 7 |             <div class="text-sm">
 8 |                 Hi there! How can I assist you today?
 9 |             </div>
10 |             <span class="ml-auto text-xs">11:32 AM</span>
11 |         </div>
12 |     </div>
13 | 
14 |     <!-- Sent -->
15 |     <div class="flex items-end gap-2">
16 |         <div class="ml-auto flex max-w-[70%] flex-col gap-2 rounded-l-xl rounded-tr-xl bg-black p-4 text-sm text-neutral-100 md:max-w-[60%] dark:bg-white dark:text-black">
17 |             I accidentally deleted some important files. Can they be recovered?
18 |             <span class="ml-auto text-xs">11:34 AM</span>
19 |         </div>
20 |         <span class="flex size-8 items-center justify-center overflow-hidden rounded-full border border-neutral-300 bg-neutral-50 text-sm font-bold tracking-wider text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">JS</span>
21 |     </div>
22 | 
23 |     <!-- Recieved -->
24 |     <div class="flex items-end gap-2">
25 |         <img class="size-8 rounded-full object-cover" src="https://penguinui.s3.amazonaws.com/component-assets/avatar-8.webp" alt="avatar" />
26 |         <div class="mr-auto flex max-w-[70%] flex-col gap-2 rounded-r-md rounded-tl-md bg-neutral-50 p-4 text-neutral-600 md:max-w-[60%] dark:bg-neutral-900 dark:text-neutral-300">
27 |             <span class="font-semibold text-neutral-900 dark:text-white">Penguin UI</span>
28 |             <div class="text-sm">
29 |                 I'm sorry to hear that. Let me guide you through the process to resolve it. Could you please provide your username?
30 |             </div>
31 |             <span class="ml-auto text-xs">11:32 AM</span>
32 |         </div>
33 |     </div>
34 | </div>
35 | 


--------------------------------------------------------------------------------
/tailwind-v3/counter/split-counter.html:
--------------------------------------------------------------------------------
 1 | <div x-data="{ currentVal: 1, minVal: 0, maxVal: 10, decimalPoints: 0, incrementAmount: 1 }" class="flex flex-col gap-1">
 2 |     <label for="counterInput" class="pl-1 text-sm text-neutral-600 dark:text-neutral-300">Items(s)</label>
 3 |     <div @dblclick.prevent class="flex items-center">
 4 |         <button @click="currentVal = Math.max(minVal, currentVal - incrementAmount)" class="flex h-10 items-center justify-center rounded-md border border-neutral-300 bg-neutral-50 px-4 py-2 text-neutral-600 hover:opacity-75 focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 dark:focus-visible:outline-white" aria-label="subtract">
 5 |             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2" class="size-4">
 6 |                 <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15"/>
 7 |             </svg>
 8 |         </button>
 9 |         <input x-model="currentVal.toFixed(decimalPoints)" id="counterInput" type="text" class="h-10 w-20 rounded-none bg-transparent text-center text-neutral-900 focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-black dark:text-white dark:focus-visible:outline-white" readonly />
10 |         <button @click="currentVal = Math.min(maxVal, currentVal + incrementAmount)" class="flex h-10 items-center justify-center rounded-md border border-neutral-300 bg-neutral-50 px-4 py-2 text-neutral-600 hover:opacity-75 focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 dark:focus-visible:outline-white" aria-label="add">
11 |             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2" class="size-4">
12 |                 <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
13 |             </svg>
14 |         </button>
15 |     </div>
16 | </div>
17 | 


--------------------------------------------------------------------------------
/tailwind-v3/file-input/file-input-states.html:
--------------------------------------------------------------------------------
 1 | <!-- File input with error -->
 2 | <div class="relative flex w-full max-w-sm flex-col gap-1 text-red-500">
 3 |     <label for="fileInput" class="w-fit flex items-center gap-1 pl-0.5 text-sm">
 4 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="w-4 h-4">
 5 |             <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"/>
 6 |         </svg>
 7 |         Upload File
 8 |     </label>
 9 |     <input id="fileInput" type="file" class="w-full overflow-clip rounded-md border border-red-500 bg-neutral-50/50 text-sm text-red-500 file:mr-4 file:cursor-pointer file:border-none file:bg-neutral-50 file:px-4 file:py-2 file:font-medium file:text-neutral-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:bg-neutral-900/50 dark:file:bg-neutral-900 dark:file:text-white dark:focus-visible:outline-white" />
10 |     <small class="pl-0.5">Error: Please choose a file for upload</small>
11 | </div>
12 | 
13 | <!-- File input success -->
14 | <div class="relative flex w-full max-w-sm flex-col gap-1 text-green-500">
15 |     <label for="fileInput" class="w-fit flex items-center gap-1 pl-0.5 text-sm">
16 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="w-4 h-4">
17 |             <path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
18 |         </svg>
19 |         Upload File
20 |     </label>
21 |     <input id="fileInput" type="file" class="w-full max-w-md overflow-clip rounded-md border border-green-500 bg-neutral-50/50 text-sm text-green-500 file:mr-4 file:cursor-pointer file:border-none file:bg-neutral-50 file:px-4 file:py-2 file:font-medium file:text-neutral-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:bg-neutral-900/50 dark:file:bg-neutral-900 dark:file:text-white dark:focus-visible:outline-white" />
22 | </div>
23 | 


--------------------------------------------------------------------------------
/tailwind-v3/counter/default-counter.html:
--------------------------------------------------------------------------------
 1 | <div x-data="{ currentVal: 1, minVal: 0, maxVal: 10, decimalPoints: 0, incrementAmount: 1 }" class="flex flex-col gap-1">
 2 |     <label for="counterInput" class="pl-1 text-sm text-neutral-600 dark:text-neutral-300">Items(s)</label>
 3 |     <div @dblclick.prevent class="flex items-center">
 4 |         <button @click="currentVal = Math.max(minVal, currentVal - incrementAmount)" class="flex h-10 items-center justify-center rounded-l-md border border-neutral-300 bg-neutral-50 px-4 py-2 text-neutral-600 hover:opacity-75 focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 dark:focus-visible:outline-white" aria-label="subtract">
 5 |             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2" class="size-4">
 6 |                 <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15"/>
 7 |             </svg>
 8 |         </button>
 9 |         <input x-model="currentVal.toFixed(decimalPoints)" id="counterInput" type="text" class="border-x-none h-10 w-20 rounded-none border-y border-neutral-300 bg-neutral-50/50 text-center text-neutral-900 focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-black dark:border-neutral-700 dark:bg-neutral-900/50 dark:text-white dark:focus-visible:outline-white" readonly />
10 |         <button @click="currentVal = Math.min(maxVal, currentVal + incrementAmount)" class="flex h-10 items-center justify-center rounded-r-md border border-neutral-300 bg-neutral-50 px-4 py-2 text-neutral-600 hover:opacity-75 focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300 dark:focus-visible:outline-white" aria-label="add">
11 |             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="2" class="size-4">
12 |                 <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
13 |             </svg>
14 |         </button>
15 |     </div>
16 | </div>
17 | 


--------------------------------------------------------------------------------
/tailwind-v3/badge/soft-color-badge.html:
--------------------------------------------------------------------------------
 1 | <!-- default Badge -->
 2 | <span class="w-fit inline-flex overflow-hidden rounded-md border border-neutral-300 bg-white text-xs font-medium text-neutral-600 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-300">
 3 |     <span class="px-2 py-1 bg-neutral-50/10 dark:bg-neutral-900/10">Bagde</span>
 4 | </span>
 5 | 
 6 | <!-- inverse Badge -->
 7 | <span class="w-fit inline-flex overflow-hidden rounded-md border border-neutral-700 bg-white text-xs font-medium text-neutral-600 dark:border-neutral-300 dark:bg-neutral-950 dark:text-neutral-300">
 8 |     <span class="px-2 py-1 bg-neutral-900/10 dark:bg-neutral-50/10">Bagde</span>
 9 | </span>
10 | 
11 | <!-- primary Badge -->
12 | <span class="w-fit inline-flex overflow-hidden rounded-md border border-black bg-white text-xs font-medium text-black dark:border-white dark:bg-neutral-950 dark:text-white">
13 |     <span class="px-2 py-1 bg-black/10 dark:bg-white/10">Bagde</span>
14 | </span>
15 | 
16 | <!-- secondary Badge -->
17 | <span class="w-fit inline-flex overflow-hidden rounded-md border border-neutral-800 bg-white text-xs font-medium text-neutral-800 dark:border-neutral-300 dark:bg-neutral-950 dark:text-neutral-300">
18 |     <span class="px-2 py-1 bg-neutral-800/10 dark:bg-neutral-300/10">Bagde</span>
19 | </span>
20 | 
21 | <!-- info Badge -->
22 | <span class="w-fit inline-flex overflow-hidden rounded-md border border-sky-500 bg-white text-xs font-medium text-sky-500 dark:border-sky-500 dark:bg-neutral-950 dark:text-sky-500">
23 |     <span class="px-2 py-1 bg-sky-500/10 dark:bg-sky-500/10">Bagde</span>
24 | </span>
25 | 
26 | <!-- success Badge -->
27 | <span class="w-fit inline-flex overflow-hidden rounded-md border border-green-500 bg-white text-xs font-medium text-green-500 dark:border-green-500 dark:bg-neutral-950 dark:text-green-500">
28 |     <span class="px-2 py-1 bg-green-500/10 dark:bg-green-500/10">Bagde</span>
29 | </span>
30 | 
31 | <!-- warning Badge -->
32 | <span class="w-fit inline-flex overflow-hidden rounded-md border border-amber-500 bg-white text-xs font-medium text-amber-500 dark:border-amber-500 dark:bg-neutral-950 dark:text-amber-500">
33 |     <span class="px-2 py-1 bg-amber-500/10 dark:bg-amber-500/10">Bagde</span>
34 | </span>
35 | 
36 | <!-- danger Badge -->
37 | <span class="w-fit inline-flex overflow-hidden rounded-md border border-red-500 bg-white text-xs font-medium text-red-500 dark:border-red-500 dark:bg-neutral-950 dark:text-red-500">
38 |     <span class="px-2 py-1 bg-red-500/10 dark:bg-red-500/10">Bagde</span>
39 | </span>
40 | 
41 | 


--------------------------------------------------------------------------------
/tailwind-v3/table/table-with-action.html:
--------------------------------------------------------------------------------
 1 | <div class="overflow-hidden w-full overflow-x-auto rounded-md border border-neutral-300 dark:border-neutral-700">
 2 |     <table class="w-full text-left text-sm text-neutral-600 dark:text-neutral-300">
 3 |         <thead class="border-b border-neutral-300 bg-neutral-50 text-sm text-neutral-900 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white">
 4 |             <tr>
 5 |                 <th scope="col" class="p-4">CustomerID</th>
 6 |                 <th scope="col" class="p-4">Name</th>
 7 |                 <th scope="col" class="p-4">Email</th>
 8 |                 <th scope="col" class="p-4">Membership</th>
 9 |             </tr>
10 |         </thead>
11 |         <tbody class="divide-y divide-neutral-300 dark:divide-neutral-700">
12 |                 <tr>
13 |                     <td class="p-4">2335</td>
14 |                     <td class="p-4">Alice Brown</td>
15 |                     <td class="p-4">alice.brown@gmail.com</td>
16 |                     <td class="p-4"><button type="button" class="cursor-pointer whitespace-nowrap rounded-md bg-transparent p-0.5 font-semibold text-black outline-black hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 dark:text-white dark:outline-white">Edit</button></td>
17 |                 </tr>
18 |                 <tr>
19 |                     <td class="p-4">2338</td>
20 |                     <td class="p-4">Bob Johnson</td>
21 |                     <td class="p-4">johnson.bob@outlook.com</td>
22 |                     <td class="p-4"><button type="button" class="cursor-pointer whitespace-nowrap rounded-md bg-transparent p-0.5 font-semibold text-black outline-black hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 dark:text-white dark:outline-white">Edit</button></td>
23 |                 </tr>
24 |                 <tr>
25 |                     <td class="p-4">2342</td>
26 |                     <td class="p-4">Sarah Adams</td>
27 |                     <td class="p-4">s.adams@gmail.com</td>
28 |                     <td class="p-4"><button type="button" class="cursor-pointer whitespace-nowrap rounded-md bg-transparent p-0.5 font-semibold text-black outline-black hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 active:opacity-100 active:outline-offset-0 dark:text-white dark:outline-white">Edit</button></td>
29 |                 </tr>
30 |         </tbody>
31 |     </table>
32 | </div>
33 | 


--------------------------------------------------------------------------------
/tailwind-v3/kbd/number-keys.html:
--------------------------------------------------------------------------------
 1 | <!-- 1 -->
 2 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">1</kbd>
 3 | 
 4 | <!-- 2 -->
 5 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">2</kbd>
 6 | 
 7 | <!-- 3 -->
 8 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">3</kbd>
 9 | 
10 | <!-- 4 -->
11 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">4</kbd>
12 | 
13 | <!-- 5 -->
14 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">5</kbd>
15 | 
16 | <!-- 6 -->
17 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">6</kbd>
18 | 
19 | <!-- 7 -->
20 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">7</kbd>
21 | 
22 | <!-- 8 -->
23 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">8</kbd>
24 | 
25 | <!-- 9 -->
26 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">9</kbd>
27 | 
28 | <!-- 0 -->
29 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">0</kbd>
30 | 
31 |     
32 | 


--------------------------------------------------------------------------------
/tailwind-v3/pagination/pagination-with-ellipsis.html:
--------------------------------------------------------------------------------
 1 | <nav aria-label="pagination">
 2 | 	<ul class="flex flex-shrink-0 items-center gap-2 text-sm font-medium">
 3 | 		<li>
 4 | 			<a href="#" class="flex items-center rounded-md p-1 text-neutral-600 hover:text-black dark:text-neutral-300 dark:hover:text-white" aria-label="previous page">
 5 | 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-6">
 6 | 					<path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
 7 | 				</svg>
 8 | 				Previous
 9 | 			</a>
10 | 		</li>
11 | 		<li><a href="#" class="flex size-6 items-center justify-center rounded-md p-1 text-neutral-600 hover:text-black dark:text-neutral-300 dark:hover:text-white" aria-label="page 1">1</a></li>
12 | 		<li><a href="#" class="flex size-6 items-center justify-center rounded-md bg-black p-1 font-bold text-neutral-100 dark:bg-white dark:text-black" aria-current="page" aria-label="page 2">2</a></li>
13 | 		<li>
14 | 			<a href="#" class="flex size-6 items-center justify-center rounded-md p-1 text-neutral-600 hover:text-black dark:text-neutral-300 dark:hover:text-white" aria-label="more pages">
15 | 				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" aria-hidden="true" stroke="currentColor" class="w-6 h-6">
16 | 					<path stroke-linecap="round" stroke-linejoin="round" d="M6.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM12.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0ZM18.75 12a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
17 | 				</svg>	
18 | 			</a>
19 | 		</li>
20 | 		<li><a href="#" class="flex size-6 items-center justify-center rounded-md p-1 text-neutral-600 hover:text-black dark:text-neutral-300 dark:hover:text-white" aria-label="page 29">29</a></li>
21 | 		<li><a href="#" class="flex size-6 items-center justify-center rounded-md p-1 text-neutral-600 hover:text-black dark:text-neutral-300 dark:hover:text-white" aria-label="page 30">30</a></li>
22 | 		<li>
23 | 			<a href="#" class="flex items-center rounded-md p-1 text-neutral-600 hover:text-black dark:text-neutral-300 dark:hover:text-white" aria-label="next page">
24 | 				Next
25 | 				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" class="size-6">
26 | 					<path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
27 | 				</svg>
28 | 			</a>
29 | 		</li>
30 | 	</ul>
31 | </nav>
32 | 


--------------------------------------------------------------------------------
/tailwind-v3/steps/steps-with-labels.html:
--------------------------------------------------------------------------------
 1 | <ol class="flex w-full items-center gap-2" aria-label="registration progress">
 2 | 	<!-- completed step -->
 3 | 	<li class="text-sm" aria-label="create an account">
 4 | 		<div class="flex items-center gap-2">
 5 | 			<span class="flex size-6 items-center justify-center rounded-full border border-black bg-black text-neutral-100 dark:border-white dark:bg-white dark:text-black">
 6 | 				<svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" aria-hidden="true">
 7 | 					<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
 8 | 				</svg>
 9 | 				<span class="sr-only">completed</span>
10 | 			</span>
11 | 			<span class="hidden w-max text-black dark:text-white sm:inline">Create an account</span>
12 | 		</div>
13 | 	</li>
14 | 	<!-- current step -->
15 | 	<li class="flex w-full items-center text-sm" aria-current="step" aria-label="choose a plan">
16 | 		<span class="h-0.5 w-full bg-black dark:bg-white" aria-hidden="true"></span>
17 | 		<div class="flex items-center gap-2 pl-2">
18 | 			<span class="flex size-6 flex-shrink-0 items-center justify-center rounded-full border border-black bg-black font-bold text-neutral-100 outline outline-2 outline-offset-2 outline-black dark:border-white dark:bg-white dark:text-black dark:outline-white">2</span>
19 | 					<span class="hidden w-max font-bold text-black dark:text-white sm:inline">Select a plan</span>
20 | 		</div>
21 | 	</li>
22 | 	<li class="flex w-full items-center text-sm" aria-label="checkout">
23 | 		<span class="h-0.5 w-full bg-neutral-300 dark:bg-neutral-700" aria-hidden="true"></span>
24 | 		<div class="flex items-center gap-2 pl-2">
25 | 			<span class="flex size-6 flex-shrink-0 items-center justify-center rounded-full border border-neutral-300 bg-neutral-50 font-medium text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">3</span>
26 | 			<span class="hidden w-max text-neutral-600 dark:text-neutral-300 sm:inline">Checkout</span>
27 | 		</div>
28 | 	</li>
29 | 	<li class="flex w-full items-center text-sm" aria-label="start trial">
30 | 		<span class="h-0.5 w-full bg-neutral-300 dark:bg-neutral-700" aria-hidden="true"></span>
31 | 		<div class="flex items-center gap-2 pl-2">
32 | 			<span class="flex size-6 flex-shrink-0 items-center justify-center rounded-full border border-neutral-300 bg-neutral-50 font-medium text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">4</span>
33 | 			<span class="hidden w-max text-neutral-600 dark:text-neutral-300 sm:inline">Get started</span>
34 | 		</div>
35 | 	</li>
36 | </ol>
37 | 


--------------------------------------------------------------------------------
/tailwind-v3/steps/vertical-steps.html:
--------------------------------------------------------------------------------
 1 | <ol class="flex w-min flex-col gap-14" aria-label="registration progress">
 2 | 	<!-- completed step -->
 3 | 	<li class="text-sm" aria-label="create an account">
 4 | 		<div class="flex items-center gap-2">
 5 | 			<span class="flex size-6 items-center justify-center rounded-full border border-black bg-black text-neutral-100 dark:border-white dark:bg-white dark:text-black">
 6 | 				<svg class="size-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" aria-hidden="true">
 7 | 					<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5"/>
 8 | 				</svg>
 9 | 				<span class="sr-only">completed</span>
10 | 			</span>
11 | 			<span class="hidden w-max text-black dark:text-white sm:inline">Create an account</span>
12 | 		</div>
13 | 	</li>
14 | 	<!-- current step -->
15 | 	<li class="flex w-full items-center text-sm" aria-current="step" aria-label="choose a plan">
16 | 		<div class="flex items-center gap-2">
17 | 			<div class="relative">
18 | 				<div class="absolute bottom-8 left-3 h-10 w-0.5 bg-black dark:bg-white"></div>
19 | 				<span class="flex size-6 flex-shrink-0 items-center justify-center rounded-full border border-black bg-black font-bold text-neutral-100 outline outline-2 outline-offset-2 outline-black dark:border-white dark:bg-white dark:text-black dark:outline-white">2</span>
20 | 			</div>
21 | 			<span class="hidden w-max font-bold text-black dark:text-white sm:inline">Select a plan</span>
22 | 		</div>
23 | 	</li>
24 | 	<li class="flex w-full items-center text-sm" aria-label="checkout">
25 | 		<div class="flex items-center gap-2">
26 | 			<div class="relative">
27 | 				<div class="absolute bottom-8 left-3 h-10 w-0.5 bg-neutral-300 dark:bg-neutral-700"></div>
28 | 				<span class="flex size-6 flex-shrink-0 items-center justify-center rounded-full border border-neutral-300 bg-neutral-50 font-medium text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">3</span>
29 | 			</div>
30 | 			<span class="hidden w-max text-neutral-600 dark:text-neutral-300 sm:inline">Checkout</span>
31 | 		</div>
32 | 	</li>
33 | 	<li class="flex w-full items-center text-sm" aria-label="get started">
34 | 		<div class="flex items-center gap-2">
35 | 			<div class="relative">
36 | 				<div class="absolute bottom-8 left-3 h-10 w-0.5 bg-neutral-300 dark:bg-neutral-700"></div>
37 | 				<span class="flex size-6 flex-shrink-0 items-center justify-center rounded-full border border-neutral-300 bg-neutral-50 font-medium text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">4</span>
38 | 			</div>
39 | 			<span class="hidden w-max text-neutral-600 dark:text-neutral-300 sm:inline">Get started</span>
40 | 		</div>
41 | 	</li>
42 | </ol>
43 | 


--------------------------------------------------------------------------------
/tailwind-v3/table/striped-table.html:
--------------------------------------------------------------------------------
 1 | <div class="overflow-hidden w-full overflow-x-auto rounded-md border border-neutral-300 dark:border-neutral-700">
 2 |     <table class="w-full text-left text-sm text-neutral-600 dark:text-neutral-300">
 3 |         <thead class="border-b border-neutral-300 bg-neutral-50 text-sm text-neutral-900 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white">
 4 |             <tr>
 5 |                 <th scope="col" class="p-4">CustomerID</th>
 6 |                 <th scope="col" class="p-4">Name</th>
 7 |                 <th scope="col" class="p-4">Email</th>
 8 |                 <th scope="col" class="p-4">Membership</th>
 9 |             </tr>
10 |         </thead>
11 |         <tbody class="divide-y divide-neutral-300 dark:divide-neutral-700">
12 |                 <tr class="even:bg-black/5 dark:even:bg-white/10">
13 |                     <td class="p-4">2335</td>
14 |                     <td class="p-4">Alice Brown</td>
15 |                     <td class="p-4">alice.brown@penguinui.com</td>
16 |                     <td class="p-4">Silver</td>
17 |                 </tr>
18 |                 <tr class="even:bg-black/5 dark:even:bg-white/10">
19 |                     <td class="p-4">2338</td>
20 |                     <td class="p-4">Bob Johnson</td>
21 |                     <td class="p-4">johnson.bob@penguinui.com</td>
22 |                     <td class="p-4">Gold</td>
23 |                 </tr>
24 |                 <tr class="even:bg-black/5 dark:even:bg-white/10">
25 |                     <td class="p-4">2342</td>
26 |                     <td class="p-4">Sarah Adams</td>
27 |                     <td class="p-4">s.adams@penguinui.com</td>
28 |                     <td class="p-4">Gold</td>
29 |                 </tr>
30 |                 <tr class="even:bg-black/5 dark:even:bg-white/10">
31 |                     <td class="p-4">2345</td>
32 |                     <td class="p-4">Alex Martinez</td>
33 |                     <td class="p-4">alex.martinez@penguinui.com</td>
34 |                     <td class="p-4">Gold</td>
35 |                 </tr>
36 |                 <tr class="even:bg-black/5 dark:even:bg-white/10">
37 |                     <td class="p-4">2346</td>
38 |                     <td class="p-4">Ryan Thompson</td>
39 |                     <td class="p-4">ryan.thompson@penguinui.com</td>
40 |                     <td class="p-4">Silver</td>
41 |                 </tr>
42 |                 <tr class="even:bg-black/5 dark:even:bg-white/10">
43 |                     <td class="p-4">2349</td>
44 |                     <td class="p-4">Emily Rodriguez</td>
45 |                     <td class="p-4">emily.rodriguez@penguinui.com</td>
46 |                     <td class="p-4">Gold</td>
47 |                 </tr>
48 |         </tbody>
49 |     </table>
50 | </div>
51 | 


--------------------------------------------------------------------------------
/tailwind-v3/kbd/function-keys.html:
--------------------------------------------------------------------------------
 1 | <!-- F1 -->
 2 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">F1</kbd>
 3 | 
 4 | <!-- F2 -->
 5 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">F2</kbd>
 6 | 
 7 | <!-- F3 -->
 8 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">F3</kbd>
 9 | 
10 | <!-- F4 -->
11 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">F4</kbd>
12 | 
13 | <!-- F5 -->
14 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">F5</kbd>
15 | 
16 | <!-- F6 -->
17 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">F6</kbd>
18 | 
19 | <!-- F7 -->
20 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">F7</kbd>
21 | 
22 | <!-- F8 -->
23 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">F8</kbd>
24 | 
25 | <!-- F10 -->
26 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">F10</kbd>
27 | 
28 | <!-- F11 -->
29 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">F11</kbd>
30 | 
31 | <!-- F12 -->
32 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">F12</kbd>
33 | 
34 |     
35 | 


--------------------------------------------------------------------------------
/tailwind-v3/radio/default-radio.html:
--------------------------------------------------------------------------------
 1 | <div class="flex flex-col gap-2">
 2 |     <div class="flex items-center justify-start gap-2 font-medium text-neutral-600 has-[:disabled]:opacity-75 dark:text-neutral-300">
 3 |         <input id="radioMac" type="radio" class="before:content[''] relative h-4 w-4 appearance-none rounded-full border border-neutral-300 bg-neutral-50 before:invisible before:absolute before:left-1/2 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-neutral-100 checked:border-black checked:bg-black checked:before:visible focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-neutral-800 checked:focus:outline-black disabled:cursor-not-allowed dark:border-neutral-700 dark:bg-neutral-900 dark:before:bg-black dark:checked:border-white dark:checked:bg-white dark:focus:outline-neutral-300 dark:checked:focus:outline-white" name="radioDefault" value="" checked >
 4 |         <label for="radioMac" class="text-sm">Mac</label>
 5 |     </div>
 6 |     <div class="flex items-center justify-start gap-2 font-medium text-neutral-600 has-[:disabled]:opacity-75 dark:text-neutral-300">
 7 |         <input id="radioWindows" type="radio" class="before:content[''] relative h-4 w-4 appearance-none rounded-full border border-neutral-300 bg-neutral-50 before:invisible before:absolute before:left-1/2 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-neutral-100 checked:border-black checked:bg-black checked:before:visible focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-neutral-800 checked:focus:outline-black disabled:cursor-not-allowed dark:border-neutral-700 dark:bg-neutral-900 dark:before:bg-black dark:checked:border-white dark:checked:bg-white dark:focus:outline-neutral-300 dark:checked:focus:outline-white" name="radioDefault" value="">
 8 |         <label for="radioWindows" class="text-sm">Windows</label>
 9 |     </div>
10 |     <div class="flex items-center justify-start gap-2 font-medium text-neutral-600 has-[:disabled]:opacity-75 dark:text-neutral-300">
11 |         <input id="radioLinux" type="radio" class="before:content[''] relative h-4 w-4 appearance-none rounded-full border border-neutral-300 bg-neutral-50 before:invisible before:absolute before:left-1/2 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-neutral-100 checked:border-black checked:bg-black checked:before:visible focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-neutral-800 checked:focus:outline-black disabled:cursor-not-allowed dark:border-neutral-700 dark:bg-neutral-900 dark:before:bg-black dark:checked:border-white dark:checked:bg-white dark:focus:outline-neutral-300 dark:checked:focus:outline-white" name="radioDefault" value="">
12 |         <label for="radioLinux" class="text-sm">Linux</label>
13 |     </div>
14 | </div>
15 | 


--------------------------------------------------------------------------------
/tailwind-v3/select/select-with-dependant.html:
--------------------------------------------------------------------------------
 1 | <div x-data="{ firstValue: '', secondValue: '' }" class="flex w-full flex-col items-center gap-4">
 2 |     <div class="relative flex w-full max-w-xs flex-col gap-1 text-neutral-600 dark:text-neutral-300">
 3 |         <label for="modelName" class="w-fit pl-0.5 text-sm">Model</label>
 4 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="absolute pointer-events-none right-4 top-8 h-5 w-5">
 5 |             <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
 6 |         </svg>
 7 |         <select id="modelName" name="modelName" class="w-full appearance-none rounded-md border border-neutral-300 bg-neutral-50 px-4 py-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:border-neutral-700 dark:bg-neutral-900/50 dark:focus-visible:outline-white" x-model="firstValue">
 8 |             <option value="" selected>Select Model</option>
 9 |             <option value="camery">Camery</option>
10 |             <option value="4runner">4Runner</option>
11 |             <option value="tacoma">Tacoma</option>
12 |             <option value="rav4">Rav4</option>
13 |             <option value="corolla">Corolla</option>
14 |         </select>
15 |     </div>
16 | 
17 |     <div class="relative flex w-full max-w-xs flex-col gap-1 text-neutral-600 dark:text-neutral-300">
18 |         <label for="year" class="w-fit pl-0.5 text-sm">Year</label>
19 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="absolute pointer-events-none right-4 top-8 h-5 w-5">
20 |             <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
21 |         </svg>
22 |         <select id="year" name="year" class="w-full appearance-none rounded-md border border-neutral-300 bg-neutral-50 px-4 py-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:border-neutral-700 dark:bg-neutral-900/50 dark:focus-visible:outline-white" x-model="secondValue" :disabled="!firstValue">
23 |         <option value="" :selected="!firstValue" x-text="firstValue ? 'Select Year' : 'Select Model First'"></option>
24 |         <option value="2024">2024</option>
25 |         <option value="2023">2023</option>
26 |         <option value="2022">2022</option>
27 |         <option value="2021">2021</option>
28 |         <option value="2020">2020</option>
29 |         <option value="2019">2019</option>
30 |         <option value="2018">2018</option>
31 |     </select>
32 |     </div>
33 | </div>
34 | 


--------------------------------------------------------------------------------
/tailwind-v3/spinner/spinner-color-variants.html:
--------------------------------------------------------------------------------
 1 | <!-- Primary spinner -->
 2 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="size-5 fill-black motion-safe:animate-spin dark:fill-white">
 3 |     <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25" />
 4 |     <path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" />
 5 | </svg>
 6 | 
 7 | <!-- Secondary spinner -->
 8 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="size-5 fill-neutral-800 motion-safe:animate-spin dark:fill-neutral-300">
 9 |     <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25" />
10 |     <path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" />
11 | </svg>
12 | 
13 | <!-- Info spinner -->
14 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="size-5 fill-sky-500 motion-safe:animate-spin dark:fill-sky-500">
15 |     <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25" />
16 |     <path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" />
17 | </svg>
18 | 
19 | <!-- Success spinner -->
20 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="size-5 fill-green-500 motion-safe:animate-spin dark:fill-green-500">
21 |     <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25" />
22 |     <path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" />
23 | </svg>
24 | 
25 | <!-- Warning spinner -->
26 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="size-5 fill-amber-500 motion-safe:animate-spin dark:fill-amber-500">
27 |     <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25" />
28 |     <path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" />
29 | </svg>
30 | 
31 | <!-- Danger spinner -->
32 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" class="size-5 fill-red-500 motion-safe:animate-spin dark:fill-red-500">
33 |     <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" opacity=".25" />
34 |     <path d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z" />
35 | </svg>
36 | 


--------------------------------------------------------------------------------
/tailwind-v3/alert/alert-with-list.html:
--------------------------------------------------------------------------------
 1 | <!-- danger Alert -->
 2 | <div class="relative w-full overflow-hidden rounded-md border border-red-500 bg-white text-neutral-600 dark:bg-neutral-950 dark:text-neutral-300" role="alert">
 3 |     <div class="flex w-full items-center gap-2 bg-red-500/10 p-4">
 4 |         <div class="bg-red-500/15 text-red-500 rounded-full p-1" aria-hidden="true">
 5 |             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6" aria-hidden="true">
 6 |                 <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM8.28 7.22a.75.75 0 0 0-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 1 0 1.06 1.06L10 11.06l1.72 1.72a.75.75 0 1 0 1.06-1.06L11.06 10l1.72-1.72a.75.75 0 0 0-1.06-1.06L10 8.94 8.28 7.22Z" clip-rule="evenodd" />
 7 |             </svg>
 8 |         </div>
 9 |         <div class="ml-2">
10 |             <h3 class="text-sm font-semibold text-red-500">Password is not strong</h3>
11 |             <p class="text-xs font-medium sm:text-sm">The password you entered does not meet the requirements. Make sure your password:</p>
12 |             <ul class="mt-2 list-inside list-disc pl-2 text-xs font-medium text-red-500 sm:text-sm">
13 |                 <li>has <strong>minimum 8</strong> characters</li>
14 |                 <li>includes <strong>both upper and lower </strong> cases</li>
15 |                 <li>contains <strong>at least one number</strong></li>
16 |             </ul>
17 |         </div>
18 |     </div>
19 | </div>
20 | 
21 | <!-- info Alert -->
22 | <div class="relative w-full overflow-hidden rounded-md border border-sky-500 bg-white text-neutral-600 dark:bg-neutral-950 dark:text-neutral-300" role="alert">
23 |     <div class="flex w-full items-center gap-2 bg-sky-500/10 p-4">
24 |         <div class="bg-sky-500/15 text-sky-500 rounded-full p-1" aria-hidden="true">
25 |             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="size-6" aria-hidden="true">
26 |                 <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-7-4a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM9 9a.75.75 0 0 0 0 1.5h.253a.25.25 0 0 1 .244.304l-.459 2.066A1.75 1.75 0 0 0 10.747 15H11a.75.75 0 0 0 0-1.5h-.253a.25.25 0 0 1-.244-.304l.459-2.066A1.75 1.75 0 0 0 9.253 9H9Z" clip-rule="evenodd" />
27 |             </svg>
28 |         </div>
29 |         <div class="ml-2">
30 |             <h3 class="text-sm font-semibold text-sky-500">Password Requirements</h3>
31 |             <p class="text-xs font-medium sm:text-sm">In order to keep your account secure, make sure your password:</p>
32 |             <ul class="mt-2 list-inside list-disc pl-2 text-xs font-medium sm:text-sm">
33 |                 <li>has <strong>minimum 8</strong> characters</li>
34 |                 <li>includes <strong>both upper and lower </strong> cases</li>
35 |                 <li>contains <strong>at least one number</strong></li>
36 |             </ul>
37 |         </div>
38 |     </div>
39 | </div>
40 | 
41 | 


--------------------------------------------------------------------------------
/tailwind-v3/modal/video-modal.html:
--------------------------------------------------------------------------------
 1 | <div x-data="{videoModalIsOpen: false}"></div>
 2 |     <button @click="videoModalIsOpen = true, $refs.video.play()" type="button" class="inline-flex cursor-pointer items-center gap-2 whitespace-nowrap rounded-md bg-black px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-100 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:bg-white dark:text-black dark:focus-visible:outline-white">
 3 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" fill="currentColor"  class="w-4 h-4">
 4 |             <path fill-rule="evenodd" d="M4.5 5.653c0-1.426 1.529-2.33 2.779-1.643l11.54 6.348c1.295.712 1.295 2.573 0 3.285L7.28 19.991c-1.25.687-2.779-.217-2.779-1.643V5.653z" clip-rule="evenodd"/>
 5 |         </svg>
 6 |         Play Video
 7 |     </button>
 8 |     <div x-cloak x-show="videoModalIsOpen" x-transition.opacity.duration.200ms x-trap.inert.noscroll="videoModalIsOpen" @keydown.esc.window="videoModalIsOpen = false, $refs.video.pause()" @click.self="videoModalIsOpen = false, $refs.video.pause()" class="fixed inset-0 z-30 flex items-center justify-center bg-black/20 p-4 backdrop-blur-md lg:p-8" role="dialog" aria-modal="true" aria-labelledby="videoModalTitle">
 9 |         <!-- Modal Dialog -->
10 |         <div x-show="videoModalIsOpen" x-transition:enter="transition ease-out duration-300 delay-200" x-transition:enter-start="opacity-0 translate-y-8" x-transition:enter-end="opacity-100 translate-y-0" class="max-w-2xl w-full relative">
11 |             <!-- Close Button -->
12 |             <button type="button" x-show="videoModalIsOpen" @click="videoModalIsOpen = false, $refs.video.pause()" x-transition:enter="transition ease-out duration-200 delay-500" x-transition:enter-start="opacity-0 scale-0" x-transition:enter-end="opacity-100 scale-100" class="absolute -top-12 right-0 flex items-center justify-center rounded-full bg-neutral-50 p-1.5 text-neutral-900 hover:opacity-75 active:opacity-100 dark:bg-neutral-900 dark:text-white" aria-label="close modal">
13 |                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="1.4" class="w-4 h-4">
14 |                     <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
15 |                </svg>
16 |             </button>
17 |             <!-- Video -->
18 |             <video x-ref="video" class="w-full max-w-2xl rounded-md aspect-video" controls>
19 |                 <track default kind="captions" srclang="en" src="path to your .vtt file" />
20 |                 <source src="https://penguinui.s3.amazonaws.com/component-assets/peng.webm" type="video/webm">
21 |                 <source src="https://penguinui.s3.amazonaws.com/component-assets/peng.mp4" type="video/mp4">
22 |                  Your browser does not support HTML video.
23 |             </video>
24 |         </div>
25 |     </div>
26 | </div>


--------------------------------------------------------------------------------
/tailwind-v3/progress/progress-bar-gradient.html:
--------------------------------------------------------------------------------
 1 | <div x-data="{ currentVal: 70 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-md bg-neutral-50 dark:bg-neutral-900" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal">
 2 |     <div class="h-full rounded-md bg-gradient-to-r from-yellow-400 to-lime-400" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"></div>
 3 | </div>
 4 | 
 5 | <div x-data="{ currentVal: 70 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-md bg-neutral-50 dark:bg-neutral-900" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal">
 6 |     <div class="h-full rounded-md bg-gradient-to-r from-green-500 to-green-700" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"></div>
 7 | </div>
 8 | 
 9 | <div x-data="{ currentVal: 70 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-md bg-neutral-50 dark:bg-neutral-900" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal">
10 |     <div class="h-full rounded-md bg-gradient-to-r from-indigo-500 to-blue-500" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"></div>
11 | </div>
12 | 
13 | <div x-data="{ currentVal: 70 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-md bg-neutral-50 dark:bg-neutral-900" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal">
14 |     <div class="h-full rounded-md bg-gradient-to-r from-rose-400 via-fuchsia-500 to-indigo-500" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"></div>
15 | </div>
16 | 
17 | <div x-data="{ currentVal: 70 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-md bg-neutral-50 dark:bg-neutral-900" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal">
18 |     <div class="h-full rounded-md bg-gradient-to-r from-fuchsia-500 via-red-600 to-orange-400" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"></div>
19 | </div>
20 | 
21 | <div x-data="{ currentVal: 70 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-md bg-neutral-50 dark:bg-neutral-900" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal">
22 |     <div class="h-full rounded-md bg-gradient-to-r from-pink-500 to-rose-500" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`"></div>
23 | </div>
24 | 


--------------------------------------------------------------------------------
/tailwind-v3/select/select-states.html:
--------------------------------------------------------------------------------
 1 | <!-- Select with error -->
 2 | <div class="relative flex w-full max-w-xs flex-col gap-1 text-neutral-600 dark:text-neutral-300">
 3 |     <label for="os" class="flex w-fit gap-1 pl-0.5 text-sm text-red-500">
 4 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="pointer-events-none w-4 h-4">
 5 |             <path d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"/>
 6 |         </svg>
 7 |         Operating System
 8 |     </label>
 9 |     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" aria-hidden="true" fill="currentColor" class="absolute right-4 top-8 h-5 w-5">
10 |         <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
11 |     </svg>
12 |     <select id="os" name="os" class="w-full appearance-none rounded-md border border-red-500 bg-neutral-50 px-4 py-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:bg-neutral-900/50 dark:focus-visible:outline-white">
13 |         <option selected>Please Select</option>
14 |         <option value="mac">Mac</option>
15 |         <option value="windows">Windows</option>
16 |         <option value="linux">Linux</option>
17 |     </select>
18 |     <small class="pl-0.5 text-red-500">Error: Please select an operating system
19 |     </small>
20 | </div>
21 | 
22 | <!-- Select with success -->
23 | <div class="relative flex w-full max-w-xs flex-col gap-1 text-neutral-600 dark:text-neutral-300">
24 |     <label for="os" class="flex w-fit gap-1 pl-0.5 text-sm text-green-500">
25 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" aria-hidden="true" fill="currentColor" class="pointer-events-none w-4 h-4">
26 |             <path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd" />
27 |         </svg>
28 |         Operating System
29 |     </label>
30 |     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" aria-hidden="true" fill="currentColor" class="absolute right-4 top-8 h-5 w-5">
31 |         <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
32 |     </svg>
33 |     <select id="os" name="os" class="w-full appearance-none rounded-md border border-green-500 bg-neutral-50 px-4 py-2 text-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black disabled:cursor-not-allowed disabled:opacity-75 dark:bg-neutral-900/50 dark:focus-visible:outline-white">
34 |         <option value="mac" selected>Mac</option>
35 |         <option value="windows">Windows</option>
36 |         <option value="linux">Linux</option>
37 |     </select>
38 | </div>
39 | 


--------------------------------------------------------------------------------
/tailwind-v3/tabs/default-tabs.html:
--------------------------------------------------------------------------------
 1 | <div x-data="{ selectedTab: 'groups' }" class="w-full">
 2 | 	<div @keydown.right.prevent="$focus.wrap().next()" @keydown.left.prevent="$focus.wrap().previous()" class="flex gap-2 overflow-x-auto border-b border-neutral-300 dark:border-neutral-700" role="tablist" aria-label="tab options">
 3 | 		<button @click="selectedTab = 'groups'" :aria-selected="selectedTab === 'groups'" :tabindex="selectedTab === 'groups' ? '0' : '-1'" :class="selectedTab === 'groups' ? 'font-bold text-black border-b-2 border-black dark:border-white dark:text-white' : 'text-neutral-600 font-medium dark:text-neutral-300 dark:hover:border-b-neutral-300 dark:hover:text-white hover:border-b-2 hover:border-b-neutral-800 hover:text-neutral-900'" class="h-min px-4 py-2 text-sm" type="button" role="tab" aria-controls="tabpanelGroups" >Groups</button>
 4 | 		<button @click="selectedTab = 'likes'" :aria-selected="selectedTab === 'likes'" :tabindex="selectedTab === 'likes' ? '0' : '-1'" :class="selectedTab === 'likes' ? 'font-bold text-black border-b-2 border-black dark:border-white dark:text-white' : 'text-neutral-600 font-medium dark:text-neutral-300 dark:hover:border-b-neutral-300 dark:hover:text-white hover:border-b-2 hover:border-b-neutral-800 hover:text-neutral-900'" class="h-min px-4 py-2 text-sm" type="button" role="tab" aria-controls="tabpanelLikes" >Likes</button>
 5 | 		<button @click="selectedTab = 'comments'" :aria-selected="selectedTab === 'comments'" :tabindex="selectedTab === 'comments' ? '0' : '-1'" :class="selectedTab === 'comments' ? 'font-bold text-black border-b-2 border-black dark:border-white dark:text-white' : 'text-neutral-600 font-medium dark:text-neutral-300 dark:hover:border-b-neutral-300 dark:hover:text-white hover:border-b-2 hover:border-b-neutral-800 hover:text-neutral-900'" class="h-min px-4 py-2 text-sm" type="button" role="tab" aria-controls="tabpanelComments" >Comments</button>
 6 | 		<button @click="selectedTab = 'saved'" :aria-selected="selectedTab === 'saved'" :tabindex="selectedTab === 'saved' ? '0' : '-1'" :class="selectedTab === 'saved' ? 'font-bold text-black border-b-2 border-black dark:border-white dark:text-white' : 'text-neutral-600 font-medium dark:text-neutral-300 dark:hover:border-b-neutral-300 dark:hover:text-white hover:border-b-2 hover:border-b-neutral-800 hover:text-neutral-900'" class="h-min px-4 py-2 text-sm" type="button" role="tab" aria-controls="tabpanelSaved" >Saved</button>
 7 | 	</div>
 8 | 	<div class="px-2 py-4 text-neutral-600 dark:text-neutral-300">
 9 | 		<div x-show="selectedTab === 'groups'" id="tabpanelGroups" role="tabpanel" aria-label="groups"><b><a href="#" class="underline">Groups</a></b> tab is selected</div>
10 | 		<div x-show="selectedTab === 'likes'" id="tabpanelLikes" role="tabpanel" aria-label="likes"><b><a href="#" class="underline">Likes</a></b> tab is selected</div>
11 | 		<div x-show="selectedTab === 'comments'" id="tabpanelComments" role="tabpanel" aria-label="comments"><b><a href="#" class="underline">Comments</a></b> tab is selected</div>
12 | 		<div x-show="selectedTab === 'saved'" id="tabpanelSaved" role="tabpanel" aria-label="saved"><b><a href="#" class="underline">Saved</a></b> tab is selected</div>
13 | 	</div>
14 | </div>
15 | 


--------------------------------------------------------------------------------
/tailwind-v3/progress/progress-bar-color-variants.html:
--------------------------------------------------------------------------------
 1 | <!-- Primary Progress Bar -->
 2 | <div x-data="{ currentVal: 40 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-md bg-neutral-50 dark:bg-neutral-900" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal">
 3 |     <div class="h-full rounded-md bg-black dark:bg-white" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`">
 4 |     </div>
 5 | </div>
 6 | 
 7 | <!-- Secondary Progress Bar -->
 8 | <div x-data="{ currentVal: 40 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-md bg-neutral-50 dark:bg-neutral-900" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal">
 9 |     <div class="h-full rounded-md bg-neutral-800 dark:bg-neutral-300" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`">
10 |     </div>
11 | </div>
12 | 
13 | <!-- Success Progress Bar -->
14 | <div x-data="{ currentVal: 40 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-md bg-neutral-50 dark:bg-neutral-900" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal">
15 |     <div class="h-full rounded-md bg-green-500 dark:bg-undefined" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`">
16 |     </div>
17 | </div>
18 | 
19 | <!-- Info Progress Bar -->
20 | <div x-data="{ currentVal: 40 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-md bg-neutral-50 dark:bg-neutral-900" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal">
21 |     <div class="h-full rounded-md bg-sky-500 dark:bg-undefined" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`">
22 |     </div>
23 | </div>
24 | 
25 | <!-- Warning Progress Bar -->
26 | <div x-data="{ currentVal: 40 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-md bg-neutral-50 dark:bg-neutral-900" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal">
27 |     <div class="h-full rounded-md bg-amber-500 dark:bg-undefined" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`">
28 |     </div>
29 | </div>
30 | 
31 | <!-- Danger Progress Bar -->
32 | <div x-data="{ currentVal: 40 ,minVal: 0 ,maxVal: 100, calcPercentage(min, max, val){return ((val-min)/(max-min))*100} }" class="flex h-2.5 w-full overflow-hidden rounded-md bg-neutral-50 dark:bg-neutral-900" role="progressbar" aria-label="default progress bar" :aria-valuenow="currentVal" :aria-valuemin="minVal" :aria-valuemax="maxVal">
33 |     <div class="h-full rounded-md bg-red-500 dark:bg-undefined" :style="`width: ${calcPercentage(minVal, maxVal, currentVal)}%`">
34 |     </div>
35 | </div>
36 | 
37 | 


--------------------------------------------------------------------------------
/tailwind-v3/radio/radio-with-container.html:
--------------------------------------------------------------------------------
 1 | <div class="flex flex-col gap-2">
 2 |     <label for="radioMac" class="flex w-fit min-w-[14rem] cursor-pointer items-center justify-start gap-2 rounded-md border border-neutral-300 bg-neutral-50 px-4 py-2 font-medium text-neutral-600 has-[:disabled]:opacity-75 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">
 3 |         <input id="radioMac" type="radio" class="before:content[''] relative h-4 w-4 appearance-none rounded-full border border-neutral-300 bg-white before:invisible before:absolute before:left-1/2 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-neutral-100 checked:border-black checked:bg-black checked:before:visible focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-neutral-800 checked:focus:outline-black disabled:cursor-not-allowed dark:border-neutral-700 dark:bg-neutral-950 dark:before:bg-black dark:checked:border-white dark:checked:bg-white dark:focus:outline-neutral-300 dark:checked:focus:outline-white" name="radioDefault" value="" checked >
 4 |         <span class="text-sm">Mac</span>
 5 |     </label>
 6 |     <label for="radioWindows" class="flex w-fit min-w-[14rem] cursor-pointer items-center justify-start gap-2 rounded-md border border-neutral-300 bg-neutral-50 px-4 py-2 font-medium text-neutral-600 has-[:disabled]:opacity-75 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">
 7 |         <input id="radioWindows" type="radio" class="before:content[''] relative h-4 w-4 appearance-none rounded-full border border-neutral-300 bg-white before:invisible before:absolute before:left-1/2 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-neutral-100 checked:border-black checked:bg-black checked:before:visible focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-neutral-800 checked:focus:outline-black disabled:cursor-not-allowed dark:border-neutral-700 dark:bg-neutral-950 dark:before:bg-black dark:checked:border-white dark:checked:bg-white dark:focus:outline-neutral-300 dark:checked:focus:outline-white" name="radioDefault" value="">
 8 |         <span class="text-sm">Windows</span>
 9 |     </label>
10 |     <label for="radioLinux" class="flex w-fit min-w-[14rem] cursor-pointer items-center justify-start gap-2 rounded-md border border-neutral-300 bg-neutral-50 px-4 py-2 font-medium text-neutral-600 has-[:disabled]:opacity-75 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">
11 |         <input id="radioLinux" type="radio" class="before:content[''] relative h-4 w-4 appearance-none rounded-full border border-neutral-300 bg-white before:invisible before:absolute before:left-1/2 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-x-1/2 before:-translate-y-1/2 before:rounded-full before:bg-neutral-100 checked:border-black checked:bg-black checked:before:visible focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-neutral-800 checked:focus:outline-black disabled:cursor-not-allowed dark:border-neutral-700 dark:bg-neutral-950 dark:before:bg-black dark:checked:border-white dark:checked:bg-white dark:focus:outline-neutral-300 dark:checked:focus:outline-white" name="radioDefault" value="">
12 |         <span class="text-sm">Linux</span>
13 |     </label>
14 | </div>
15 | 


--------------------------------------------------------------------------------
/tailwind-v3/dropdowns/dropdown-with-click.html:
--------------------------------------------------------------------------------
 1 | <div x-data="{ isOpen: false, openedWithKeyboard: false }" class="relative" @keydown.esc.window="isOpen = false, openedWithKeyboard = false">
 2 |     <!-- Toggle Button -->
 3 |     <button type="button" @click="isOpen = ! isOpen" class="inline-flex cursor-pointer items-center gap-2 whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-4 py-2 text-sm font-medium tracking-wide transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-800 dark:border-neutral-700 dark:bg-neutral-900 dark:focus-visible:outline-neutral-300" aria-haspopup="true" @keydown.space.prevent="openedWithKeyboard = true" @keydown.enter.prevent="openedWithKeyboard = true" @keydown.down.prevent="openedWithKeyboard = true" :class="isOpen || openedWithKeyboard ? 'text-neutral-900 dark:text-white' : 'text-neutral-600 dark:text-neutral-300'" :aria-expanded="isOpen || openedWithKeyboard">
 4 |         Actions Menu
 5 |         <svg aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-4 rotate-0">
 6 |             <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
 7 |         </svg>        
 8 |     </button>
 9 |     <!-- Dropdown Menu -->
10 |     <div x-cloak x-show="isOpen || openedWithKeyboard" x-transition x-trap="openedWithKeyboard" @click.outside="isOpen = false, openedWithKeyboard = false" @keydown.down.prevent="$focus.wrap().next()" @keydown.up.prevent="$focus.wrap().previous()" class="absolute top-11 left-0 flex w-full min-w-[12rem] flex-col overflow-hidden rounded-md border border-neutral-300 bg-neutral-50 py-1.5 dark:border-neutral-700 dark:bg-neutral-900" role="menu">
11 |         <a href="#" class="bg-neutral-50 px-4 py-2 text-sm text-neutral-600 hover:bg-neutral-900/5 hover:text-neutral-900 focus-visible:bg-neutral-900/10 focus-visible:text-neutral-900 focus-visible:outline-none dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-50/5 dark:hover:text-white dark:focus-visible:bg-neutral-50/10 dark:focus-visible:text-white" role="menuitem">Dashboard</a>
12 |         <a href="#" class="bg-neutral-50 px-4 py-2 text-sm text-neutral-600 hover:bg-neutral-900/5 hover:text-neutral-900 focus-visible:bg-neutral-900/10 focus-visible:text-neutral-900 focus-visible:outline-none dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-50/5 dark:hover:text-white dark:focus-visible:bg-neutral-50/10 dark:focus-visible:text-white" role="menuitem">Subscription</a>
13 |         <a href="#" class="bg-neutral-50 px-4 py-2 text-sm text-neutral-600 hover:bg-neutral-900/5 hover:text-neutral-900 focus-visible:bg-neutral-900/10 focus-visible:text-neutral-900 focus-visible:outline-none dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-50/5 dark:hover:text-white dark:focus-visible:bg-neutral-50/10 dark:focus-visible:text-white" role="menuitem">Settings</a>
14 |         <a href="#" class="bg-neutral-50 px-4 py-2 text-sm text-neutral-600 hover:bg-neutral-900/5 hover:text-neutral-900 focus-visible:bg-neutral-900/10 focus-visible:text-neutral-900 focus-visible:outline-none dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-50/5 dark:hover:text-white dark:focus-visible:bg-neutral-50/10 dark:focus-visible:text-white" role="menuitem">Sign Out</a>
15 |     </div>
16 | </div>
17 | 


--------------------------------------------------------------------------------
/tailwind-v3/navbar/default-navbar.html:
--------------------------------------------------------------------------------
 1 | <nav x-data="{ mobileMenuIsOpen: false }" @click.away="mobileMenuIsOpen = false" class="flex items-center justify-between border-b border-neutral-300 px-6 py-4 dark:border-neutral-700" aria-label="penguin ui menu">
 2 | 	<!-- Brand Logo -->
 3 | 	<a href="#" class="text-2xl font-bold text-neutral-900 dark:text-white">
 4 | 		<span>Peng<span class="text-black dark:text-white">ui</span>n</span>
 5 | 		<!-- <img src="./your-logo.svg" alt="brand logo" class="w-10" /> -->
 6 | 	</a>
 7 | 	<!-- Desktop Menu -->
 8 | 	<ul class="hidden items-center gap-4 md:flex">
 9 | 		<li><a href="#" class="font-bold text-black underline-offset-2 hover:text-black focus:outline-none focus:underline dark:text-white dark:hover:text-white" aria-current="page">Products</a></li>
10 | 		<li><a href="#" class="font-medium text-neutral-600 underline-offset-2 hover:text-black focus:outline-none focus:underline dark:text-neutral-300 dark:hover:text-white">Pricing</a></li>
11 | 		<li><a href="#" class="font-medium text-neutral-600 underline-offset-2 hover:text-black focus:outline-none focus:underline dark:text-neutral-300 dark:hover:text-white">Blog</a></li>
12 | 		<li><a href="#" class="font-medium text-neutral-600 underline-offset-2 hover:text-black focus:outline-none focus:underline dark:text-neutral-300 dark:hover:text-white">Login</a></li>
13 | 	</ul>
14 | 	<!-- Mobile Menu Button -->
15 | 	<button @click="mobileMenuIsOpen = !mobileMenuIsOpen" :aria-expanded="mobileMenuIsOpen" :class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-20' : null" type="button" class="flex text-neutral-600 dark:text-neutral-300 md:hidden" aria-label="mobile menu" aria-controls="mobileMenu">
16 | 		<svg x-cloak x-show="!mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-6">
17 | 			<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
18 | 		</svg>
19 | 		<svg x-cloak x-show="mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-6">
20 | 			<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
21 | 		</svg>
22 | 	</button>
23 | 	<!-- Mobile Menu -->
24 | 	<ul x-cloak x-show="mobileMenuIsOpen" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="-translate-y-full" x-transition:enter-end="translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-out duration-300" x-transition:leave-start="translate-y-0" x-transition:leave-end="-translate-y-full" id="mobileMenu" class="fixed max-h-svh overflow-y-auto inset-x-0 top-0 z-10 flex flex-col divide-y divide-neutral-300 rounded-b-md border-b border-neutral-300 bg-neutral-50 px-6 pb-6 pt-20 dark:divide-neutral-700 dark:border-neutral-700 dark:bg-neutral-900 md:hidden">
25 | 		<li class="py-4"><a href="#" class="w-full text-lg font-bold text-black focus:underline dark:text-white" aria-current="page">Products</a></li>
26 | 		<li class="py-4"><a href="#" class="w-full text-lg font-medium text-neutral-600 focus:underline dark:text-neutral-300">Pricing</a></li>
27 | 		<li class="py-4"><a href="#" class="w-full text-lg font-medium text-neutral-600 focus:underline dark:text-neutral-300">Blog</a></li>
28 | 		<li class="py-4"><a href="#" class="w-full text-lg font-medium text-neutral-600 focus:underline dark:text-neutral-300">Login</a></li>
29 | 	</ul>
30 | </nav>
31 | 


--------------------------------------------------------------------------------
/tailwind-v3/range/range-slider-with-ticks.html:
--------------------------------------------------------------------------------
 1 | <div class="flex w-full flex-col text-neutral-600 dark:text-neutral-300"></div>
 2 |     <label for="rangeSlider" class="w-fit pl-0.5 text-sm">Mood Meter</label>
 3 |     <input id="rangeSlider" type="range" class="z-10 mb-1 mt-4 h-2 w-full appearance-none bg-neutral-50 focus:outline-black dark:bg-neutral-900 dark:focus:outline-white [&::-moz-range-thumb]:size-4 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:border-none [&::-moz-range-thumb]:bg-black active:[&::-moz-range-thumb]:scale-110 [&::-moz-range-thumb]:dark:bg-white [&::-webkit-slider-thumb]:size-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:border-none [&::-webkit-slider-thumb]:bg-black [&::-webkit-slider-thumb]:active:scale-110 [&::-webkit-slider-thumb]:dark:bg-white [&::-moz-range-thumb]:rounded-full [&::-webkit-slider-thumb]:rounded-full rounded-full" value="20" min="0" max="100" step="5" />
 4 |     <div class="flex items-center justify-between px-2 text-center text-neutral-600 dark:text-neutral-300">
 5 |         <span class="w-0 -translate-x-1 text-xs even:hidden md:even:inline-block" aria-hidden="true">0</span> 
 6 |         <span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span> 
 7 |         <span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span> 
 8 |         <span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span> 
 9 |         <span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span> 
10 |         <span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span> 
11 |         <span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span> 
12 |         <span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span> 
13 |         <span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span> 
14 |         <span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span> 
15 |         <span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span> 
16 |         <span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span> 
17 |         <span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span> 
18 |         <span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span> 
19 |         <span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span> 
20 |         <span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span> 
21 |         <span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span> 
22 |         <span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span> 
23 |         <span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span> 
24 |         <span class="text-[6px] font-bold opacity-50 even:hidden md:even:inline-block" aria-hidden="true">|</span>    
25 |         <span class="w-0 -translate-x-2 text-xs even:hidden md:even:inline-block" aria-hidden="true">100</span>
26 |     </div>
27 | </div>


--------------------------------------------------------------------------------
/tailwind-v3/modal/modal-backdrop-style.html:
--------------------------------------------------------------------------------
 1 | <div x-data="{modalIsOpen: false}"></div>
 2 |     <button @click="modalIsOpen = true" type="button" class="cursor-pointer whitespace-nowrap rounded-md bg-black px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-100 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:bg-white dark:text-black dark:focus-visible:outline-white">Open Modal</button>
 3 |     <div x-cloak x-show="modalIsOpen" x-transition.opacity.duration.200ms x-trap.inert.noscroll="modalIsOpen" @keydown.esc.window="modalIsOpen = false" @click.self="modalIsOpen = false" class="fixed inset-0 z-30 flex items-end justify-center bg-black/20 p-4 pb-8 backdrop-blur-md sm:items-center lg:p-8" role="dialog" aria-modal="true" aria-labelledby="defaultModalTitle">
 4 |         <!-- Modal Dialog -->
 5 |         <div x-show="modalIsOpen" x-transition:enter="transition ease-out duration-200 delay-100 motion-reduce:transition-opacity" x-transition:enter-start="scale-0" x-transition:enter-end="scale-100" class="flex max-w-lg flex-col gap-4 overflow-hidden rounded-md border border-neutral-300 bg-white text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">
 6 |             <!-- Dialog Header -->
 7 |             <div class="flex items-center justify-between border-b border-neutral-300 bg-neutral-50/60 p-4 dark:border-neutral-700 dark:bg-neutral-950/20">
 8 |                 <h3 id="defaultModalTitle" class="font-semibold tracking-wide text-neutral-900 dark:text-white">Special Offer</h3>
 9 |                 <button @click="modalIsOpen = false" aria-label="close modal">
10 |                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="1.4" class="w-5 h-5">
11 |                         <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
12 |                     </svg>
13 |                 </button>
14 |             </div>
15 |             <!-- Dialog Body -->
16 |             <div class="px-4 py-8"> 
17 |                 <p>As a token of appreciation, we have an exclusive offer just for you. Upgrade your account now to unlock premium features and enjoy a seamless experience.</p>
18 |             </div>
19 |             <!-- Dialog Footer -->
20 |             <div class="flex flex-col-reverse justify-between gap-2 border-t border-neutral-300 bg-neutral-50/60 p-4 dark:border-neutral-700 dark:bg-neutral-950/20 sm:flex-row sm:items-center md:justify-end">
21 |                 <button @click="modalIsOpen = false" type="button" class="cursor-pointer whitespace-nowrap rounded-md px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-600 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:text-neutral-300 dark:focus-visible:outline-white">Remind me later</button>
22 |                 <button @click="modalIsOpen = false" type="button" class="cursor-pointer whitespace-nowrap rounded-md bg-black px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-100 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:bg-white dark:text-black dark:focus-visible:outline-white">Upgrade Now</button>
23 |             </div>
24 |         </div>
25 |     </div>
26 | </div>


--------------------------------------------------------------------------------
/tailwind-v3/modal/modal-placement.html:
--------------------------------------------------------------------------------
 1 | <div x-data="{modalIsOpen: false}"></div>
 2 |     <button @click="modalIsOpen = true" type="button" class="cursor-pointer whitespace-nowrap rounded-md bg-black px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-100 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:bg-white dark:text-black dark:focus-visible:outline-white">Open Modal</button>
 3 |     <div x-cloak x-show="modalIsOpen" x-transition.opacity.duration.200ms x-trap.inert.noscroll="modalIsOpen" @keydown.esc.window="modalIsOpen = false" @click.self="modalIsOpen = false" class="fixed inset-0 z-30 flex w-full items-center justify-center bg-black/20 p-4 pb-8 backdrop-blur-md lg:p-8" role="dialog" aria-modal="true" aria-labelledby="defaultModalTitle">
 4 |         <!-- Modal Dialog -->
 5 |         <div x-show="modalIsOpen" x-transition:enter="transition ease-out duration-200 delay-100 motion-reduce:transition-opacity" x-transition:enter-start="opacity-0 scale-50" x-transition:enter-end="opacity-100 scale-100" class="flex max-w-lg flex-col gap-4 overflow-hidden rounded-md border border-neutral-300 bg-white text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">
 6 |             <!-- Dialog Header -->
 7 |             <div class="flex items-center justify-between border-b border-neutral-300 bg-neutral-50/60 p-4 dark:border-neutral-700 dark:bg-neutral-950/20">
 8 |                 <h3 id="defaultModalTitle" class="font-semibold tracking-wide text-neutral-900 dark:text-white">Special Offer</h3>
 9 |                 <button @click="modalIsOpen = false" aria-label="close modal">
10 |                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="1.4" class="w-5 h-5">
11 |                         <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
12 |                     </svg>
13 |                 </button>
14 |             </div>
15 |             <!-- Dialog Body -->
16 |             <div class="px-4 py-8"> 
17 |                 <p>As a token of appreciation, we have an exclusive offer just for you. Upgrade your account now to unlock premium features and enjoy a seamless experience.</p>
18 |             </div>
19 |             <!-- Dialog Footer -->
20 |             <div class="flex flex-col-reverse justify-between gap-2 border-t border-neutral-300 bg-neutral-50/60 p-4 dark:border-neutral-700 dark:bg-neutral-950/20 sm:flex-row sm:items-center md:justify-end">
21 |                 <button @click="modalIsOpen = false" type="button" class="cursor-pointer whitespace-nowrap rounded-md px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-600 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:text-neutral-300 dark:focus-visible:outline-white">Remind me later</button>
22 |                 <button @click="modalIsOpen = false" type="button" class="cursor-pointer whitespace-nowrap rounded-md bg-black px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-100 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:bg-white dark:text-black dark:focus-visible:outline-white">Upgrade Now</button>
23 |             </div>
24 |         </div>
25 |     </div>
26 | </div>


--------------------------------------------------------------------------------
/tailwind-v3/modal/default-modal.html:
--------------------------------------------------------------------------------
 1 | <div x-data="{modalIsOpen: false}"></div>
 2 |     <button @click="modalIsOpen = true" type="button" class="cursor-pointer whitespace-nowrap rounded-md bg-black px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-100 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:bg-white dark:text-black dark:focus-visible:outline-white">Open Modal</button>
 3 |     <div x-cloak x-show="modalIsOpen" x-transition.opacity.duration.200ms x-trap.inert.noscroll="modalIsOpen" @keydown.esc.window="modalIsOpen = false" @click.self="modalIsOpen = false" class="fixed inset-0 z-30 flex items-end justify-center bg-black/20 p-4 pb-8 backdrop-blur-md sm:items-center lg:p-8" role="dialog" aria-modal="true" aria-labelledby="defaultModalTitle">
 4 |         <!-- Modal Dialog -->
 5 |         <div x-show="modalIsOpen" x-transition:enter="transition ease-out duration-200 delay-100 motion-reduce:transition-opacity" x-transition:enter-start="opacity-0 scale-50" x-transition:enter-end="opacity-100 scale-100" class="flex max-w-lg flex-col gap-4 overflow-hidden rounded-md border border-neutral-300 bg-white text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">
 6 |             <!-- Dialog Header -->
 7 |             <div class="flex items-center justify-between border-b border-neutral-300 bg-neutral-50/60 p-4 dark:border-neutral-700 dark:bg-neutral-950/20">
 8 |                 <h3 id="defaultModalTitle" class="font-semibold tracking-wide text-neutral-900 dark:text-white">Special Offer</h3>
 9 |                 <button @click="modalIsOpen = false" aria-label="close modal">
10 |                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="1.4" class="w-5 h-5">
11 |                         <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
12 |                     </svg>
13 |                 </button>
14 |             </div>
15 |             <!-- Dialog Body -->
16 |             <div class="px-4 py-8"> 
17 |                 <p>As a token of appreciation, we have an exclusive offer just for you. Upgrade your account now to unlock premium features and enjoy a seamless experience.</p>
18 |             </div>
19 |             <!-- Dialog Footer -->
20 |             <div class="flex flex-col-reverse justify-between gap-2 border-t border-neutral-300 bg-neutral-50/60 p-4 dark:border-neutral-700 dark:bg-neutral-950/20 sm:flex-row sm:items-center md:justify-end">
21 |                 <button @click="modalIsOpen = false" type="button" class="cursor-pointer whitespace-nowrap rounded-md px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-600 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:text-neutral-300 dark:focus-visible:outline-white">Remind me later</button>
22 |                 <button @click="modalIsOpen = false" type="button" class="cursor-pointer whitespace-nowrap rounded-md bg-black px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-100 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:bg-white dark:text-black dark:focus-visible:outline-white">Upgrade Now</button>
23 |             </div>
24 |         </div>
25 |     </div>
26 | </div>


--------------------------------------------------------------------------------
/tailwind-v3/modal/modal-transition.html:
--------------------------------------------------------------------------------
 1 | <div x-data="{modalIsOpen: false}"></div>
 2 |     <button @click="modalIsOpen = true" type="button" class="cursor-pointer whitespace-nowrap rounded-md bg-black px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-100 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:bg-white dark:text-black dark:focus-visible:outline-white">Open Modal</button>
 3 |     <div x-cloak x-show="modalIsOpen" x-transition.opacity.duration.200ms x-trap.inert.noscroll="modalIsOpen" @keydown.esc.window="modalIsOpen = false" @click.self="modalIsOpen = false" class="fixed inset-0 z-30 flex items-end justify-center bg-black/20 p-4 pb-8 backdrop-blur-md sm:items-center lg:p-8" role="dialog" aria-modal="true" aria-labelledby="defaultModalTitle">
 4 |         <!-- Modal Dialog --> 
 5 |         <div x-show="modalIsOpen" x-transition:enter="transition ease-out duration-200 delay-100 motion-reduce:transition-opacity" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" class="flex max-w-lg flex-col gap-4 overflow-hidden rounded-md border border-neutral-300 bg-white text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">                 
 6 |             <!-- Dialog Header -->
 7 |             <div class="flex items-center justify-between border-b border-neutral-300 bg-neutral-50/60 p-4 dark:border-neutral-700 dark:bg-neutral-950/20">
 8 |                 <h3 id="defaultModalTitle" class="font-semibold tracking-wide text-neutral-900 dark:text-white">Special Offer</h3>
 9 |                 <button @click="modalIsOpen = false" aria-label="close modal">
10 |                     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="1.4" class="w-5 h-5">
11 |                         <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
12 |                     </svg>
13 |                 </button>
14 |             </div>
15 |             <!-- Dialog Body -->
16 |             <div class="px-4 py-8"> 
17 |                 <p>As a token of appreciation, we have an exclusive offer just for you. Upgrade your account now to unlock premium features and enjoy a seamless experience.</p>
18 |             </div>
19 |             <!-- Dialog Footer -->
20 |             <div class="flex flex-col-reverse justify-between gap-2 border-t border-neutral-300 bg-neutral-50/60 p-4 dark:border-neutral-700 dark:bg-neutral-950/20 sm:flex-row sm:items-center md:justify-end">
21 |                 <button @click="modalIsOpen = false" type="button" class="cursor-pointer whitespace-nowrap rounded-md px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-600 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:text-neutral-300 dark:focus-visible:outline-white">Remind me later</button>
22 |                 <button @click="modalIsOpen = false" type="button" class="cursor-pointer whitespace-nowrap rounded-md bg-black px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-100 transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:bg-white dark:text-black dark:focus-visible:outline-white">Upgrade Now</button>
23 |             </div>
24 |         </div>
25 |     </div>
26 | </div>


--------------------------------------------------------------------------------
/tailwind-v3/badge/badge-with-indicator.html:
--------------------------------------------------------------------------------
 1 | <!-- default Badge -->
 2 | <span class="w-fit inline-flex overflow-hidden rounded-md border border-neutral-300 bg-white text-xs font-medium text-neutral-600 dark:border-neutral-700 dark:bg-neutral-950 dark:text-neutral-300">
 3 |     <span class="flex items-center gap-1 bg-neutral-50/10 px-2 py-1 dark:bg-neutral-900/10">
 4 |         <span class="size-1.5 rounded-full bg-neutral-600 dark:bg-neutral-300"></span>
 5 |         Bagde
 6 |     </span>
 7 | </span>
 8 | 
 9 | <!-- inverse Badge -->
10 | <span class="w-fit inline-flex overflow-hidden rounded-md border border-neutral-700 bg-white text-xs font-medium text-neutral-600 dark:border-neutral-300 dark:bg-neutral-950 dark:text-neutral-300">
11 |     <span class="flex items-center gap-1 bg-neutral-900/10 px-2 py-1 dark:bg-neutral-50/10">
12 |         <span class="size-1.5 rounded-full bg-neutral-600 dark:bg-neutral-300"></span>
13 |         Bagde
14 |     </span>
15 | </span>
16 | 
17 | <!-- primary Badge -->
18 | <span class="w-fit inline-flex overflow-hidden rounded-md border border-black bg-white text-xs font-medium text-black dark:border-white dark:bg-neutral-950 dark:text-white">
19 |     <span class="flex items-center gap-1 bg-black/10 px-2 py-1 dark:bg-white/10">
20 |         <span class="size-1.5 rounded-full bg-black dark:bg-white"></span>
21 |         Bagde
22 |     </span>
23 | </span>
24 | 
25 | <!-- secondary Badge -->
26 | <span class="w-fit inline-flex overflow-hidden rounded-md border border-neutral-800 bg-white text-xs font-medium text-neutral-800 dark:border-neutral-300 dark:bg-neutral-950 dark:text-neutral-300">
27 |     <span class="flex items-center gap-1 bg-neutral-800/10 px-2 py-1 dark:bg-neutral-300/10">
28 |         <span class="size-1.5 rounded-full bg-neutral-800 dark:bg-neutral-300"></span>
29 |         Bagde
30 |     </span>
31 | </span>
32 | 
33 | <!-- info Badge -->
34 | <span class="w-fit inline-flex overflow-hidden rounded-md border border-sky-500 bg-white text-xs font-medium text-sky-500 dark:border-sky-500 dark:bg-neutral-950 dark:text-sky-500">
35 |     <span class="flex items-center gap-1 bg-sky-500/10 px-2 py-1 dark:bg-sky-500/10">
36 |         <span class="size-1.5 rounded-full bg-sky-500 dark:bg-sky-500"></span>
37 |         Bagde
38 |     </span>
39 | </span>
40 | 
41 | <!-- success Badge -->
42 | <span class="w-fit inline-flex overflow-hidden rounded-md border border-green-500 bg-white text-xs font-medium text-green-500 dark:border-green-500 dark:bg-neutral-950 dark:text-green-500">
43 |     <span class="flex items-center gap-1 bg-green-500/10 px-2 py-1 dark:bg-green-500/10">
44 |         <span class="size-1.5 rounded-full bg-green-500 dark:bg-green-500"></span>
45 |         Bagde
46 |     </span>
47 | </span>
48 | 
49 | <!-- warning Badge -->
50 | <span class="w-fit inline-flex overflow-hidden rounded-md border border-amber-500 bg-white text-xs font-medium text-amber-500 dark:border-amber-500 dark:bg-neutral-950 dark:text-amber-500">
51 |     <span class="flex items-center gap-1 bg-amber-500/10 px-2 py-1 dark:bg-amber-500/10">
52 |         <span class="size-1.5 rounded-full bg-amber-500 dark:bg-amber-500"></span>
53 |         Bagde
54 |     </span>
55 | </span>
56 | 
57 | <!-- danger Badge -->
58 | <span class="w-fit inline-flex overflow-hidden rounded-md border border-red-500 bg-white text-xs font-medium text-red-500 dark:border-red-500 dark:bg-neutral-950 dark:text-red-500">
59 |     <span class="flex items-center gap-1 bg-red-500/10 px-2 py-1 dark:bg-red-500/10">
60 |         <span class="size-1.5 rounded-full bg-red-500 dark:bg-red-500"></span>
61 |         Bagde
62 |     </span>
63 | </span>
64 | 
65 | 


--------------------------------------------------------------------------------
/tailwind-v3/dropdowns/dropdown-with-hover.html:
--------------------------------------------------------------------------------
 1 | <div x-data="{ isOpen: false, openedWithKeyboard: false, leaveTimeout: null }" @mouseleave.prevent="leaveTimeout = setTimeout(() => { isOpen = false }, 250)" @mouseenter="leaveTimeout ? clearTimeout(leaveTimeout) : true" @keydown.esc.prevent="isOpen = false, openedWithKeyboard = false" @click.outside="isOpen = false, openedWithKeyboard = false" class="relative">
 2 |     <!-- Toggle Button -->
 3 |     <button type="button" @mouseover="isOpen = true" @keydown.space.prevent="openedWithKeyboard = true" @keydown.enter.prevent="openedWithKeyboard = true" @keydown.down.prevent="openedWithKeyboard = true" class="inline-flex cursor-pointer items-center gap-2 whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-4 py-2 text-sm font-medium tracking-wide transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-800 dark:border-neutral-700 dark:bg-neutral-900 dark:focus-visible:outline-neutral-300" :class="isOpen || openedWithKeyboard ? 'text-neutral-900 dark:text-white' : 'text-neutral-600 dark:text-neutral-300'" :aria-expanded="isOpen || openedWithKeyboard" aria-haspopup="true">
 4 |         Actions Menu
 5 |         <svg aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-4 w-4 rotate-0">
 6 |             <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
 7 |         </svg>        
 8 |     </button>
 9 |     <!-- Dropdown Menu -->
10 |     <div x-cloak x-show="isOpen || openedWithKeyboard" x-transition x-trap="openedWithKeyboard" @click.outside="isOpen = false, openedWithKeyboard = false" @keydown.down.prevent="$focus.wrap().next()" @keydown.up.prevent="$focus.wrap().previous()" class="absolute top-11 left-0 flex w-full min-w-[12rem] flex-col overflow-hidden rounded-md border border-neutral-300 bg-neutral-50 py-1.5 dark:border-neutral-700 dark:bg-neutral-900" role="menu">
11 |         <a href="#" class="bg-neutral-50 px-4 py-2 text-sm text-neutral-600 hover:bg-neutral-900/5 hover:text-neutral-900 focus-visible:bg-neutral-900/10 focus-visible:text-neutral-900 focus-visible:outline-none dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-50/5 dark:hover:text-white dark:focus-visible:bg-neutral-50/10 dark:focus-visible:text-white" role="menuitem">Dashboard</a>
12 |         <a href="#" class="bg-neutral-50 px-4 py-2 text-sm text-neutral-600 hover:bg-neutral-900/5 hover:text-neutral-900 focus-visible:bg-neutral-900/10 focus-visible:text-neutral-900 focus-visible:outline-none dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-50/5 dark:hover:text-white dark:focus-visible:bg-neutral-50/10 dark:focus-visible:text-white" role="menuitem">Subscription</a>
13 |         <a href="#" class="bg-neutral-50 px-4 py-2 text-sm text-neutral-600 hover:bg-neutral-900/5 hover:text-neutral-900 focus-visible:bg-neutral-900/10 focus-visible:text-neutral-900 focus-visible:outline-none dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-50/5 dark:hover:text-white dark:focus-visible:bg-neutral-50/10 dark:focus-visible:text-white" role="menuitem">Settings</a>
14 |         <a href="#" class="bg-neutral-50 px-4 py-2 text-sm text-neutral-600 hover:bg-neutral-900/5 hover:text-neutral-900 focus-visible:bg-neutral-900/10 focus-visible:text-neutral-900 focus-visible:outline-none dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-50/5 dark:hover:text-white dark:focus-visible:bg-neutral-50/10 dark:focus-visible:text-white" role="menuitem">Sign Out</a>
15 |     </div>
16 | </div>
17 | 


--------------------------------------------------------------------------------
/tailwind-v3/navbar/with-call-to-action.html:
--------------------------------------------------------------------------------
 1 | <nav x-data="{ mobileMenuIsOpen: false }" @click.away="mobileMenuIsOpen = false" class="flex items-center justify-between px-6 py-4" aria-label="penguin ui menu">
 2 | 	<!-- Brand Logo -->
 3 | 	<a href="#" class="text-2xl font-bold text-neutral-900 dark:text-white">
 4 | 		<span>Peng<span class="text-black dark:text-white">ui</span>n</span>
 5 | 		<!-- <img src="./your-logo.svg" alt="brand logo" class="w-10" /> -->
 6 | 	</a>
 7 | 	<!-- Desktop Menu -->
 8 | 	<ul class="hidden items-center gap-4 sm:flex">
 9 | 		<li><a href="#" class="font-bold text-black underline-offset-2 hover:text-black focus:outline-none focus:underline dark:text-white dark:hover:text-white" aria-current="page">Products</a></li>
10 | 		<li><a href="#" class="font-medium text-neutral-600 underline-offset-2 hover:text-black focus:outline-none focus:underline dark:text-neutral-300 dark:hover:text-white">Pricing</a></li>
11 | 		<li><a href="#" class="font-medium text-neutral-600 underline-offset-2 hover:text-black focus:outline-none focus:underline dark:text-neutral-300 dark:hover:text-white">Blog</a></li>
12 | 		<!-- CTA Button -->
13 | 		<li><a href="#" class="rounded-md bg-black px-4 py-2 text-center text-sm font-medium tracking-wide text-neutral-100 hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:bg-white dark:text-black dark:focus-visible:outline-white">Sign Up</a></li>
14 | 	</ul>
15 | 	<!-- Mobile Menu Button -->
16 | 	<button @click="mobileMenuIsOpen = !mobileMenuIsOpen" :aria-expanded="mobileMenuIsOpen" :class="mobileMenuIsOpen ? 'fixed top-6 right-6 z-20' : null" type="button" class="flex text-neutral-600 dark:text-neutral-300 sm:hidden" aria-label="mobile menu" aria-controls="mobileMenu">
17 | 		<svg x-cloak x-show="!mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-6">
18 | 			<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
19 | 		</svg>
20 | 		<svg x-cloak x-show="mobileMenuIsOpen" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-6">
21 | 			<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
22 | 		</svg>
23 | 	</button>
24 | 	<!-- Mobile Menu -->
25 | 	<ul x-cloak x-show="mobileMenuIsOpen" x-transition:enter="transition motion-reduce:transition-none ease-out duration-300" x-transition:enter-start="-translate-y-full" x-transition:enter-end="translate-y-0" x-transition:leave="transition motion-reduce:transition-none ease-out duration-300" x-transition:leave-start="translate-y-0" x-transition:leave-end="-translate-y-full" id="mobileMenu" class="fixed max-h-svh overflow-y-auto inset-x-0 top-0 z-10 flex flex-col divide-y divide-neutral-300 rounded-b-md border-b border-neutral-300 bg-neutral-50 px-6 pb-6 pt-20 dark:divide-neutral-700 dark:border-neutral-700 dark:bg-neutral-900 sm:hidden">
26 | 		<li class="py-4"><a href="#" class="w-full text-lg font-bold text-black focus:underline dark:text-white" aria-current="page">Products</a></li>
27 | 		<li class="py-4"><a href="#" class="w-full text-lg font-medium text-neutral-600 focus:underline dark:text-neutral-300">Pricing</a></li>
28 | 		<li class="py-4"><a href="#" class="w-full text-lg font-medium text-neutral-600 focus:underline dark:text-neutral-300">Blog</a></li>
29 | 		<!-- CTA Button -->
30 | 		<li class="mt-4 w-full border-none"><a href="#" class="rounded-md bg-black px-4 py-2 block text-center font-medium tracking-wide text-neutral-100 hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 dark:bg-white dark:text-black dark:focus-visible:outline-white">Sign Up</a></li>
31 | 	</ul>
32 | </nav>
33 | 


--------------------------------------------------------------------------------
/tailwind-v3/buttons/ghost-button.html:
--------------------------------------------------------------------------------
 1 | <!-- primary Ghost Button -->
 2 | <button type="button" class="cursor-pointer whitespace-nowrap bg-transparent rounded-md px-4 py-2 text-sm font-medium tracking-wide text-black transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:text-white dark:focus-visible:outline-white">Primary</button>
 3 | 
 4 | <!-- secondary Ghost Button -->
 5 | <button type="button" class="cursor-pointer whitespace-nowrap bg-transparent rounded-md px-4 py-2 text-sm font-medium tracking-wide text-neutral-800 transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-800 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:text-neutral-300 dark:focus-visible:outline-neutral-300">Secondary</button>
 6 | 
 7 | <!-- alternate Ghost Button -->
 8 | <button type="button" class="cursor-pointer whitespace-nowrap bg-transparent rounded-md px-4 py-2 text-sm font-medium tracking-wide text-neutral-300 transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-300 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:text-neutral-700 dark:focus-visible:outline-neutral-700">Alternate</button>
 9 | 
10 | <!-- inverse Ghost Button -->
11 | <button type="button" class="cursor-pointer whitespace-nowrap bg-transparent rounded-md px-4 py-2 text-sm font-medium tracking-wide text-neutral-950 transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:text-white dark:focus-visible:outline-white">Inverse</button>
12 | 
13 | <!-- info Ghost Button -->
14 | <button type="button" class="cursor-pointer whitespace-nowrap bg-transparent rounded-md px-4 py-2 text-sm font-medium tracking-wide text-sky-500 transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:text-sky-500 dark:focus-visible:outline-sky-500">Info</button>
15 | 
16 | <!-- danger Ghost Button -->
17 | <button type="button" class="cursor-pointer whitespace-nowrap bg-transparent rounded-md px-4 py-2 text-sm font-medium tracking-wide text-red-500 transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:text-red-500 dark:focus-visible:outline-red-500">Danger</button>
18 | 
19 | <!-- warning Ghost Button -->
20 | <button type="button" class="cursor-pointer whitespace-nowrap bg-transparent rounded-md px-4 py-2 text-sm font-medium tracking-wide text-amber-500 transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:text-amber-500 dark:focus-visible:outline-amber-500">Warning</button>
21 | 
22 | <!-- success Ghost Button -->
23 | <button type="button" class="cursor-pointer whitespace-nowrap bg-transparent rounded-md px-4 py-2 text-sm font-medium tracking-wide text-green-500 transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:text-green-500 dark:focus-visible:outline-green-500">Success</button>
24 | 


--------------------------------------------------------------------------------
/tailwind-v3/carousel/carousel-with-touch.html:
--------------------------------------------------------------------------------
 1 | <div x-data="{            
 2 |     slides: [                
 3 |         {
 4 |             imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/default-slide-1.webp',
 5 |             imgAlt: 'Vibrant abstract painting with swirling blue and light pink hues on a canvas.',                
 6 |         },                
 7 |         {                    
 8 |             imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/default-slide-2.webp',                    
 9 |             imgAlt: 'Vibrant abstract painting with swirling red, yellow, and pink hues on a canvas.',                
10 |         },                
11 |         {                    
12 |             imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/default-slide-3.webp',                    
13 |             imgAlt: 'Vibrant abstract painting with swirling blue and purple hues on a canvas.',                
14 |         },            
15 |     ],            
16 |     currentSlideIndex: 1,
17 |     touchStartX: null,
18 |     touchEndX: null,
19 |     swipeThreshold: 50,
20 |     previous() {                
21 |         if (this.currentSlideIndex > 1) {                    
22 |             this.currentSlideIndex = this.currentSlideIndex - 1                
23 |         } else {   
24 |             // If it's the first slide, go to the last slide           
25 |             this.currentSlideIndex = this.slides.length                
26 |         }            
27 |     },            
28 |     next() {                
29 |         if (this.currentSlideIndex < this.slides.length) {                    
30 |             this.currentSlideIndex = this.currentSlideIndex + 1                
31 |         } else {                 
32 |             // If it's the last slide, go to the first slide    
33 |             this.currentSlideIndex = 1                
34 |         }            
35 |     },        
36 |     handleTouchStart(event) {
37 |         this.touchStartX = event.touches[0].clientX
38 |     },
39 |     handleTouchMove(event) {
40 |         this.touchEndX = event.touches[0].clientX
41 |     },
42 |     handleTouchEnd() {
43 |         if(this.touchEndX){
44 |             if (this.touchStartX - this.touchEndX > this.swipeThreshold) {
45 |                 this.next()
46 |             }
47 |             if (this.touchStartX - this.touchEndX < -this.swipeThreshold) {
48 |                 this.previous()
49 |             }
50 |             this.touchStartX = null
51 |             this.touchEndX = null
52 |         }
53 |     },     
54 | }" class="relative w-full overflow-hidden">
55 |    
56 |     <!-- slides -->
57 |     <!-- Change min-h-[50svh] to your preferred height size -->
58 |     <div class="relative min-h-[50svh] w-full" x-on:touchstart="handleTouchStart($event)" x-on:touchmove="handleTouchMove($event)" x-on:touchend="handleTouchEnd()">
59 |         <template x-for="(slide, index) in slides">
60 |             <div x-show="currentSlideIndex == index + 1" class="absolute inset-0" x-transition.opacity.duration.700ms>
61 |                 <img class="absolute w-full h-full inset-0 object-cover text-neutral-600 dark:text-neutral-300" x-bind:src="slide.imgSrc" x-bind:alt="slide.imgAlt" />
62 |             </div>
63 |         </template>
64 |     </div>
65 |     
66 |     <!-- indicators -->
67 |     <div class="absolute rounded-md bottom-3 md:bottom-5 left-1/2 z-20 flex -translate-x-1/2 gap-4 md:gap-3 bg-white/75 px-1.5 py-1 md:px-2 dark:bg-neutral-950/75" role="group" aria-label="slides" >
68 |         <template x-for="(slide, index) in slides">
69 |             <button class="size-2 cursor-pointer rounded-full transition bg-neutral-600 dark:bg-neutral-300" x-on:click="currentSlideIndex = index + 1" x-bind:class="[currentSlideIndex === index + 1 ? 'bg-neutral-600 dark:bg-neutral-300' : 'bg-neutral-600/50 dark:bg-neutral-300/50']" x-bind:aria-label="'slide ' + (index + 1)"></button>
70 |         </template>
71 |     </div>
72 | </div>


--------------------------------------------------------------------------------
/tailwind-v3/buttons/default-button.html:
--------------------------------------------------------------------------------
 1 | <!-- primary Button -->
 2 | <button type="button" class="cursor-pointer whitespace-nowrap rounded-md bg-black px-4 py-2 text-sm font-medium tracking-wide text-neutral-100 transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-white dark:text-black dark:focus-visible:outline-white">Primary</button>
 3 | 
 4 | <!-- secondary Button -->
 5 | <button type="button" class="cursor-pointer whitespace-nowrap rounded-md bg-neutral-800 px-4 py-2 text-sm font-medium tracking-wide text-white transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-800 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-neutral-300 dark:text-black dark:focus-visible:outline-neutral-300">Secondary</button>
 6 | 
 7 | <!-- alternate Button -->
 8 | <button type="button" class="cursor-pointer whitespace-nowrap rounded-md bg-neutral-50 px-4 py-2 text-sm font-medium tracking-wide text-neutral-900 transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-50 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-neutral-900 dark:text-white dark:focus-visible:outline-neutral-900">Alternate</button>
 9 | 
10 | <!-- inverse Button -->
11 | <button type="button" class="cursor-pointer whitespace-nowrap rounded-md bg-neutral-950 px-4 py-2 text-sm font-medium tracking-wide text-neutral-300 transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-white dark:text-neutral-600 dark:focus-visible:outline-white">Inverse</button>
12 | 
13 | <!-- info Button -->
14 | <button type="button" class="cursor-pointer whitespace-nowrap rounded-md bg-sky-500 px-4 py-2 text-sm font-medium tracking-wide text-white transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-sky-500 dark:text-white dark:focus-visible:outline-sky-500">Info</button>
15 | 
16 | <!-- danger Button -->
17 | <button type="button" class="cursor-pointer whitespace-nowrap rounded-md bg-red-500 px-4 py-2 text-sm font-medium tracking-wide text-white transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-red-500 dark:text-white dark:focus-visible:outline-red-500">Danger</button>
18 | 
19 | <!-- warning Button -->
20 | <button type="button" class="cursor-pointer whitespace-nowrap rounded-md bg-amber-500 px-4 py-2 text-sm font-medium tracking-wide text-white transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-amber-500 dark:text-white dark:focus-visible:outline-amber-500">Warning</button>
21 | 
22 | <!-- success Button -->
23 | <button type="button" class="cursor-pointer whitespace-nowrap rounded-md bg-green-500 px-4 py-2 text-sm font-medium tracking-wide text-white transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:bg-green-500 dark:text-white dark:focus-visible:outline-green-500">Success</button>
24 | 


--------------------------------------------------------------------------------
/tailwind-v3/kbd/frequently-used-keys.html:
--------------------------------------------------------------------------------
 1 | <!-- Tab -->
 2 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">Tab</kbd>
 3 | 
 4 | <!-- Shift -->
 5 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">Shift</kbd>
 6 | 
 7 | <!-- space -->
 8 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">space</kbd>
 9 | 
10 | <!-- Ctrl -->
11 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">Ctrl</kbd>
12 | 
13 | <!-- command -->
14 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">command</kbd>
15 | 
16 | <!-- alt -->
17 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">alt</kbd>
18 | 
19 | <!-- option -->
20 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">option</kbd>
21 | 
22 | <!-- Enter -->
23 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">Enter</kbd>
24 | 
25 | <!-- Backspace -->
26 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">Backspace</kbd>
27 | 
28 | <!-- Esc -->
29 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">Esc</kbd>
30 | 
31 | <!-- Delete -->
32 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">Delete</kbd>
33 | 
34 | <!-- Up -->
35 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">Up</kbd>
36 | 
37 | <!-- Down -->
38 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">Down</kbd>
39 | 
40 | <!-- Left -->
41 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">Left</kbd>
42 | 
43 | <!-- Right -->
44 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">Right</kbd>
45 | 
46 | <!-- Caps Lock -->
47 | <kbd class="inline-block size-min whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-2 py-1 font-mono text-xs font-semibold text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">Caps Lock</kbd>
48 | 
49 |     
50 | 


--------------------------------------------------------------------------------
/tailwind-v3/buttons/outline-button.html:
--------------------------------------------------------------------------------
 1 | <!-- primary Outline Button -->
 2 | <button type="button" class="cursor-pointer whitespace-nowrap bg-transparent rounded-md border border-black px-4 py-2 text-sm font-medium tracking-wide text-black transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:border-white dark:text-white dark:focus-visible:outline-white">Primary</button>
 3 | 
 4 | <!-- secondary Outline Button -->
 5 | <button type="button" class="cursor-pointer whitespace-nowrap bg-transparent rounded-md border border-neutral-800 px-4 py-2 text-sm font-medium tracking-wide text-neutral-800 transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-800 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:border-neutral-300 dark:text-neutral-300 dark:focus-visible:outline-neutral-300">Secondary</button>
 6 | 
 7 | <!-- alternate Outline Button -->
 8 | <button type="button" class="cursor-pointer whitespace-nowrap bg-transparent rounded-md border border-neutral-300 px-4 py-2 text-sm font-medium tracking-wide text-neutral-300 transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-300 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:border-neutral-700 dark:text-neutral-700 dark:focus-visible:outline-neutral-700">Alternate</button>
 9 | 
10 | <!-- inverse Outline Button -->
11 | <button type="button" class="cursor-pointer whitespace-nowrap bg-transparent rounded-md border border-neutral-950 px-4 py-2 text-sm font-medium tracking-wide text-neutral-950 transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-950 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:border-white dark:text-white dark:focus-visible:outline-white">Inverse</button>
12 | 
13 | <!-- info Outline Button -->
14 | <button type="button" class="cursor-pointer whitespace-nowrap bg-transparent rounded-md border border-sky-500 px-4 py-2 text-sm font-medium tracking-wide text-sky-500 transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:border-sky-500 dark:text-sky-500 dark:focus-visible:outline-sky-500">Info</button>
15 | 
16 | <!-- danger Outline Button -->
17 | <button type="button" class="cursor-pointer whitespace-nowrap bg-transparent rounded-md border border-red-500 px-4 py-2 text-sm font-medium tracking-wide text-red-500 transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-500 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:border-red-500 dark:text-red-500 dark:focus-visible:outline-red-500">Danger</button>
18 | 
19 | <!-- warning Outline Button -->
20 | <button type="button" class="cursor-pointer whitespace-nowrap bg-transparent rounded-md border border-amber-500 px-4 py-2 text-sm font-medium tracking-wide text-amber-500 transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-amber-500 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:border-amber-500 dark:text-amber-500 dark:focus-visible:outline-amber-500">Warning</button>
21 | 
22 | <!-- success Outline Button -->
23 | <button type="button" class="cursor-pointer whitespace-nowrap bg-transparent rounded-md border border-green-500 px-4 py-2 text-sm font-medium tracking-wide text-green-500 transition hover:opacity-75 text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500 active:opacity-100 active:outline-offset-0 disabled:opacity-75 disabled:cursor-not-allowed dark:border-green-500 dark:text-green-500 dark:focus-visible:outline-green-500">Success</button>
24 | 


--------------------------------------------------------------------------------
/tailwind-v3/checkbox/checkbox-with-custom-icon.html:
--------------------------------------------------------------------------------
 1 | <!-- Xmark Checkbox -->
 2 | <label for="checkboxXmark" class="flex cursor-pointer items-center gap-2 text-sm font-medium text-neutral-600 dark:text-neutral-300 [&:has(input:checked)]:text-neutral-900 dark:[&:has(input:checked)]:text-white [&:has(input:disabled)]:opacity-75 [&:has(input:disabled)]:cursor-not-allowed">
 3 |     <div class="relative flex items-center">
 4 |         <input id="checkboxXmark" value="" type="checkbox" class="before:content[''] peer relative size-4 cursor-pointer appearance-none overflow-hidden rounded border border-neutral-300 bg-neutral-50 before:absolute before:inset-0 checked:border-black checked:before:bg-black focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-neutral-800 checked:focus:outline-black active:outline-offset-0 disabled:cursor-not-allowed dark:border-neutral-700 dark:bg-neutral-900 dark:checked:border-white dark:checked:before:bg-white dark:focus:outline-neutral-300 dark:checked:focus:outline-white" checked />
 5 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-neutral-100 peer-checked:visible dark:text-black">
 6 |             <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
 7 |         </svg>
 8 |     </div>
 9 |     <span>Check Me</span>
10 | </label>
11 | 
12 | <!-- Minus Checkbox -->
13 | <label for="checkboxMinus" class="flex cursor-pointer items-center gap-2 text-sm font-medium text-neutral-600 dark:text-neutral-300 [&:has(input:checked)]:text-neutral-900 dark:[&:has(input:checked)]:text-white [&:has(input:disabled)]:opacity-75 [&:has(input:disabled)]:cursor-not-allowed">
14 |     <div class="relative flex items-center">
15 |         <input id="checkboxMinus" value="" type="checkbox" class="before:content[''] peer relative size-4 cursor-pointer appearance-none overflow-hidden rounded border border-neutral-300 bg-neutral-50 before:absolute before:inset-0 checked:border-black checked:before:bg-black focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-neutral-800 checked:focus:outline-black active:outline-offset-0 disabled:cursor-not-allowed dark:border-neutral-700 dark:bg-neutral-900 dark:checked:border-white dark:checked:before:bg-white dark:focus:outline-neutral-300 dark:checked:focus:outline-white" checked />
16 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-neutral-100 peer-checked:visible dark:text-black">
17 |             <path stroke-linecap="round" stroke-linejoin="round" d="M18 12H6"/>
18 |         </svg>
19 |     </div>
20 |     <span>Check Me</span>
21 | </label>
22 | 
23 | <!-- Plus Checkbox -->
24 | <label for="checkboxPlus" class="flex cursor-pointer items-center gap-2 text-sm font-medium text-neutral-600 dark:text-neutral-300 [&:has(input:checked)]:text-neutral-900 dark:[&:has(input:checked)]:text-white [&:has(input:disabled)]:opacity-75 [&:has(input:disabled)]:cursor-not-allowed">
25 |     <div class="relative flex items-center">
26 |         <input id="checkboxPlus" value="" type="checkbox" class="before:content[''] peer relative size-4 cursor-pointer appearance-none overflow-hidden rounded border border-neutral-300 bg-neutral-50 before:absolute before:inset-0 checked:border-black checked:before:bg-black focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-neutral-800 checked:focus:outline-black active:outline-offset-0 disabled:cursor-not-allowed dark:border-neutral-700 dark:bg-neutral-900 dark:checked:border-white dark:checked:before:bg-white dark:focus:outline-neutral-300 dark:checked:focus:outline-white" checked />
27 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" stroke="currentColor" fill="none" stroke-width="4" class="pointer-events-none invisible absolute left-1/2 top-1/2 size-3 -translate-x-1/2 -translate-y-1/2 text-neutral-100 peer-checked:visible dark:text-black">
28 |             <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/>
29 |         </svg>
30 |     </div>
31 |     <span>Check Me</span>
32 | </label>
33 | 


--------------------------------------------------------------------------------
/tailwind-v3/rating/default-rating.html:
--------------------------------------------------------------------------------
 1 | <div x-data="{ currentVal: 3 }" class="flex items-center gap-1">
 2 |     <label for="oneStar" class="cursor-pointer transition hover:scale-125 has-[:focus]:scale-125">
 3 |         <span class="sr-only">one star</span>
 4 |         <input x-model="currentVal" id="oneStar" type="radio" class="sr-only" name="rating" value="1">
 5 |         <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5" :class="currentVal > 0 ? 'text-amber-500' : 'text-neutral-600 dark:text-neutral-300'">
 6 |             <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd">
 7 |         </svg>
 8 |     </label>
 9 | 
10 |     <label for="twoStars" class="cursor-pointer transition hover:scale-125 has-[:focus]:scale-125">
11 |         <span class="sr-only">two stars</span>
12 |         <input x-model="currentVal" id="twoStars" type="radio" class="sr-only" name="rating" value="2">
13 |         <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5" :class="currentVal > 1 ? 'text-amber-500' : 'text-neutral-600 dark:text-neutral-300'">
14 |             <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd">
15 |         </svg>
16 |     </label>
17 | 
18 |     <label for="threeStars" class="cursor-pointer transition hover:scale-125 has-[:focus]:scale-125">
19 |         <span class="sr-only">three stars</span>
20 |         <input x-model="currentVal" id="threeStars" type="radio" class="sr-only" name="rating" value="3">
21 |         <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5" :class="currentVal > 2 ? 'text-amber-500' : 'text-neutral-600 dark:text-neutral-300'">
22 |             <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd">
23 |         </svg>
24 |     </label>
25 | 
26 |     <label for="fourStars" class="cursor-pointer transition hover:scale-125 has-[:focus]:scale-125">
27 |         <span class="sr-only">four stars</span>
28 |         <input x-model="currentVal" id="fourStars" type="radio" class="sr-only" name="rating" value="4">
29 |         <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5" :class="currentVal > 3 ? 'text-amber-500' : 'text-neutral-600 dark:text-neutral-300'">
30 |             <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd">
31 |         </svg>
32 |     </label>
33 | 
34 |     <label for="fiveStars" class="cursor-pointer transition hover:scale-125 has-[:focus]:scale-125">
35 |         <span class="sr-only">five stars</span>
36 |         <input x-model="currentVal" id="fiveStars" type="radio" class="sr-only" name="rating" value="5">
37 |         <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5" :class="currentVal > 4 ? 'text-amber-500' : 'text-neutral-600 dark:text-neutral-300'">
38 |             <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd">
39 |         </svg>
40 |     </label>
41 | </div>  
42 | 


--------------------------------------------------------------------------------
/tailwind-v3/dropdowns/dropdown-with-divider.html:
--------------------------------------------------------------------------------
 1 | <div x-data="{ isOpened: false, openedWithKeyboard: false }" @keydown.esc.window="isOpened = false, openedWithKeyboard = false" class="relative">
 2 |     <!-- Toggle Button -->
 3 |     <button type="button" @click="isOpened = ! isOpened" @keydown.space.prevent="openedWithKeyboard = true" @keydown.enter.prevent="openedWithKeyboard = true" @keydown.down.prevent="openedWithKeyboard = true" class="inline-flex cursor-pointer items-center gap-2 whitespace-nowrap rounded-md border border-neutral-300 bg-neutral-50 px-4 py-2 text-sm font-medium tracking-wide transition hover:opacity-75 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-800 dark:border-neutral-700 dark:bg-neutral-900 dark:focus-visible:outline-neutral-300" :class="isOpened || openedWithKeyboard ? 'text-neutral-900 dark:text-white' : 'text-neutral-600 dark:text-neutral-300'" :aria-expanded="isOpened || openedWithKeyboard" aria-haspopup="true">
 4 |         Actions Menu
 5 |         <svg aria-hidden="true" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="h-4 w-4 rotate-0">
 6 |             <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"/>
 7 |         </svg>        
 8 |     </button>
 9 |     <!-- Dropdown Menu -->
10 |     <div x-cloak x-show="isOpened || openedWithKeyboard" x-transition x-trap="openedWithKeyboard" @click.outside="isOpened = false, openedWithKeyboard = false" @keydown.down.prevent="$focus.wrap().next()" @keydown.up.prevent="$focus.wrap().previous()" class="absolute top-11 flex w-full min-w-[12rem] flex-col divide-y divide-neutral-300 overflow-hidden rounded-md border border-neutral-300 bg-neutral-50 dark:divide-neutral-700 dark:border-neutral-700 dark:bg-neutral-900" role="menu">
11 |         <div class="flex flex-col py-1.5"> 
12 |             <a href="#" class="bg-neutral-50 px-4 py-2 text-sm text-neutral-600 hover:bg-neutral-900/5 hover:text-neutral-900 focus-visible:bg-neutral-900/10 focus-visible:text-neutral-900 focus-visible:outline-none dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-50/5 dark:hover:text-white dark:focus-visible:bg-neutral-50/10 dark:focus-visible:text-white" role="menuitem">Dashboard</a>
13 |             <a href="#" class="bg-neutral-50 px-4 py-2 text-sm text-neutral-600 hover:bg-neutral-900/5 hover:text-neutral-900 focus-visible:bg-neutral-900/10 focus-visible:text-neutral-900 focus-visible:outline-none dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-50/5 dark:hover:text-white dark:focus-visible:bg-neutral-50/10 dark:focus-visible:text-white" role="menuitem">Messages</a>
14 |             <a href="#" class="bg-neutral-50 px-4 py-2 text-sm text-neutral-600 hover:bg-neutral-900/5 hover:text-neutral-900 focus-visible:bg-neutral-900/10 focus-visible:text-neutral-900 focus-visible:outline-none dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-50/5 dark:hover:text-white dark:focus-visible:bg-neutral-50/10 dark:focus-visible:text-white" role="menuitem">Favorites</a>
15 |         </div>
16 |         <div class="flex flex-col py-1.5"> 
17 |             <a href="#" class="bg-neutral-50 px-4 py-2 text-sm text-neutral-600 hover:bg-neutral-900/5 hover:text-neutral-900 focus-visible:bg-neutral-900/10 focus-visible:text-neutral-900 focus-visible:outline-none dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-50/5 dark:hover:text-white dark:focus-visible:bg-neutral-50/10 dark:focus-visible:text-white" role="menuitem">Profile</a>
18 |             <a href="#" class="bg-neutral-50 px-4 py-2 text-sm text-neutral-600 hover:bg-neutral-900/5 hover:text-neutral-900 focus-visible:bg-neutral-900/10 focus-visible:text-neutral-900 focus-visible:outline-none dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-50/5 dark:hover:text-white dark:focus-visible:bg-neutral-50/10 dark:focus-visible:text-white" role="menuitem">Settings</a>
19 |         </div>
20 |         <div class="flex flex-col py-1.5"> 
21 |             <a href="#" class="bg-neutral-50 px-4 py-2 text-sm text-neutral-600 hover:bg-neutral-900/5 hover:text-neutral-900 focus-visible:bg-neutral-900/10 focus-visible:text-neutral-900 focus-visible:outline-none dark:bg-neutral-900 dark:text-neutral-300 dark:hover:bg-neutral-50/5 dark:hover:text-white dark:focus-visible:bg-neutral-50/10 dark:focus-visible:text-white" role="menuitem">Sign Out</a>
22 |         </div>
23 |     </div> 
24 | </div>
25 | 


--------------------------------------------------------------------------------
/tailwind-v3/carousel/carousel-with-fixed-aspect-ratio.html:
--------------------------------------------------------------------------------
 1 | <div x-data="{            
 2 |     slides: [                
 3 |         {
 4 |             imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/aspect-slide-1.webp',
 5 |             imgAlt: 'New collection - ride the wave of excitement.',
 6 |         },
 7 |         {
 8 |             imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/aspect-slide-2.webp',
 9 |             imgAlt: 'Up to 30% discount, gear up for adventure.',
10 |         },
11 | 
12 |         {
13 |             imgSrc: 'https://penguinui.s3.amazonaws.com/component-assets/carousel/aspect-slide-3.webp',
14 |             imgAlt: '30% off all surfing essentials, ride like a pro.',
15 |         },    
16 |     ],            
17 |     currentSlideIndex: 1,
18 |     previous() {                
19 |         if (this.currentSlideIndex > 1) {                    
20 |             this.currentSlideIndex = this.currentSlideIndex - 1                
21 |         } else {   
22 |             // If it's the first slide, go to the last slide           
23 |             this.currentSlideIndex = this.slides.length                
24 |         }            
25 |     },            
26 |     next() {                
27 |         if (this.currentSlideIndex < this.slides.length) {                    
28 |             this.currentSlideIndex = this.currentSlideIndex + 1                
29 |         } else {                 
30 |             // If it's the last slide, go to the first slide    
31 |             this.currentSlideIndex = 1                
32 |         }            
33 |     },        
34 | }" class="relative w-full overflow-hidden">
35 | 
36 |     <!-- previous button -->
37 |     <button type="button" class="absolute left-5 top-1/2 z-20 flex rounded-full -translate-y-1/2 items-center justify-center bg-white/40 p-2 text-neutral-600 transition hover:bg-white/60 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:outline-offset-0 dark:bg-neutral-950/40 dark:text-neutral-300 dark:hover:bg-neutral-950/60 dark:focus-visible:outline-white" aria-label="previous slide" x-on:click="previous()">
38 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="3" class="size-5 md:size-6 pr-0.5" aria-hidden="true">
39 |             <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
40 |         </svg>
41 |     </button>
42 | 
43 |     <!-- next button -->
44 |     <button type="button" class="absolute right-5 top-1/2 z-20 flex rounded-full -translate-y-1/2 items-center justify-center bg-white/40 p-2 text-neutral-600 transition hover:bg-white/60 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-black active:outline-offset-0 dark:bg-neutral-950/40 dark:text-neutral-300 dark:hover:bg-neutral-950/60 dark:focus-visible:outline-white" aria-label="next slide" x-on:click="next()">
45 |         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none" stroke-width="3" class="size-5 md:size-6 pl-0.5" aria-hidden="true">
46 |             <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
47 |         </svg>
48 |     </button>
49 |    
50 |     <!-- slides -->
51 |     <!-- Change aspect-[3/1] to match your images aspect ratio -->
52 |     <div class="relative aspect-[3/1] w-full">
53 |         <template x-for="(slide, index) in slides">
54 |             <div x-cloak x-show="currentSlideIndex == index + 1" class="absolute inset-0" x-transition.opacity.duration.700ms>
55 |                 <img class="absolute w-full h-full inset-0 object-cover text-neutral-600 dark:text-neutral-300" x-bind:src="slide.imgSrc" x-bind:alt="slide.imgAlt" />
56 |             </div>
57 |         </template>
58 |     </div>
59 |     
60 |     <!-- indicators -->
61 |     <div class="absolute rounded-md bottom-3 md:bottom-5 left-1/2 z-20 flex -translate-x-1/2 gap-4 md:gap-3 bg-white/75 px-1.5 py-1 md:px-2 dark:bg-neutral-950/75" role="group" aria-label="slides" >
62 |         <template x-for="(slide, index) in slides">
63 |             <button class="size-2 cursor-pointer rounded-full transition bg-neutral-600 dark:bg-neutral-300" x-on:click="currentSlideIndex = index + 1" x-bind:class="[currentSlideIndex === index + 1 ? 'bg-neutral-600 dark:bg-neutral-300' : 'bg-neutral-600/50 dark:bg-neutral-300/50']" x-bind:aria-label="'slide ' + (index + 1)"></button>
64 |         </template>
65 |     </div>
66 | </div>


--------------------------------------------------------------------------------
/tailwind-v3/card/testimonial-card.html:
--------------------------------------------------------------------------------
 1 | <article class="group rounded-md flex max-w-md flex-col border border-neutral-300 bg-neutral-50 p-6 text-neutral-600 dark:border-neutral-700 dark:bg-neutral-900 dark:text-neutral-300">
 2 |     <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-12 text-neutral-900 dark:text-white group-hover:scale-105 transition duration-500 ease-out" aria-hidden="true">
 3 |         <path d="M12 12a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1h-1.388q0-.527.062-1.054.093-.558.31-.992t.559-.683q.34-.279.868-.279V3q-.868 0-1.52.372a3.3 3.3 0 0 0-1.085.992 4.9 4.9 0 0 0-.62 1.458A7.7 7.7 0 0 0 9 7.558V11a1 1 0 0 0 1 1zm-6 0a1 1 0 0 0 1-1V8.558a1 1 0 0 0-1-1H4.612q0-.527.062-1.054.094-.558.31-.992.217-.434.559-.683.34-.279.868-.279V3q-.868 0-1.52.372a3.3 3.3 0 0 0-1.085.992 4.9 4.9 0 0 0-.62 1.458A7.7 7.7 0 0 0 3 7.558V11a1 1 0 0 0 1 1z" />
 4 |     </svg>
 5 |     <p class="mt-2 text-pretty text-sm">
 6 |         Simply put, this software transformed my workflow! Its intuitive
 7 |         interface and powerful features make tasks a breeze. A game-changer
 8 |         for productivity!
 9 |     </p>
10 |     <!-- avatar & rating -->
11 |     <div class="flex flex-col-reverse md:flex-row md:items-center mt-8 justify-between gap-6">
12 |         <!-- avatar & title -->
13 |         <div class="flex items-center gap-2">
14 |             <img src="https://penguinui.s3.amazonaws.com/component-assets/avatar-1.webp" class="size-10 rounded-full object-cover" alt="avatar"/>
15 |             <div class="flex flex-col gap-1">
16 |                 <h3 class="font-bold leading-4 text-neutral-900 dark:text-white">Bob Johnson</h3>
17 |                 <span class="text-xs">CEO - TechNova</span>
18 |             </div>
19 |         </div>
20 |         <!-- Rating -->
21 |         <div class="flex items-center gap-1">
22 |             <span class="sr-only">Rated 4 stars</span>
23 |             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 text-amber-500" aria-hidden="true">
24 |                 <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
25 |             </svg>
26 |             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 text-amber-500" aria-hidden="true">
27 |                 <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
28 |             </svg>
29 |             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 text-amber-500" aria-hidden="true">
30 |                 <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
31 |             </svg>
32 |             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 text-amber-500" aria-hidden="true">
33 |                 <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
34 |             </svg>
35 |             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-4 text-neutral-600/50 dark:text-neutral-300/50" aria-hidden="true">
36 |                 <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.007 5.404.433c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.433 2.082-5.006z" clip-rule="evenodd" />
37 |             </svg>
38 |         </div>
39 |     </div>
40 | </article>


--------------------------------------------------------------------------------