Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Sarun Mungthanya
SpnPatch-Laravel
Commits
fb8995ec
Commit
fb8995ec
authored
Jun 21, 2024
by
Sarun Mungthanya
Browse files
main
parents
Changes
444
Hide whitespace changes
Inline
Side-by-side
Too many changes to show.
To preserve performance only
444 of 444+
files are displayed.
Plain diff
Email patch
resources/views/pages/components-carousel.blade.php
0 → 100644
View file @
fb8995ec
<x-app-layout
title=
"Swiper Component"
is-sidebar-open=
"true"
is-header-blur=
"true"
>
<main
class=
"main-content w-full px-[var(--margin-x)] pb-8"
>
<div
class=
"flex items-center space-x-4 py-5 lg:py-6"
>
<h2
class=
"text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl"
>
Swiper
</h2>
<div
class=
"hidden h-full py-1 sm:flex"
>
<div
class=
"h-full w-px bg-slate-300 dark:bg-navy-600"
></div>
</div>
<ul
class=
"hidden flex-wrap items-center space-x-2 sm:flex"
>
<li
class=
"flex items-center space-x-2"
>
<a
class=
"text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href=
"#"
>
Components
</a>
<svg
x-ignore
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M9 5l7 7-7 7"
/>
</svg>
</li>
<li>
Swiper
</li>
</ul>
</div>
<div
class=
"grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-5 lg:gap-6"
>
<div
class=
"space-y-4 sm:space-y-5 lg:space-y-6"
>
<!-- Default Carousel -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Default Carousel
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
<a
href=
"https://github.com/nolimits4web/swiper"
class=
"font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
Swiper
</a>
is the free and most modern mobile touch slider with hardware
accelerated transitions and amazing native behavior. Check out
code for detail of usage.
</p>
<div
class=
"mt-5"
>
<div
x-init=
"$nextTick(() => $el._x_swiper = new Swiper($el, { navigation: { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' } }))"
class=
"swiper rounded-lg"
>
<div
class=
"swiper-wrapper"
>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full object-cover object-top"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
</div>
<div
class=
"swiper-button-next"
></div>
<div
class=
"swiper-button-prev"
></div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
x-init=
"
$nextTick(()=
>
$el._x_swiper = new Swiper($el,{navigation: {prevEl:
'
.swiper-button-prev
'
,nextEl:
'
.swiper-button-next
'
}}))
"
class=
"
swiper rounded-lg
"
>
<
div class=
"
swiper-wrapper
">
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full object-cover object-top
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full object-cover object-center
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full object-cover object-center
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
/div
>
<
div class=
"
swiper-button-next
"><
/div
>
<
div class=
"
swiper-button-prev
"><
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
<!-- Lazy Loading Images -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Lazy Loading Images
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
<a
href=
"https://github.com/nolimits4web/swiper"
class=
"font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
Swiper
</a>
is the free and most modern mobile touch slider with hardware
accelerated transitions and amazing native behavior. Check out
code for detail of usage.
</p>
<div
class=
"mt-5"
>
<div
x-init=
"$nextTick(() => $el._x_swiper = new Swiper($el, { navigation: { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' }, pagination: { el: '.swiper-pagination', type: 'progressbar' }, lazy: true, }))"
class=
"swiper rounded-lg"
>
<div
class=
"swiper-wrapper"
>
<div
class=
"swiper-slide h-full"
>
<img
class=
"swiper-lazy h-full w-full object-cover"
data-src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<div
class=
"swiper-lazy-preloader"
></div>
</div>
<div
class=
"swiper-slide h-full"
>
<img
class=
"swiper-lazy h-full w-full object-cover"
data-src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<div
class=
"swiper-lazy-preloader"
></div>
</div>
<div
class=
"swiper-slide h-full"
>
<img
class=
"swiper-lazy h-full w-full object-cover"
data-src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<div
class=
"swiper-lazy-preloader"
></div>
</div>
<div
class=
"swiper-slide h-full"
>
<img
class=
"swiper-lazy h-full w-full object-cover"
data-src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
<div
class=
"swiper-lazy-preloader"
></div>
</div>
</div>
<div
class=
"swiper-pagination"
></div>
<div
class=
"swiper-button-next"
></div>
<div
class=
"swiper-button-prev"
></div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
x-init=
"
$nextTick(()=
>
$el._x_swiper = new Swiper($el,{ navigation: {prevEl:
'
.swiper-button-prev
'
, nextEl:
'
.swiper-button-next
'
}, pagination: { el:
'
.swiper-pagination
'
,type:
'
progressbar
'
},lazy: true,}))
"
class=
"
swiper rounded-lg
"
>
<
div class=
"
swiper-wrapper
">
<
div class=
"
swiper-slide h-full
">
<
img
class=
"
swiper-lazy h-full w-full object-cover
"
data-src=
"
images/800x600.png
"
alt=
""
/
>
<
div class=
"
swiper-lazy-preloader
"><
/div
>
<
/div
>
<
div class=
"
swiper-slide h-full
">
<
img
class=
"
swiper-lazy h-full w-full object-cover
"
data-src=
"
images/800x600.png
"
alt=
""
/
>
<
div class=
"
swiper-lazy-preloader
"><
/div
>
<
/div
>
<
div class=
"
swiper-slide h-full
">
<
img
class=
"
swiper-lazy h-full w-full object-cover
"
data-src=
"
images/800x600.png
"
alt=
""
/
>
<
div class=
"
swiper-lazy-preloader
"><
/div
>
<
/div
>
<
div class=
"
swiper-slide h-full
">
<
img
class=
"
swiper-lazy h-full w-full object-cover
"
data-src=
"
images/800x600.png
"
alt=
""
/
>
<
div class=
"
swiper-lazy-preloader
"><
/div
>
<
/div
>
<
/div
>
<
div class=
"
swiper-pagination
"><
/div
>
<
div class=
"
swiper-button-next
"><
/div
>
<
div class=
"
swiper-button-prev
"><
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
<!-- Space Between -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Space Between
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
<a
href=
"https://github.com/nolimits4web/swiper"
class=
"font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
Swiper
</a>
is the free and most modern mobile touch slider with hardware
accelerated transitions and amazing native behavior. Check out
code for detail of usage.
</p>
<div
class=
"mt-5"
>
<div
x-init=
"$nextTick(() => $el._x_swiper = new Swiper($el, { slidesPerView: 'auto', spaceBetween: 30, pagination: { el: '.swiper-pagination', clickable: true, } }))"
class=
"swiper"
>
<div
class=
"swiper-wrapper"
>
<div
class=
"swiper-slide !w-10/12"
>
<img
class=
"h-full w-full rounded-lg object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide !w-10/12"
>
<img
class=
"h-full w-full rounded-lg object-cover object-top"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide !w-10/12"
>
<img
class=
"h-full w-full rounded-lg object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide !w-10/12"
>
<img
class=
"h-full w-full rounded-lg object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
</div>
<div
class=
"swiper-pagination"
></div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
x-init=
"
$nextTick(() =
>
$el._x_swiper = new Swiper($el,{slidesPerView:
'
auto
'
,spaceBetween: 30,pagination: {el:
'
.swiper-pagination
'
,clickable: true,}}))
"
class=
"
swiper
"
>
<
div class=
"
swiper-wrapper
">
<
div class=
"
swiper-slide !w-10/12
">
<
img
class=
"
h-full w-full rounded-lg object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide !w-10/12
">
<
img
class=
"
h-full w-full rounded-lg object-cover object-top
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide !w-10/12
">
<
img
class=
"
h-full w-full rounded-lg object-cover object-center
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide !w-10/12
">
<
img
class=
"
h-full w-full rounded-lg object-cover object-center
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
/div
>
<
div class=
"
swiper-pagination
"><
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
<!-- Zoom -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Zoom
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
<a
href=
"https://github.com/nolimits4web/swiper"
class=
"font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
Swiper
</a>
is the free and most modern mobile touch slider with hardware
accelerated transitions and amazing native behavior. Check out
code for detail of usage.
</p>
<div
class=
"mt-5"
>
<div
x-init=
"$nextTick(() => $el._x_swiper = new Swiper($el, { navigation: { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' }, pagination: { el: '.swiper-pagination', clickable: true, }, zoom: { maxRatio: 4 } }))"
class=
"swiper"
>
<div
class=
"swiper-wrapper"
>
<div
class=
"swiper-slide"
>
<div
class=
"swiper-zoom-container"
>
<img
class=
"h-full w-full object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
</div>
<div
class=
"swiper-slide"
>
<div
class=
"swiper-zoom-container"
>
<img
class=
"h-full w-full object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
</div>
<div
class=
"swiper-slide"
>
<div
class=
"swiper-zoom-container"
>
<img
class=
"h-full w-full object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
</div>
<div
class=
"swiper-slide"
>
<div
class=
"swiper-zoom-container"
>
<img
class=
"h-full w-full object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
</div>
</div>
<div
class=
"swiper-pagination"
></div>
<div
class=
"swiper-button-next"
></div>
<div
class=
"swiper-button-prev"
></div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
x-init=
"
$nextTick(() =
>
$el._x_swiper = new Swiper($el,{navigation: {prevEl:
'
.swiper-button-prev
'
, nextEl:
'
.swiper-button-next
'
}, pagination: {el:
'
.swiper-pagination
'
,clickable: true,}, zoom: {maxRatio: 4}}))
"
class=
"
swiper
"
>
<
div class=
"
swiper-wrapper
">
<
div class=
"
swiper-slide
">
<
div class=
"
swiper-zoom-container
">
<
img
class=
"
h-full w-full object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
/div
>
<
div class=
"
swiper-slide
">
<
div class=
"
swiper-zoom-container
">
<
img
class=
"
h-full w-full object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
/div
>
<
div class=
"
swiper-slide
">
<
div class=
"
swiper-zoom-container
">
<
img
class=
"
h-full w-full object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
/div
>
<
div class=
"
swiper-slide
">
<
div class=
"
swiper-zoom-container
">
<
img
class=
"
h-full w-full object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
/div
>
<
/div
>
<
div class=
"
swiper-pagination
"><
/div
>
<
div class=
"
swiper-button-next
"><
/div
>
<
div class=
"
swiper-button-prev
"><
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
<!-- Flip Effect -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Flip Effect
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
<a
href=
"https://github.com/nolimits4web/swiper"
class=
"font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
Swiper
</a>
is the free and most modern mobile touch slider with hardware
accelerated transitions and amazing native behavior. Check out
code for detail of usage.
</p>
<div
class=
"mt-5"
>
<div
x-init=
"$nextTick(() => $el._x_swiper = new Swiper($el, { effect: 'flip', flipEffect: { slideShadows: false, }, navigation: { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' }, pagination: { el: '.swiper-pagination', clickable: true } }))"
class=
"swiper"
>
<div
class=
"swiper-wrapper"
>
<div
class=
"swiper-slide"
>
<div
class=
"swiper-zoom-container"
>
<img
class=
"h-full w-full object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
</div>
<div
class=
"swiper-slide"
>
<div
class=
"swiper-zoom-container"
>
<img
class=
"h-full w-full object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
</div>
<div
class=
"swiper-slide"
>
<div
class=
"swiper-zoom-container"
>
<img
class=
"h-full w-full object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
</div>
<div
class=
"swiper-slide"
>
<div
class=
"swiper-zoom-container"
>
<img
class=
"h-full w-full object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
</div>
</div>
<div
class=
"swiper-pagination"
></div>
<div
class=
"swiper-button-next"
></div>
<div
class=
"swiper-button-prev"
></div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
x-init=
"
$nextTick(() =
>
$el._x_swiper = new Swiper($el,{effect:
'
flip
'
,flipEffect: {slideShadows: false,}, navigation: { prevEl:
'
.swiper-button-prev
'
,nextEl:
'
.swiper-button-next
'
}, pagination: { el:
'
.swiper-pagination
'
, clickable: true}}))
"
class=
"
swiper
"
>
<
div class=
"
swiper-wrapper
">
<
div class=
"
swiper-slide
">
<
div class=
"
swiper-zoom-container
">
<
img
class=
"
h-full w-full object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
/div
>
<
div class=
"
swiper-slide
">
<
div class=
"
swiper-zoom-container
">
<
img
class=
"
h-full w-full object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
/div
>
<
div class=
"
swiper-slide
">
<
div class=
"
swiper-zoom-container
">
<
img
class=
"
h-full w-full object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
/div
>
<
div class=
"
swiper-slide
">
<
div class=
"
swiper-zoom-container
">
<
img
class=
"
h-full w-full object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
/div
>
<
/div
>
<
div class=
"
swiper-pagination
"><
/div
>
<
div class=
"
swiper-button-next
"><
/div
>
<
div class=
"
swiper-button-prev
"><
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
<!-- Cube Effect -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Cube Effect
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
<a
href=
"https://github.com/nolimits4web/swiper"
class=
"font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
Swiper
</a>
is the free and most modern mobile touch slider with hardware
accelerated transitions and amazing native behavior. Check out
code for detail of usage.
</p>
<div
class=
"mt-5"
>
<div
x-init=
"$nextTick(() => $el._x_swiper = new Swiper($el, { effect: 'cube', cubeEffect: { shadow: false }, pagination: { el: '.swiper-pagination', clickable: true } }))"
class=
"swiper"
>
<div
class=
"swiper-wrapper"
>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full rounded-lg object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full rounded-lg object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full rounded-lg object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full rounded-lg object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
</div>
<div
class=
"swiper-pagination"
></div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
x-init=
"
$nextTick(() =
>
$el._x_swiper = new Swiper($el,{effect:
'
cube
'
, cubeEffect: { shadow: false}, pagination: { el:
'
.swiper-pagination
'
, clickable: true}}))
"
class=
"
swiper
"
>
<
div class=
"
swiper-wrapper
">
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full rounded-lg object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full rounded-lg object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full rounded-lg object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full rounded-lg object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
/div
>
<
div class=
"
swiper-pagination
"><
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
<!-- Card Effect -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Card Effect
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
<a
href=
"https://github.com/nolimits4web/swiper"
class=
"font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
Swiper
</a>
is the free and most modern mobile touch slider with hardware
accelerated transitions and amazing native behavior. Check out
code for detail of usage.
</p>
<div
class=
"mx-auto mt-5 w-10/12"
>
<div
x-init=
"$nextTick(() => $el._x_swiper = new Swiper($el, { effect: 'cards', grabCursor: true }))"
class=
"swiper"
>
<div
class=
"swiper-wrapper"
>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full rounded-lg object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full rounded-lg object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full rounded-lg object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full rounded-lg object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
</div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
x-init=
"
$nextTick(() =
>
$el._x_swiper = new Swiper($el,{effect:
'
cards
'
, grabCursor: true}))
"
class=
"
swiper
"
>
<
div class=
"
swiper-wrapper
">
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full rounded-lg object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full rounded-lg object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full rounded-lg object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full rounded-lg object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
</div>
<div
class=
"space-y-4 sm:space-y-5 lg:space-y-6"
>
<!-- Pagination -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Pagination
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
<a
href=
"https://github.com/nolimits4web/swiper"
class=
"font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
Swiper
</a>
is the free and most modern mobile touch slider with hardware
accelerated transitions and amazing native behavior. Check out
code for detail of usage.
</p>
<div
class=
"mt-5"
>
<div
x-init=
"$nextTick(() => $el._x_swiper = new Swiper($el, { pagination: { el: '.swiper-pagination', clickable: true, } }))"
class=
"swiper rounded-lg"
>
<div
class=
"swiper-wrapper"
>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full object-cover object-top"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
</div>
<div
class=
"swiper-pagination"
></div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
x-init=
"
$nextTick(()=
>
$el._x_swiper = new Swiper($el,{ pagination: { el:
'
.swiper-pagination
'
, clickable: true,}}))
"
class=
"
swiper rounded-lg
"
>
<
div class=
"
swiper-wrapper
">
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full object-cover object-top
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full object-cover object-center
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full object-cover object-center
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
/div
>
<
div class=
"
swiper-pagination
"><
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
<!-- Vertical Slider -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Vertical Slider
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
<a
href=
"https://github.com/nolimits4web/swiper"
class=
"font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
Swiper
</a>
is the free and most modern mobile touch slider with hardware
accelerated transitions and amazing native behavior. Check out
code for detail of usage.
</p>
<div
class=
"mt-5"
>
<div
x-init=
"$nextTick(() => $el._x_swiper = new Swiper($el, { direction: 'vertical', pagination: { el: '.swiper-pagination', clickable: true } }))"
class=
"swiper h-64 rounded-lg"
>
<div
class=
"swiper-wrapper"
>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
</div>
<div
class=
"swiper-pagination"
></div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
x-init=
"
$nextTick(()=
>
$el._x_swiper = new Swiper($el, {direction:
'
vertical
'
,pagination: { el:
'
.swiper-pagination
'
,clickable: true}}))
"
class=
"
swiper h-64 rounded-lg
"
>
<
div class=
"
swiper-wrapper
">
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full object-cover object-center
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
/div
>
<
div class=
"
swiper-pagination
"><
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
<!-- With Scrollbar -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
With Scrollbar
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
<a
href=
"https://github.com/nolimits4web/swiper"
class=
"font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
Swiper
</a>
is the free and most modern mobile touch slider with hardware
accelerated transitions and amazing native behavior. Check out
code for detail of usage.
</p>
<div
class=
"mt-5"
>
<div
x-init=
"$nextTick(() => $el._x_swiper = new Swiper($el, { scrollbar: { el: '.swiper-scrollbar', draggable: true }, navigation: { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' }, autoplay: { delay: 2000 } }))"
class=
"swiper rounded-lg"
>
<div
class=
"swiper-wrapper"
>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full object-cover object-top"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
</div>
<div
class=
"swiper-scrollbar"
></div>
<div
class=
"swiper-button-next"
></div>
<div
class=
"swiper-button-prev"
></div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
x-init=
"
$nextTick(()=
>
$el._x_swiper = new Swiper($el, {scrollbar: {el:
'
.swiper-scrollbar
'
,draggable: true}, navigation: {prevEl:
'
.swiper-button-prev
'
,nextEl:
'
.swiper-button-next
'
},autoplay: {delay: 2000}}))
"
class=
"
swiper rounded-lg
"
>
<
div class=
"
swiper-wrapper
">
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full object-cover object-top
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full object-cover object-center
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full object-cover object-center
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
/div
>
<
div class=
"
swiper-scrollbar
"><
/div
>
<
div class=
"
swiper-button-next
"><
/div
>
<
div class=
"
swiper-button-prev
"><
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
<!-- Fade Effect -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Fade Effect
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
<a
href=
"https://github.com/nolimits4web/swiper"
class=
"font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
Swiper
</a>
is the free and most modern mobile touch slider with hardware
accelerated transitions and amazing native behavior. Check out
code for detail of usage.
</p>
<div
class=
"mt-5"
>
<div
x-init=
"$nextTick(() => $el._x_swiper = new Swiper($el, { effect: 'fade', pagination: { el: '.swiper-pagination', clickable: true }, navigation: { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' } }))"
class=
"swiper rounded-lg"
>
<div
class=
"swiper-wrapper"
>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full object-cover object-top"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
</div>
<div
class=
"swiper-button-next"
></div>
<div
class=
"swiper-button-prev"
></div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
x-init=
"
$nextTick(()=
>
$el._x_swiper = new Swiper($el, {effect:
'
fade
'
, pagination: { el:
'
.swiper-pagination
'
,clickable: true},navigation: {prevEl:
'
.swiper-button-prev
'
,nextEl:
'
.swiper-button-next
'
}}))
"
class=
"
swiper rounded-lg
"
>
<
div class=
"
swiper-wrapper
">
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full object-cover object-top
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full object-cover object-center
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full object-cover object-center
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
/div
>
<
div class=
"
swiper-button-next
"><
/div
>
<
div class=
"
swiper-button-prev
"><
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
<!-- Coverflow Effect -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Coverflow Effect
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
<a
href=
"https://github.com/nolimits4web/swiper"
class=
"font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
Swiper
</a>
is the free and most modern mobile touch slider with hardware
accelerated transitions and amazing native behavior. Check out
code for detail of usage.
</p>
<div
class=
"mt-5"
>
<div
x-init=
"$nextTick(() => $el._x_swiper = new Swiper($el, { effect: 'coverflow', coverflowEffect: { rotate: 35, slideShadows: false, }, navigation: { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' } }))"
class=
"swiper rounded-lg"
>
<div
class=
"swiper-wrapper"
>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full object-cover object-top"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
</div>
<div
class=
"swiper-button-next"
></div>
<div
class=
"swiper-button-prev"
></div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
x-init=
"
$nextTick(()=
>
$el._x_swiper = new Swiper($el, { effect:
'
coverflow
'
, coverflowEffect: {rotate: 35, slideShadows: false,}, navigation: {prevEl:
'
.swiper-button-prev
'
,nextEl:
'
.swiper-button-next
'
}}))
"
class=
"
swiper rounded-lg
"
>
<
div class=
"
swiper-wrapper
">
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full object-cover object-top
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full object-cover object-center
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full object-cover object-center
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
/div
>
<
div class=
"
swiper-button-next
"><
/div
>
<
div class=
"
swiper-button-prev
"><
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
<!-- Parallax -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Parallax
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
<a
href=
"https://github.com/nolimits4web/swiper"
class=
"font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
Swiper
</a>
is the free and most modern mobile touch slider with hardware
accelerated transitions and amazing native behavior. Check out
code for detail of usage.
</p>
<div
class=
"mt-5"
>
<div
x-init=
"$nextTick(() => $el._x_swiper = new Swiper($el, { parallax: true, navigation: { prevEl: '.swiper-button-prev', nextEl: '.swiper-button-next' } }))"
class=
"swiper swiper-parallax h-64 rounded-lg"
>
<div
class=
"parallax-bg"
style=
"background-image: url('/images/800x600.png');"
data-swiper-parallax=
"-23%"
></div>
<div
class=
"swiper-wrapper"
>
<div
class=
"swiper-slide p-6"
>
<div
class=
"title text-3xl font-light text-white"
data-swiper-parallax=
"-300"
>
Slide 1
</div>
<div
class=
"subtitle mt-2 text-2xl text-white"
data-swiper-parallax=
"-200"
>
Subtitle
</div>
<div
class=
"text mt-4 text-white"
data-swiper-parallax=
"-100"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Ab at, consectetur cupiditate debitis expedita
fugit, modi nemo nobis odit perferendis quaerat quia
reiciendis repudiandae rerum sed?
</p>
</div>
</div>
<div
class=
"swiper-slide p-6"
>
<div
class=
"title text-3xl font-light text-white"
data-swiper-parallax=
"-300"
>
Slide 2
</div>
<div
class=
"subtitle mt-2 text-2xl text-white"
data-swiper-parallax=
"-200"
>
Subtitle
</div>
<div
class=
"text mt-4 text-white"
data-swiper-parallax=
"-100"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Ab at, consectetur cupiditate debitis expedita
fugit, modi nemo nobis odit perferendis quaerat quia
reiciendis repudiandae rerum sed?
</p>
</div>
</div>
<div
class=
"swiper-slide p-6"
>
<div
class=
"title text-3xl font-light text-white"
data-swiper-parallax=
"-300"
>
Slide 3
</div>
<div
class=
"subtitle mt-2 text-2xl text-white"
data-swiper-parallax=
"-200"
>
Subtitle
</div>
<div
class=
"text mt-4 text-white"
data-swiper-parallax=
"-100"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Ab at, consectetur cupiditate debitis expedita
fugit, modi nemo nobis odit perferendis quaerat quia
reiciendis repudiandae rerum sed?
</p>
</div>
</div>
</div>
<div
class=
"swiper-button-next"
></div>
<div
class=
"swiper-button-prev"
></div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
x-init=
"
$nextTick(()=
>
$el._x_swiper = new Swiper($el, {parallax: true,navigation: { prevEl:
'
.swiper-button-prev
'
, nextEl:
'
.swiper-button-next
'
}}))
"
class=
"
swiper swiper-parallax h-64 rounded-lg
"
>
<
div
class=
"
parallax-bg
"
style=
"
background-image: url(
'
images/800x600.png
'
)
"
data-swiper-parallax=
"
-23%
"
><
/div
>
<
div class=
"
swiper-wrapper
">
<
div class=
"
swiper-slide p-6
">
<
div
class=
"
title text-3xl font-light text-white
"
data-swiper-parallax=
"
-300
"
>
Slide 1
<
/div
>
<
div
class=
"
subtitle mt-2 text-2xl text-white
"
data-swiper-parallax=
"
-200
"
>
Subtitle
<
/div
>
<
div class=
"
text mt-4 text-white
"
data-swiper-parallax=
"
-100
">
<
p
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab at,
consectetur cupiditate debitis expedita fugit, modi nemo nobis odit
perferendis quaerat quia reiciendis repudiandae rerum sed?
<
/p
>
<
/div
>
<
/div
>
<
div class=
"
swiper-slide p-6
">
<
div
class=
"
title text-3xl font-light text-white
"
data-swiper-parallax=
"
-300
"
>
Slide 2
<
/div
>
<
div
class=
"
subtitle mt-2 text-2xl text-white
"
data-swiper-parallax=
"
-200
"
>
Subtitle
<
/div
>
<
div class=
"
text mt-4 text-white
"
data-swiper-parallax=
"
-100
">
<
p
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab at,
consectetur cupiditate debitis expedita fugit, modi nemo nobis odit
perferendis quaerat quia reiciendis repudiandae rerum sed?
<
/p
>
<
/div
>
<
/div
>
<
div class=
"
swiper-slide p-6
">
<
div
class=
"
title text-3xl font-light text-white
"
data-swiper-parallax=
"
-300
"
>
Slide 3
<
/div
>
<
div
class=
"
subtitle mt-2 text-2xl text-white
"
data-swiper-parallax=
"
-200
"
>
Subtitle
<
/div
>
<
div class=
"
text mt-4 text-white
"
data-swiper-parallax=
"
-100
">
<
p
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab at,
consectetur cupiditate debitis expedita fugit, modi nemo nobis odit
perferendis quaerat quia reiciendis repudiandae rerum sed?
<
/p
>
<
/div
>
<
/div
>
<
/div
>
<
div class=
"
swiper-button-next
"><
/div
>
<
div class=
"
swiper-button-prev
"><
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
<!-- Creative Effect -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Creative Effect
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
<a
href=
"https://github.com/nolimits4web/swiper"
class=
"font-normal text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
Swiper
</a>
is the free and most modern mobile touch slider with hardware
accelerated transitions and amazing native behavior. Check out
code for detail of usage.
</p>
<div
class=
"mt-5"
>
<div
x-init=
"$nextTick(() => $el._x_swiper = new Swiper($el, { grabCursor: true, effect: 'creative', creativeEffect: { prev: { shadow: true, translate: ['-125%', 0, -800], rotate: [0, 0, -90] }, next: { shadow: true, translate: ['125%', 0, -800], rotate: [0, 0, 90] } } }))"
class=
"swiper rounded-lg"
>
<div
class=
"swiper-wrapper"
>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full rounded-lg object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full rounded-lg object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full rounded-lg object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"swiper-slide"
>
<img
class=
"h-full w-full rounded-lg object-cover"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
</div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
x-init=
"
$nextTick(()=
>
$el._x_swiper = new Swiper($el, { grabCursor: true, effect:
'
creative
'
, creativeEffect: { prev: { shadow: true, translate: [
'
-125%
'
, 0, -800], rotate: [0, 0, -90]}, next: { shadow: true,translate: [
'
125%
'
, 0, -800], rotate: [0, 0, 90]} }}))
"
class=
"
swiper rounded-lg
"
>
<
div class=
"
swiper-wrapper
">
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full rounded-lg object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full rounded-lg object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full rounded-lg object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
div class=
"
swiper-slide
">
<
img
class=
"
h-full w-full rounded-lg object-cover
"
src=
"
images/800x600.png
"
alt=
""
/
>
<
/div
>
<
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/components-collapse.blade.php
0 → 100644
View file @
fb8995ec
<x-app-layout
title=
"Collapse Component"
is-sidebar-open=
"true"
is-header-blur=
"true"
>
<!-- Main Content Wrapper -->
<main
class=
"main-content w-full px-[var(--margin-x)] pb-8"
>
<div
class=
"flex items-center space-x-4 py-5 lg:py-6"
>
<h2
class=
"text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl"
>
Collapse
</h2>
<div
class=
"hidden h-full py-1 sm:flex"
>
<div
class=
"h-full w-px bg-slate-300 dark:bg-navy-600"
></div>
</div>
<ul
class=
"hidden flex-wrap items-center space-x-2 sm:flex"
>
<li
class=
"flex items-center space-x-2"
>
<a
class=
"text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href=
"#"
>
Components
</a
>
<svg
x-ignore
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M9 5l7 7-7 7"
/>
</svg>
</li>
<li>
Collapse
</li>
</ul>
</div>
<div
class=
"grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6"
>
<!-- Basic Collapse -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Basic Collapse
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span
>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
The Collapse component is used to create regions of content that
can expand/collapse with a simple animation. It helps to hide
content that's not immediately relevant to the user. Check out
code for detail of usage.
</p>
<div
class=
"mt-5 flex flex-col"
>
<div
x-data=
"{expanded:false}"
>
<div
@
click=
"expanded = !expanded"
class=
"flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100"
>
<p>
Collapse Item 1
</p>
<div
:class=
"expanded && '-rotate-180'"
class=
"text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
>
<i
class=
"fas fa-chevron-down"
></i>
</div>
</div>
<div
x-collapse
x-show=
"expanded"
>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Commodi earum magni officiis possimus repellendus.
Accusantium adipisci aliquid praesentium quaerat
voluptate.
</p>
<div
class=
"flex space-x-2 pt-3"
>
<a
href=
"#"
class=
"tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 1
</a>
<a
href=
"#"
class=
"tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 2
</a>
</div>
</div>
</div>
</div>
<div
x-data=
"{expanded:false}"
>
<div
@
click=
"expanded = !expanded"
class=
"flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100"
>
<p>
Collapse Item 2
</p>
<div
:class=
"expanded && '-rotate-180'"
class=
"text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
>
<i
class=
"fas fa-chevron-down"
></i>
</div>
</div>
<div
x-collapse
x-show=
"expanded"
>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Commodi earum magni officiis possimus repellendus.
Accusantium adipisci aliquid praesentium quaerat
voluptate.
</p>
<div
class=
"flex space-x-2 pt-3"
>
<a
href=
"#"
class=
"tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 1
</a>
<a
href=
"#"
class=
"tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 2
</a>
</div>
</div>
</div>
</div>
<div
x-data=
"{expanded:false}"
>
<div
@
click=
"expanded = !expanded"
class=
"flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100"
>
<p>
Collapse Item 3
</p>
<div
:class=
"expanded && '-rotate-180'"
class=
"text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
>
<i
class=
"fas fa-chevron-down"
></i>
</div>
</div>
<div
x-collapse
x-show=
"expanded"
>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Commodi earum magni officiis possimus repellendus.
Accusantium adipisci aliquid praesentium quaerat
voluptate.
</p>
<div
class=
"flex space-x-2 pt-3"
>
<a
href=
"#"
class=
"tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 1
</a>
<a
href=
"#"
class=
"tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 2
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div class=
"
flex flex-col
">
<
div x-data=
"
{expanded:false}
">
<
div
@click=
"
expanded = !expanded
"
class=
"
flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100
"
>
<
p
>
Collapse Item 1
<
/p
>
<
div
:class=
"
expanded
&&
'
-rotate-180
'"
class=
"
text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300
"
>
<
i class=
"
fas fa-chevron-down
"><
/i
>
<
/div
>
<
/div
>
<
div x-collapse x-show=
"
expanded
">
<
div
>
<
p
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
<
/p
>
<
div class=
"
flex space-x-2 pt-3
">
<
a
href=
"
#
"
class=
"
tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light
"
>
Tag 1
<
/a
>
<
a
href=
"
#
"
class=
"
tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light
"
>
Tag 2
<
/a
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div x-data=
"
{expanded:false}
">
<
div
@click=
"
expanded = !expanded
"
class=
"
flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100
"
>
<
p
>
Collapse Item 2
<
/p
>
<
div
:class=
"
expanded
&&
'
-rotate-180
'"
class=
"
text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300
"
>
<
i class=
"
fas fa-chevron-down
"><
/i
>
<
/div
>
<
/div
>
<
div x-collapse x-show=
"
expanded
">
<
div
>
<
p
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
<
/p
>
<
div class=
"
flex space-x-2 pt-3
">
<
a
href=
"
#
"
class=
"
tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light
"
>
Tag 1
<
/a
>
<
a
href=
"
#
"
class=
"
tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light
"
>
Tag 2
<
/a
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div x-data=
"
{expanded:false}
">
<
div
@click=
"
expanded = !expanded
"
class=
"
flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100
"
>
<
p
>
Collapse Item 3
<
/p
>
<
div
:class=
"
expanded
&&
'
-rotate-180
'"
class=
"
text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300
"
>
<
i class=
"
fas fa-chevron-down
"><
/i
>
<
/div
>
<
/div
>
<
div x-collapse x-show=
"
expanded
">
<
div
>
<
p
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
<
/p
>
<
div class=
"
flex space-x-2 pt-3
">
<
a
href=
"
#
"
class=
"
tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light
"
>
Tag 1
<
/a
>
<
a
href=
"
#
"
class=
"
tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light
"
>
Tag 2
<
/a
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
<!-- Border Bottom -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Border Bottom
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span
>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
The Collapse component is used to create regions of content that
can expand/collapse with a simple animation. It helps to hide
content that's not immediately relevant to the user. Check out
code for detail of usage.
</p>
<div
class=
"mt-5 flex flex-col divide-y divide-slate-150 dark:divide-navy-500"
>
<div
x-data=
"{expanded:false}"
>
<div
@
click=
"expanded = !expanded"
class=
"flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100"
>
<p>
Collapse Item 1
</p>
<div
:class=
"expanded && '-rotate-180'"
class=
"text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
>
<i
class=
"fas fa-chevron-down"
></i>
</div>
</div>
<div
x-collapse
x-show=
"expanded"
>
<div
class=
"pb-4"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Commodi earum magni officiis possimus repellendus.
Accusantium adipisci aliquid praesentium quaerat
voluptate.
</p>
<div
class=
"flex space-x-2 pt-3"
>
<a
href=
"#"
class=
"tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 1
</a>
<a
href=
"#"
class=
"tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 2
</a>
</div>
</div>
</div>
</div>
<div
x-data=
"{expanded:false}"
>
<div
@
click=
"expanded = !expanded"
class=
"flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100"
>
<p>
Collapse Item 2
</p>
<div
:class=
"expanded && '-rotate-180'"
class=
"text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
>
<i
class=
"fas fa-chevron-down"
></i>
</div>
</div>
<div
x-collapse
x-show=
"expanded"
>
<div
class=
"pb-4"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Commodi earum magni officiis possimus repellendus.
Accusantium adipisci aliquid praesentium quaerat
voluptate.
</p>
<div
class=
"flex space-x-2 pt-3"
>
<a
href=
"#"
class=
"tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 1
</a>
<a
href=
"#"
class=
"tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 2
</a>
</div>
</div>
</div>
</div>
<div
x-data=
"{expanded:false}"
>
<div
@
click=
"expanded = !expanded"
class=
"flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100"
>
<p>
Collapse Item 3
</p>
<div
:class=
"expanded && '-rotate-180'"
class=
"text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
>
<i
class=
"fas fa-chevron-down"
></i>
</div>
</div>
<div
x-collapse
x-show=
"expanded"
>
<div
class=
"pb-4"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Commodi earum magni officiis possimus repellendus.
Accusantium adipisci aliquid praesentium quaerat
voluptate.
</p>
<div
class=
"flex space-x-2 pt-3"
>
<a
href=
"#"
class=
"tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 1
</a>
<a
href=
"#"
class=
"tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 2
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
class=
"
flex flex-col divide-y divide-slate-150 dark:divide-navy-500
"
>
<
div x-data=
"
{expanded:false}
">
<
div
@click=
"
expanded = !expanded
"
class=
"
flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100
"
>
<
p
>
Collapse Item 1
<
/p
>
<
div
:class=
"
expanded
&&
'
-rotate-180
'"
class=
"
text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300
"
>
<
i class=
"
fas fa-chevron-down
"><
/i
>
<
/div
>
<
/div
>
<
div x-collapse x-show=
"
expanded
">
<
div class=
"
pb-4
">
<
p
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
<
/p
>
<
div class=
"
flex space-x-2 pt-3
">
<
a
href=
"
#
"
class=
"
tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light
"
>
Tag 1
<
/a
>
<
a
href=
"
#
"
class=
"
tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light
"
>
Tag 2
<
/a
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div x-data=
"
{expanded:false}
">
<
div
@click=
"
expanded = !expanded
"
class=
"
flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100
"
>
<
p
>
Collapse Item 2
<
/p
>
<
div
:class=
"
expanded
&&
'
-rotate-180
'"
class=
"
text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300
"
>
<
i class=
"
fas fa-chevron-down
"><
/i
>
<
/div
>
<
/div
>
<
div x-collapse x-show=
"
expanded
">
<
div class=
"
pb-4
">
<
p
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
<
/p
>
<
div class=
"
flex space-x-2 pt-3
">
<
a
href=
"
#
"
class=
"
tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light
"
>
Tag 1
<
/a
>
<
a
href=
"
#
"
class=
"
tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light
"
>
Tag 2
<
/a
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div x-data=
"
{expanded:false}
">
<
div
@click=
"
expanded = !expanded
"
class=
"
flex cursor-pointer items-center justify-between py-4 text-base font-medium text-slate-700 dark:text-navy-100
"
>
<
p
>
Collapse Item 3
<
/p
>
<
div
:class=
"
expanded
&&
'
-rotate-180
'"
class=
"
text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300
"
>
<
i class=
"
fas fa-chevron-down
"><
/i
>
<
/div
>
<
/div
>
<
div x-collapse x-show=
"
expanded
">
<
div class=
"
pb-4
">
<
p
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
<
/p
>
<
div class=
"
flex space-x-2 pt-3
">
<
a
href=
"
#
"
class=
"
tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light
"
>
Tag 1
<
/a
>
<
a
href=
"
#
"
class=
"
tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light
"
>
Tag 2
<
/a
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
<!-- Full Bordered -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Full Bordered
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span
>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
The Collapse component is used to create regions of content that
can expand/collapse with a simple animation. It helps to hide
content that's not immediately relevant to the user. Check out
code for detail of usage.
</p>
<div
class=
"mt-5 flex flex-col divide-y divide-slate-150 rounded-lg border border-slate-150 dark:divide-navy-500 dark:border-navy-500"
>
<div
x-data=
"{expanded:false}"
>
<div
@
click=
"expanded = !expanded"
class=
"flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
>
<p>
Collapse Item 1
</p>
<div
:class=
"expanded && '-rotate-180'"
class=
"text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
>
<i
class=
"fas fa-chevron-down"
></i>
</div>
</div>
<div
x-collapse
x-show=
"expanded"
>
<div
class=
"px-4 pb-4 sm:px-5"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Commodi earum magni officiis possimus repellendus.
Accusantium adipisci aliquid praesentium quaerat
voluptate.
</p>
<div
class=
"flex space-x-2 pt-3"
>
<a
href=
"#"
class=
"tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 1
</a>
<a
href=
"#"
class=
"tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 2
</a>
</div>
</div>
</div>
</div>
<div
x-data=
"{expanded:false}"
>
<div
@
click=
"expanded = !expanded"
class=
"flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
>
<p>
Collapse Item 2
</p>
<div
:class=
"expanded && '-rotate-180'"
class=
"text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
>
<i
class=
"fas fa-chevron-down"
></i>
</div>
</div>
<div
x-collapse
x-show=
"expanded"
>
<div
class=
"px-4 pb-4 sm:px-5"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Commodi earum magni officiis possimus repellendus.
Accusantium adipisci aliquid praesentium quaerat
voluptate.
</p>
<div
class=
"flex space-x-2 pt-3"
>
<a
href=
"#"
class=
"tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 1
</a>
<a
href=
"#"
class=
"tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 2
</a>
</div>
</div>
</div>
</div>
<div
x-data=
"{expanded:false}"
>
<div
@
click=
"expanded = !expanded"
class=
"flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
>
<p>
Collapse Item 3
</p>
<div
:class=
"expanded && '-rotate-180'"
class=
"text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
>
<i
class=
"fas fa-chevron-down"
></i>
</div>
</div>
<div
x-collapse
x-show=
"expanded"
>
<div
class=
"px-4 pb-4 sm:px-5"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Commodi earum magni officiis possimus repellendus.
Accusantium adipisci aliquid praesentium quaerat
voluptate.
</p>
<div
class=
"flex space-x-2 pt-3"
>
<a
href=
"#"
class=
"tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 1
</a>
<a
href=
"#"
class=
"tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 2
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
class=
"
flex flex-col divide-y divide-slate-150 rounded-lg border border-slate-150 dark:divide-navy-500 dark:border-navy-500
"
>
<
div x-data=
"
{expanded:false}
">
<
div
@click=
"
expanded = !expanded
"
class=
"
flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5
"
>
<
p
>
Collapse Item 1
<
/p
>
<
div
:class=
"
expanded
&&
'
-rotate-180
'"
class=
"
text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300
"
>
<
i class=
"
fas fa-chevron-down
"><
/i
>
<
/div
>
<
/div
>
<
div x-collapse x-show=
"
expanded
">
<
div class=
"
px-4 pb-4 sm:px-5
">
<
p
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
<
/p
>
<
div class=
"
flex space-x-2 pt-3
">
<
a
href=
"
#
"
class=
"
tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light
"
>
Tag 1
<
/a
>
<
a
href=
"
#
"
class=
"
tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light
"
>
Tag 2
<
/a
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div x-data=
"
{expanded:false}
">
<
div
@click=
"
expanded = !expanded
"
class=
"
flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5
"
>
<
p
>
Collapse Item 2
<
/p
>
<
div
:class=
"
expanded
&&
'
-rotate-180
'"
class=
"
text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300
"
>
<
i class=
"
fas fa-chevron-down
"><
/i
>
<
/div
>
<
/div
>
<
div x-collapse x-show=
"
expanded
">
<
div class=
"
px-4 pb-4 sm:px-5
">
<
p
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
<
/p
>
<
div class=
"
flex space-x-2 pt-3
">
<
a
href=
"
#
"
class=
"
tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light
"
>
Tag 1
<
/a
>
<
a
href=
"
#
"
class=
"
tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light
"
>
Tag 2
<
/a
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div x-data=
"
{expanded:false}
">
<
div
@click=
"
expanded = !expanded
"
class=
"
flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5
"
>
<
p
>
Collapse Item 3
<
/p
>
<
div
:class=
"
expanded
&&
'
-rotate-180
'"
class=
"
text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300
"
>
<
i class=
"
fas fa-chevron-down
"><
/i
>
<
/div
>
<
/div
>
<
div x-collapse x-show=
"
expanded
">
<
div class=
"
px-4 pb-4 sm:px-5
">
<
p
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
<
/p
>
<
div class=
"
flex space-x-2 pt-3
">
<
a
href=
"
#
"
class=
"
tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light
"
>
Tag 1
<
/a
>
<
a
href=
"
#
"
class=
"
tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light
"
>
Tag 2
<
/a
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
<!-- Divided Items -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Divided Items
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span
>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
The Collapse component is used to create regions of content that
can expand/collapse with a simple animation. It helps to hide
content that's not immediately relevant to the user. Check out
code for detail of usage.
</p>
<div
class=
"mt-5 flex flex-col space-y-4 rounded-lg sm:space-y-5 lg:space-y-6"
>
<div
x-data=
"{expanded:false}"
class=
"rounded-lg border border-slate-150 dark:border-navy-500"
>
<div
@
click=
"expanded = !expanded"
class=
"flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
>
<p>
Collapse Item 1
</p>
<div
:class=
"expanded && '-rotate-180'"
class=
"text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
>
<i
class=
"fas fa-chevron-down"
></i>
</div>
</div>
<div
x-collapse
x-show=
"expanded"
>
<div
class=
"px-4 pb-4 sm:px-5"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Commodi earum magni officiis possimus repellendus.
Accusantium adipisci aliquid praesentium quaerat
voluptate.
</p>
<div
class=
"mt-4 flex justify-between"
>
<div
class=
"flex flex-wrap -space-x-2"
>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<div
class=
"is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
jd
</div>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
</div>
<button
class=
"btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 rotate-45"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
<div
x-data=
"{expanded:false}"
class=
"rounded-lg border border-slate-150 dark:border-navy-500"
>
<div
@
click=
"expanded = !expanded"
class=
"flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
>
<p>
Collapse Item 2
</p>
<div
:class=
"expanded && '-rotate-180'"
class=
"text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
>
<i
class=
"fas fa-chevron-down"
></i>
</div>
</div>
<div
x-collapse
x-show=
"expanded"
>
<div
class=
"px-4 pb-4 sm:px-5"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Commodi earum magni officiis possimus repellendus.
Accusantium adipisci aliquid praesentium quaerat
voluptate.
</p>
<div
class=
"mt-4 flex justify-between"
>
<div
class=
"flex flex-wrap -space-x-2"
>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<div
class=
"is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
jd
</div>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
</div>
<button
class=
"btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 rotate-45"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
<div
x-data=
"{expanded:false}"
class=
"rounded-lg border border-slate-150 dark:border-navy-500"
>
<div
@
click=
"expanded = !expanded"
class=
"flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5"
>
<p>
Collapse Item 3
</p>
<div
:class=
"expanded && '-rotate-180'"
class=
"text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300"
>
<i
class=
"fas fa-chevron-down"
></i>
</div>
</div>
<div
x-collapse
x-show=
"expanded"
>
<div
class=
"px-4 pb-4 sm:px-5"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Commodi earum magni officiis possimus repellendus.
Accusantium adipisci aliquid praesentium quaerat
voluptate.
</p>
<div
class=
"mt-4 flex justify-between"
>
<div
class=
"flex flex-wrap -space-x-2"
>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<div
class=
"is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
jd
</div>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
</div>
<button
class=
"btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 rotate-45"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
class=
"
flex flex-col space-y-4 rounded-lg sm:space-y-5 lg:space-y-6
"
>
<
div
x-data=
"
{expanded:false}
"
class=
"
rounded-lg border border-slate-150 dark:border-navy-500
"
>
<
div
@click=
"
expanded = !expanded
"
class=
"
flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5
"
>
<
p
>
Collapse Item 1
<
/p
>
<
div
:class=
"
expanded
&&
'
-rotate-180
'"
class=
"
text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300
"
>
<
i class=
"
fas fa-chevron-down
"><
/i
>
<
/div
>
<
/div
>
<
div x-collapse x-show=
"
expanded
">
<
div class=
"
px-4 pb-4 sm:px-5
">
<
p
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
<
/p
>
<
div class=
"
mt-4 flex justify-between
">
<
div class=
"
flex flex-wrap -space-x-2
">
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
img
class=
"
rounded-full ring ring-white dark:ring-navy-700
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
div
class=
"
is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700
"
>
jd
<
/div
>
<
/div
>
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
img
class=
"
rounded-full ring ring-white dark:ring-navy-700
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
img
class=
"
rounded-full ring ring-white dark:ring-navy-700
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
img
class=
"
rounded-full ring ring-white dark:ring-navy-700
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
/div
>
<
button
class=
"
btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90
"
>
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-5 w-5 rotate-45
"
fill=
"
none
"
viewBox=
"
0 0 24 24
"
stroke=
"
currentColor
"
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
stroke-width=
"
2
"
d=
"
M7 11l5-5m0 0l5 5m-5-5v12
"
/
>
<
/svg
>
<
/button
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
x-data=
"
{expanded:false}
"
class=
"
rounded-lg border border-slate-150 dark:border-navy-500
"
>
<
div
@click=
"
expanded = !expanded
"
class=
"
flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5
"
>
<
p
>
Collapse Item 2
<
/p
>
<
div
:class=
"
expanded
&&
'
-rotate-180
'"
class=
"
text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300
"
>
<
i class=
"
fas fa-chevron-down
"><
/i
>
<
/div
>
<
/div
>
<
div x-collapse x-show=
"
expanded
">
<
div class=
"
px-4 pb-4 sm:px-5
">
<
p
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
<
/p
>
<
div class=
"
mt-4 flex justify-between
">
<
div class=
"
flex flex-wrap -space-x-2
">
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
img
class=
"
rounded-full ring ring-white dark:ring-navy-700
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
div
class=
"
is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700
"
>
jd
<
/div
>
<
/div
>
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
img
class=
"
rounded-full ring ring-white dark:ring-navy-700
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
img
class=
"
rounded-full ring ring-white dark:ring-navy-700
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
img
class=
"
rounded-full ring ring-white dark:ring-navy-700
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
/div
>
<
button
class=
"
btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90
"
>
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-5 w-5 rotate-45
"
fill=
"
none
"
viewBox=
"
0 0 24 24
"
stroke=
"
currentColor
"
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
stroke-width=
"
2
"
d=
"
M7 11l5-5m0 0l5 5m-5-5v12
"
/
>
<
/svg
>
<
/button
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
x-data=
"
{expanded:false}
"
class=
"
rounded-lg border border-slate-150 dark:border-navy-500
"
>
<
div
@click=
"
expanded = !expanded
"
class=
"
flex cursor-pointer items-center justify-between px-4 py-4 text-base font-medium text-slate-700 dark:text-navy-100 sm:px-5
"
>
<
p
>
Collapse Item 3
<
/p
>
<
div
:class=
"
expanded
&&
'
-rotate-180
'"
class=
"
text-sm font-normal leading-none text-slate-400 transition-transform duration-300 dark:text-navy-300
"
>
<
i class=
"
fas fa-chevron-down
"><
/i
>
<
/div
>
<
/div
>
<
div x-collapse x-show=
"
expanded
">
<
div class=
"
px-4 pb-4 sm:px-5
">
<
p
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
<
/p
>
<
div class=
"
mt-4 flex justify-between
">
<
div class=
"
flex flex-wrap -space-x-2
">
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
img
class=
"
rounded-full ring ring-white dark:ring-navy-700
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
div
class=
"
is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700
"
>
jd
<
/div
>
<
/div
>
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
img
class=
"
rounded-full ring ring-white dark:ring-navy-700
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
img
class=
"
rounded-full ring ring-white dark:ring-navy-700
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
img
class=
"
rounded-full ring ring-white dark:ring-navy-700
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
/div
>
<
button
class=
"
btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90
"
>
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-5 w-5 rotate-45
"
fill=
"
none
"
viewBox=
"
0 0 24 24
"
stroke=
"
currentColor
"
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
stroke-width=
"
2
"
d=
"
M7 11l5-5m0 0l5 5m-5-5v12
"
/
>
<
/svg
>
<
/button
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
<!-- Primary Collapse -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Primary Collapse
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span
>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
The Collapse component is used to create regions of content that
can expand/collapse with a simple animation. It helps to hide
content that's not immediately relevant to the user. Check out
code for detail of usage.
</p>
<div
class=
"mt-5 flex flex-col divide-y divide-indigo-400 overflow-hidden rounded-lg border border-primary dark:border-accent"
>
<div
x-data=
"{expanded:false}"
>
<div
@
click=
"expanded = !expanded"
class=
"flex cursor-pointer items-center justify-between bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5"
>
<p>
Collapse Item 1
</p>
<div
:class=
"expanded && '-rotate-180'"
class=
"text-sm font-normal leading-none text-indigo-100 transition-transform duration-300"
>
<i
class=
"fas fa-chevron-down"
></i>
</div>
</div>
<div
x-collapse
x-show=
"expanded"
>
<div
class=
"px-4 py-4 sm:px-5"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Commodi earum magni officiis possimus repellendus.
Accusantium adipisci aliquid praesentium quaerat
voluptate.
</p>
<div
class=
"flex space-x-2 pt-3"
>
<a
href=
"#"
class=
"tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 1
</a>
<a
href=
"#"
class=
"tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 2
</a>
</div>
</div>
</div>
</div>
<div
x-data=
"{expanded:false}"
>
<div
@
click=
"expanded = !expanded"
class=
"flex cursor-pointer items-center justify-between bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5"
>
<p>
Collapse Item 2
</p>
<div
:class=
"expanded && '-rotate-180'"
class=
"text-sm font-normal leading-none text-indigo-100 transition-transform duration-300"
>
<i
class=
"fas fa-chevron-down"
></i>
</div>
</div>
<div
x-collapse
x-show=
"expanded"
>
<div
class=
"px-4 py-4 sm:px-5"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Commodi earum magni officiis possimus repellendus.
Accusantium adipisci aliquid praesentium quaerat
voluptate.
</p>
<div
class=
"flex space-x-2 pt-3"
>
<a
href=
"#"
class=
"tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 1
</a>
<a
href=
"#"
class=
"tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 2
</a>
</div>
</div>
</div>
</div>
<div
x-data=
"{expanded:false}"
>
<div
@
click=
"expanded = !expanded"
class=
"flex cursor-pointer items-center justify-between bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5"
>
<p>
Collapse Item 3
</p>
<div
:class=
"expanded && '-rotate-180'"
class=
"text-sm font-normal leading-none text-indigo-100 transition-transform duration-300"
>
<i
class=
"fas fa-chevron-down"
></i>
</div>
</div>
<div
x-collapse
x-show=
"expanded"
>
<div
class=
"px-4 py-4 sm:px-5"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Commodi earum magni officiis possimus repellendus.
Accusantium adipisci aliquid praesentium quaerat
voluptate.
</p>
<div
class=
"flex space-x-2 pt-3"
>
<a
href=
"#"
class=
"tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 1
</a>
<a
href=
"#"
class=
"tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light"
>
Tag 2
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
class=
"
flex flex-col divide-y divide-indigo-400 overflow-hidden rounded-lg border border-primary dark:border-accent
"
>
<
div x-data=
"
{expanded:false}
">
<
div
@click=
"
expanded = !expanded
"
class=
"
flex cursor-pointer items-center justify-between bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5
"
>
<
p
>
Collapse Item 1
<
/p
>
<
div
:class=
"
expanded
&&
'
-rotate-180
'"
class=
"
text-sm font-normal leading-none text-indigo-100 transition-transform duration-300
"
>
<
i class=
"
fas fa-chevron-down
"><
/i
>
<
/div
>
<
/div
>
<
div x-collapse x-show=
"
expanded
">
<
div class=
"
px-4 py-4 sm:px-5
">
<
p
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
<
/p
>
<
div class=
"
flex space-x-2 pt-3
">
<
a
href=
"
#
"
class=
"
tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light
"
>
Tag 1
<
/a
>
<
a
href=
"
#
"
class=
"
tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light
"
>
Tag 2
<
/a
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div x-data=
"
{expanded:false}
">
<
div
@click=
"
expanded = !expanded
"
class=
"
flex cursor-pointer items-center justify-between bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5
"
>
<
p
>
Collapse Item 2
<
/p
>
<
div
:class=
"
expanded
&&
'
-rotate-180
'"
class=
"
text-sm font-normal leading-none text-indigo-100 transition-transform duration-300
"
>
<
i class=
"
fas fa-chevron-down
"><
/i
>
<
/div
>
<
/div
>
<
div x-collapse x-show=
"
expanded
">
<
div class=
"
px-4 py-4 sm:px-5
">
<
p
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
<
/p
>
<
div class=
"
flex space-x-2 pt-3
">
<
a
href=
"
#
"
class=
"
tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light
"
>
Tag 1
<
/a
>
<
a
href=
"
#
"
class=
"
tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light
"
>
Tag 2
<
/a
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div x-data=
"
{expanded:false}
">
<
div
@click=
"
expanded = !expanded
"
class=
"
flex cursor-pointer items-center justify-between bg-primary px-4 py-4 text-base font-medium text-white dark:bg-accent sm:px-5
"
>
<
p
>
Collapse Item 3
<
/p
>
<
div
:class=
"
expanded
&&
'
-rotate-180
'"
class=
"
text-sm font-normal leading-none text-indigo-100 transition-transform duration-300
"
>
<
i class=
"
fas fa-chevron-down
"><
/i
>
<
/div
>
<
/div
>
<
div x-collapse x-show=
"
expanded
">
<
div class=
"
px-4 py-4 sm:px-5
">
<
p
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
<
/p
>
<
div class=
"
flex space-x-2 pt-3
">
<
a
href=
"
#
"
class=
"
tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light
"
>
Tag 1
<
/a
>
<
a
href=
"
#
"
class=
"
tag rounded-full border border-primary text-primary dark:border-accent-light dark:text-accent-light
"
>
Tag 2
<
/a
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
<!-- Advanced Collapse -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Advanced Collapse
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span
>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
The Collapse component is used to create regions of content that
can expand/collapse with a simple animation. It helps to hide
content that's not immediately relevant to the user. Check out
code for detail of usage.
</p>
<div
class=
"mt-5 flex flex-col space-y-4 sm:space-y-5 lg:space-y-6"
>
<div
x-data=
"{expanded:false}"
class=
"overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500"
>
<div
class=
"flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5"
>
<div
class=
"flex items-center space-x-3.5 tracking-wide outline-none transition-all"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
<div>
<p
class=
"text-slate-700 line-clamp-1 dark:text-navy-100"
>
Simon Tods
</p>
<p
class=
"text-xs text-slate-500 dark:text-navy-300"
>
Web Developer
</p>
</div>
</div>
<button
@
click=
"expanded = !expanded"
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<i
:class=
"expanded && '-rotate-180'"
class=
"fas fa-chevron-down text-sm transition-transform"
></i>
</button>
</div>
<div
x-collapse
x-show=
"expanded"
>
<div
class=
"px-4 py-4 sm:px-5"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Commodi earum magni officiis possimus repellendus.
Accusantium adipisci aliquid praesentium quaerat
voluptate.
</p>
<div
class=
"mt-4 flex justify-between"
>
<div
class=
"flex flex-wrap -space-x-2"
>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<div
class=
"is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
jd
</div>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
</div>
<button
class=
"btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 rotate-45"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
<div
x-data=
"{expanded:false}"
class=
"overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500"
>
<div
class=
"flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5"
>
<div
class=
"flex items-center space-x-3.5 tracking-wide outline-none transition-all"
>
<div
class=
"avatar h-10 w-10"
>
<div
class=
"is-initial rounded-full bg-warning uppercase text-white"
>
KG
</div>
</div>
<div>
<p
class=
"text-slate-700 line-clamp-1 dark:text-navy-100"
>
Konnor Guzman
</p>
<p
class=
"text-xs text-slate-500 dark:text-navy-300"
>
Frontend Developer
</p>
</div>
</div>
<button
@
click=
"expanded = !expanded"
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<i
:class=
"expanded && '-rotate-180'"
class=
"fas fa-chevron-down text-sm transition-transform"
></i>
</button>
</div>
<div
x-collapse
x-show=
"expanded"
>
<div
class=
"px-4 py-4 sm:px-5"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Commodi earum magni officiis possimus repellendus.
Accusantium adipisci aliquid praesentium quaerat
voluptate.
</p>
<div
class=
"mt-4 flex justify-between"
>
<div
class=
"flex flex-wrap -space-x-2"
>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<div
class=
"is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
jd
</div>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
</div>
<button
class=
"btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 rotate-45"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
<div
x-data=
"{expanded:false}"
class=
"overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500"
>
<div
class=
"flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5"
>
<div
class=
"flex items-center space-x-3.5 tracking-wide outline-none transition-all"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
<div>
<p
class=
"text-slate-700 line-clamp-1 dark:text-navy-100"
>
Derrick Simmons
</p>
<p
class=
"text-xs text-slate-500 dark:text-navy-300"
>
UI/UX Designer
</p>
</div>
</div>
<button
@
click=
"expanded = !expanded"
class=
"btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<i
:class=
"expanded && '-rotate-180'"
class=
"fas fa-chevron-down text-sm transition-transform"
></i>
</button>
</div>
<div
x-collapse
x-show=
"expanded"
>
<div
class=
"px-4 py-4 sm:px-5"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Commodi earum magni officiis possimus repellendus.
Accusantium adipisci aliquid praesentium quaerat
voluptate.
</p>
<div
class=
"mt-4 flex justify-between"
>
<div
class=
"flex flex-wrap -space-x-2"
>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<div
class=
"is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700"
>
jd
</div>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
<div
class=
"avatar h-7 w-7 hover:z-10"
>
<img
class=
"rounded-full ring ring-white dark:ring-navy-700"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
</div>
<button
class=
"btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 rotate-45"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M7 11l5-5m0 0l5 5m-5-5v12"
/>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div class=
"
flex flex-col space-y-4 sm:space-y-5 lg:space-y-6
">
<
div
x-data=
"
{expanded:false}
"
class=
"
overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500
"
>
<
div
class=
"
flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5
"
>
<
div
class=
"
flex items-center space-x-3.5 tracking-wide outline-none transition-all
"
>
<
div class=
"
avatar h-10 w-10
">
<
img
class=
"
rounded-full
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
div
>
<
p class=
"
text-slate-700 line-clamp-1 dark:text-navy-100
">
Simon Tods
<
/p
>
<
p class=
"
text-xs text-slate-500 dark:text-navy-300
">
Web Developer
<
/p
>
<
/div
>
<
/div
>
<
button
@click=
"
expanded = !expanded
"
class=
"
btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25
"
>
<
i
:class=
"
expanded
&&
'
-rotate-180
'"
class=
"
fas fa-chevron-down text-sm transition-transform
"
><
/i
>
<
/button
>
<
/div
>
<
div x-collapse x-show=
"
expanded
">
<
div class=
"
px-4 py-4 sm:px-5
">
<
p
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
<
/p
>
<
div class=
"
mt-4 flex justify-between
">
<
div class=
"
flex flex-wrap -space-x-2
">
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
img
class=
"
rounded-full ring ring-white dark:ring-navy-700
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
div
class=
"
is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700
"
>
jd
<
/div
>
<
/div
>
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
img
class=
"
rounded-full ring ring-white dark:ring-navy-700
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
img
class=
"
rounded-full ring ring-white dark:ring-navy-700
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
img
class=
"
rounded-full ring ring-white dark:ring-navy-700
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
/div
>
<
button
class=
"
btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90
"
>
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-5 w-5 rotate-45
"
fill=
"
none
"
viewBox=
"
0 0 24 24
"
stroke=
"
currentColor
"
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
stroke-width=
"
2
"
d=
"
M7 11l5-5m0 0l5 5m-5-5v12
"
/
>
<
/svg
>
<
/button
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
x-data=
"
{expanded:false}
"
class=
"
overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500
"
>
<
div
class=
"
flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5
"
>
<
div
class=
"
flex items-center space-x-3.5 tracking-wide outline-none transition-all
"
>
<
div class=
"
avatar h-10 w-10
">
<
div
class=
"
is-initial rounded-full bg-warning uppercase text-white
"
>
KG
<
/div
>
<
/div
>
<
div
>
<
p class=
"
text-slate-700 line-clamp-1 dark:text-navy-100
">
Konnor Guzman
<
/p
>
<
p class=
"
text-xs text-slate-500 dark:text-navy-300
">
Frontend Developer
<
/p
>
<
/div
>
<
/div
>
<
button
@click=
"
expanded = !expanded
"
class=
"
btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25
"
>
<
i
:class=
"
expanded
&&
'
-rotate-180
'"
class=
"
fas fa-chevron-down text-sm transition-transform
"
><
/i
>
<
/button
>
<
/div
>
<
div x-collapse x-show=
"
expanded
">
<
div class=
"
px-4 py-4 sm:px-5
">
<
p
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
<
/p
>
<
div class=
"
mt-4 flex justify-between
">
<
div class=
"
flex flex-wrap -space-x-2
">
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
img
class=
"
rounded-full ring ring-white dark:ring-navy-700
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
div
class=
"
is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700
"
>
jd
<
/div
>
<
/div
>
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
img
class=
"
rounded-full ring ring-white dark:ring-navy-700
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
img
class=
"
rounded-full ring ring-white dark:ring-navy-700
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
img
class=
"
rounded-full ring ring-white dark:ring-navy-700
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
/div
>
<
button
class=
"
btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90
"
>
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-5 w-5 rotate-45
"
fill=
"
none
"
viewBox=
"
0 0 24 24
"
stroke=
"
currentColor
"
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
stroke-width=
"
2
"
d=
"
M7 11l5-5m0 0l5 5m-5-5v12
"
/
>
<
/svg
>
<
/button
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
div
x-data=
"
{expanded:false}
"
class=
"
overflow-hidden rounded-lg border border-slate-150 dark:border-navy-500
"
>
<
div
class=
"
flex items-center justify-between bg-slate-150 px-4 py-4 dark:bg-navy-500 sm:px-5
"
>
<
div
class=
"
flex items-center space-x-3.5 tracking-wide outline-none transition-all
"
>
<
div class=
"
avatar h-10 w-10
">
<
img
class=
"
rounded-full
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
div
>
<
p class=
"
text-slate-700 line-clamp-1 dark:text-navy-100
">
Derrick Simmons
<
/p
>
<
p class=
"
text-xs text-slate-500 dark:text-navy-300
">
UI/UX Designer
<
/p
>
<
/div
>
<
/div
>
<
button
@click=
"
expanded = !expanded
"
class=
"
btn -mr-1.5 h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25
"
>
<
i
:class=
"
expanded
&&
'
-rotate-180
'"
class=
"
fas fa-chevron-down text-sm transition-transform
"
><
/i
>
<
/button
>
<
/div
>
<
div x-collapse x-show=
"
expanded
">
<
div class=
"
px-4 py-4 sm:px-5
">
<
p
>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi
earum magni officiis possimus repellendus. Accusantium adipisci
aliquid praesentium quaerat voluptate.
<
/p
>
<
div class=
"
mt-4 flex justify-between
">
<
div class=
"
flex flex-wrap -space-x-2
">
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
img
class=
"
rounded-full ring ring-white dark:ring-navy-700
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
div
class=
"
is-initial rounded-full bg-info text-xs+ uppercase text-white ring ring-white dark:ring-navy-700
"
>
jd
<
/div
>
<
/div
>
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
img
class=
"
rounded-full ring ring-white dark:ring-navy-700
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
img
class=
"
rounded-full ring ring-white dark:ring-navy-700
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
div class=
"
avatar h-7 w-7 hover:z-10
">
<
img
class=
"
rounded-full ring ring-white dark:ring-navy-700
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
/div
>
<
button
class=
"
btn h-7 w-7 rounded-full bg-slate-150 p-0 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90
"
>
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-5 w-5 rotate-45
"
fill=
"
none
"
viewBox=
"
0 0 24 24
"
stroke=
"
currentColor
"
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
stroke-width=
"
2
"
d=
"
M7 11l5-5m0 0l5 5m-5-5v12
"
/
>
<
/svg
>
<
/button
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
</div>
</main>
</x-app-layout>
resources/views/pages/components-drawer.blade.php
0 → 100644
View file @
fb8995ec
<x-app-layout
title=
"Drawer Component"
is-sidebar-open=
"true"
is-header-blur=
"true"
>
<main
class=
"main-content w-full px-[var(--margin-x)] pb-8"
>
<div
class=
"flex items-center space-x-4 py-5 lg:py-6"
>
<h2
class=
"text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl"
>
Drawer
</h2>
<div
class=
"hidden h-full py-1 sm:flex"
>
<div
class=
"h-full w-px bg-slate-300 dark:bg-navy-600"
></div>
</div>
<ul
class=
"hidden flex-wrap items-center space-x-2 sm:flex"
>
<li
class=
"flex items-center space-x-2"
>
<a
class=
"text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href=
"#"
>
Components
</a>
<svg
x-ignore
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M9 5l7 7-7 7"
/>
</svg>
</li>
<li>
Drawer
</li>
</ul>
</div>
<div
class=
"grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6"
>
<!-- Left Drawer -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Left Drawer
</h2>
</div>
<div>
<p
class=
"max-w-xl"
>
Drawer is similar to modal, with a bit difference on placement.
Check out code for detail of usage.
</p>
<div
class=
"mt-5"
>
<button
@
click=
"$dispatch('show-drawer', { drawerId: 'left-drawer' })"
class=
"btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
Left Drawer
</button>
</div>
</div>
</div>
<!-- Right Drawer -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Right Drawer
</h2>
</div>
<div>
<p
class=
"max-w-xl"
>
Drawer is similar to modal, with a bit difference on placement.
Check out code for detail of usage.
</p>
<div
class=
"mt-5"
>
<button
@
click=
"$dispatch('show-drawer', { drawerId: 'right-drawer' })"
class=
"btn bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
>
Right Drawer
</button>
</div>
</div>
</div>
</div>
</main>
<div
x-show=
"showDrawer"
x-data=
"{ showDrawer: false }"
x-on:show-drawer.window=
"($event.detail.drawerId === 'left-drawer') && (showDrawer = true)"
@
keydown.window.escape=
"showDrawer = false"
>
<div
class=
"fixed inset-0 z-[100] bg-slate-900/60 transition-opacity duration-200"
@
click=
"showDrawer = false"
x-show=
"showDrawer"
x-transition:enter=
"ease-out"
x-transition:enter-start=
"opacity-0"
x-transition:enter-end=
"opacity-100"
x-transition:leave=
"ease-in"
x-transition:leave-start=
"opacity-100"
x-transition:leave-end=
"opacity-0"
></div>
<div
class=
"fixed left-0 top-0 z-[101] h-full w-72"
>
<div
class=
"flex h-full w-full transform-gpu flex-col bg-white transition-transform duration-200 dark:bg-navy-700"
x-show=
"showDrawer"
x-transition:enter=
"ease-out"
x-transition:enter-start=
"-translate-x-full"
x-transition:enter-end=
"translate-x-0"
x-transition:leave=
"ease-in"
x-transition:leave-start=
"translate-x-0"
x-transition:leave-end=
"-translate-x-full"
>
<div
class=
"h-24"
>
<img
class=
"h-full w-full object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"flex space-x-5 px-5"
>
<div
class=
"avatar -mt-5 h-20 w-20"
>
<img
class=
"rounded-full border-2 border-white dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"mt-2 w-full"
>
<div
class=
"flex justify-between space-x-3"
>
<h4
class=
"text-base font-medium text-slate-700 line-clamp-1 dark:text-navy-50"
>
John Doe
</h4>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-1.5 h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<a
href=
"#"
class=
"cursor-pointer text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
@johndoe
</a>
</div>
</div>
<div
class=
"my-4 mx-5 h-px bg-slate-200 dark:bg-navy-500"
></div>
<ul
class=
"grow space-y-1.5 px-5 font-inter font-medium"
>
<li>
<a
class=
"flex items-center space-x-2 rounded-full bg-primary px-5 py-2.5 tracking-wide text-white outline-none transition-all dark:bg-accent"
href=
"#"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
/>
</svg>
<span>
Getting start
</span>
</a>
</li>
<li>
<a
class=
"group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
href=
"#"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
d=
"M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"
/>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"
/>
</svg>
<span>
Shipping
</span>
</a>
</li>
<li>
<a
class=
"group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
href=
"#"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
viewBox=
"0 0 24 24"
fill=
"none"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
/>
</svg>
<span>
Payments
</span>
</a>
</li>
<li>
<a
class=
"group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
href=
"#"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M16 15v-1a4 4 0 00-4-4H8m0 0l3 3m-3-3l3-3m9 14V5a2 2 0 00-2-2H6a2 2 0 00-2 2v16l4-2 4 2 4-2 4 2z"
/>
</svg>
<span>
Returns
</span>
</a>
</li>
<li>
<a
class=
"group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
href=
"#"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<span>
My Account
</span>
</a>
</li>
<li>
<a
class=
"group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
href=
"#"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
viewBox=
"0 0 24 24"
fill=
"none"
>
<path
d=
"M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z"
stroke=
"currentColor"
stroke-width=
"1.5"
stroke-linecap=
"round"
stroke-linejoin=
"round"
/>
<path
d=
"M12.0449 15.8486C12.625 15.8486 13.1318 15.6729 13.5654 15.3213C13.999 14.9697 14.2393 14.5303 14.2861 14.0029H15.8242C15.7949 14.5479 15.6074 15.0664 15.2617 15.5586C14.916 16.0508 14.4531 16.4434 13.873 16.7363C13.2988 17.0293 12.6895 17.1758 12.0449 17.1758C10.75 17.1758 9.71875 16.7451 8.95117 15.8838C8.18945 15.0166 7.80859 13.833 7.80859 12.333V12.0605C7.80859 11.1348 7.97852 10.3115 8.31836 9.59082C8.6582 8.87012 9.14453 8.31055 9.77734 7.91211C10.416 7.51367 11.1689 7.31445 12.0361 7.31445C13.1025 7.31445 13.9873 7.63379 14.6904 8.27246C15.3994 8.91113 15.7773 9.74023 15.8242 10.7598H14.2861C14.2393 10.1445 14.0049 9.64062 13.583 9.24805C13.167 8.84961 12.6514 8.65039 12.0361 8.65039C11.21 8.65039 10.5684 8.94922 10.1113 9.54688C9.66016 10.1387 9.43457 10.9971 9.43457 12.1221V12.4297C9.43457 13.5254 9.66016 14.3691 10.1113 14.9609C10.5625 15.5527 11.207 15.8486 12.0449 15.8486Z"
fill=
"currentColor"
/>
</svg>
<span>
Copyright
&
Legal
</span>
</a>
</li>
</ul>
<div
class=
"p-5"
>
<button
@
click=
"showDrawer = false"
class=
"btn w-full space-x-2 bg-warning/10 font-medium text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
/>
</svg>
<span>
Logout
</span>
</button>
</div>
</div>
</div>
</div>
<div
x-show=
"showDrawer"
x-data=
"{ showDrawer: false }"
x-on:show-drawer.window=
"($event.detail.drawerId === 'right-drawer') && (showDrawer = true)"
@
keydown.window.escape=
"showDrawer = false"
>
<div
class=
"fixed inset-0 z-[100] bg-slate-900/60 transition-opacity duration-200"
@
click=
"showDrawer = false"
x-show=
"showDrawer"
x-transition:enter=
"ease-out"
x-transition:enter-start=
"opacity-0"
x-transition:enter-end=
"opacity-100"
x-transition:leave=
"ease-in"
x-transition:leave-start=
"opacity-100"
x-transition:leave-end=
"opacity-0"
></div>
<div
class=
"fixed right-0 top-0 z-[101] h-full w-72"
>
<div
class=
"flex h-full w-full transform-gpu flex-col bg-white transition-transform duration-200 dark:bg-navy-700"
x-show=
"showDrawer"
x-transition:enter=
"ease-out"
x-transition:enter-start=
"translate-x-full"
x-transition:enter-end=
"translate-x-0"
x-transition:leave=
"ease-in"
x-transition:leave-start=
"translate-x-0"
x-transition:leave-end=
"translate-x-full"
>
<div
class=
"h-24"
>
<img
class=
"h-full w-full object-cover object-center"
src=
"{{ asset('images/800x600.png') }}"
alt=
"image"
/>
</div>
<div
class=
"flex space-x-5 px-5"
>
<div
class=
"avatar -mt-5 h-20 w-20"
>
<img
class=
"rounded-full border-2 border-white dark:border-navy-700"
src=
"{{ asset('images/200x200.png') }}"
alt=
"avatar"
/>
</div>
<div
class=
"mt-2 w-full"
>
<div
class=
"flex justify-between space-x-3"
>
<h4
class=
"text-base font-medium text-slate-700 line-clamp-1 dark:text-navy-50"
>
John Doe
</h4>
<div
x-data=
"usePopper({ placement: 'bottom-end', offset: 4 })"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn -mr-1.5 h-6 w-6 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another
Action
</a>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something
else
</a>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated
Link
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<a
href=
"#"
class=
"cursor-pointer text-xs+ text-primary hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
>
@johndoe
</a>
</div>
</div>
<div
class=
"my-4 mx-5 h-px bg-slate-200 dark:bg-navy-500"
></div>
<ul
class=
"grow space-y-1.5 px-5 font-inter font-medium"
>
<li>
<a
class=
"flex items-center space-x-2 rounded-full bg-primary px-5 py-2.5 tracking-wide text-white outline-none transition-all dark:bg-accent"
href=
"#"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"
/>
</svg>
<span>
Getting start
</span>
</a>
</li>
<li>
<a
class=
"group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
href=
"#"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
d=
"M9 17a2 2 0 11-4 0 2 2 0 014 0zM19 17a2 2 0 11-4 0 2 2 0 014 0z"
/>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M13 16V6a1 1 0 00-1-1H4a1 1 0 00-1 1v10a1 1 0 001 1h1m8-1a1 1 0 01-1 1H9m4-1V8a1 1 0 011-1h2.586a1 1 0 01.707.293l3.414 3.414a1 1 0 01.293.707V16a1 1 0 01-1 1h-1m-6-1a1 1 0 001 1h1M5 17a2 2 0 104 0m-4 0a2 2 0 114 0m6 0a2 2 0 104 0m-4 0a2 2 0 114 0"
/>
</svg>
<span>
Shipping
</span>
</a>
</li>
<li>
<a
class=
"group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
href=
"#"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
viewBox=
"0 0 24 24"
fill=
"none"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"
/>
</svg>
<span>
Payments
</span>
</a>
</li>
<li>
<a
class=
"group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
href=
"#"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M16 15v-1a4 4 0 00-4-4H8m0 0l3 3m-3-3l3-3m9 14V5a2 2 0 00-2-2H6a2 2 0 00-2 2v16l4-2 4 2 4-2 4 2z"
/>
</svg>
<span>
Returns
</span>
</a>
</li>
<li>
<a
class=
"group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
href=
"#"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"1.5"
d=
"M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
/>
</svg>
<span>
My Account
</span>
</a>
</li>
<li>
<a
class=
"group flex space-x-2 rounded-full px-5 py-2.5 tracking-wide outline-none transition-all hover:bg-primary/10 hover:text-primary focus:bg-primary/10 focus:text-primary dark:hover:bg-accent-light/15 dark:hover:text-accent-light dark:focus:bg-accent-light/15 dark:focus:text-accent-light"
href=
"#"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5 text-slate-400 transition-colors group-hover:text-primary group-focus:text-primary dark:text-navy-300 dark:group-hover:text-accent dark:group-focus:text-accent"
viewBox=
"0 0 24 24"
fill=
"none"
>
<path
d=
"M21 12C21 13.1819 20.7672 14.3522 20.3149 15.4442C19.8626 16.5361 19.1997 17.5282 18.364 18.364C17.5282 19.1997 16.5361 19.8626 15.4442 20.3149C14.3522 20.7672 13.1819 21 12 21C10.8181 21 9.64778 20.7672 8.55585 20.3149C7.46392 19.8626 6.47177 19.1997 5.63604 18.364C4.80031 17.5282 4.13738 16.5361 3.68508 15.4442C3.23279 14.3522 3 13.1819 3 12C3 9.61305 3.94821 7.32387 5.63604 5.63604C7.32387 3.94821 9.61305 3 12 3C14.3869 3 16.6761 3.94821 18.364 5.63604C20.0518 7.32387 21 9.61305 21 12Z"
stroke=
"currentColor"
stroke-width=
"1.5"
stroke-linecap=
"round"
stroke-linejoin=
"round"
/>
<path
d=
"M12.0449 15.8486C12.625 15.8486 13.1318 15.6729 13.5654 15.3213C13.999 14.9697 14.2393 14.5303 14.2861 14.0029H15.8242C15.7949 14.5479 15.6074 15.0664 15.2617 15.5586C14.916 16.0508 14.4531 16.4434 13.873 16.7363C13.2988 17.0293 12.6895 17.1758 12.0449 17.1758C10.75 17.1758 9.71875 16.7451 8.95117 15.8838C8.18945 15.0166 7.80859 13.833 7.80859 12.333V12.0605C7.80859 11.1348 7.97852 10.3115 8.31836 9.59082C8.6582 8.87012 9.14453 8.31055 9.77734 7.91211C10.416 7.51367 11.1689 7.31445 12.0361 7.31445C13.1025 7.31445 13.9873 7.63379 14.6904 8.27246C15.3994 8.91113 15.7773 9.74023 15.8242 10.7598H14.2861C14.2393 10.1445 14.0049 9.64062 13.583 9.24805C13.167 8.84961 12.6514 8.65039 12.0361 8.65039C11.21 8.65039 10.5684 8.94922 10.1113 9.54688C9.66016 10.1387 9.43457 10.9971 9.43457 12.1221V12.4297C9.43457 13.5254 9.66016 14.3691 10.1113 14.9609C10.5625 15.5527 11.207 15.8486 12.0449 15.8486Z"
fill=
"currentColor"
/>
</svg>
<span>
Copyright
&
Legal
</span>
</a>
</li>
</ul>
<div
class=
"p-5"
>
<button
@
click=
"showDrawer = false"
class=
"btn w-full space-x-2 bg-warning/10 font-medium text-warning hover:bg-warning/20 focus:bg-warning/20 active:bg-warning/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
/>
</svg>
<span>
Logout
</span>
</button>
</div>
</div>
</div>
</div>
</x-app-layout>
resources/views/pages/components-dropdown.blade.php
0 → 100644
View file @
fb8995ec
<x-app-layout
title=
"Dropdown Component"
is-sidebar-open=
"true"
is-header-blur=
"true"
>
<main
class=
"main-content w-full px-[var(--margin-x)] pb-8"
>
<div
class=
"flex items-center space-x-4 py-5 lg:py-6"
>
<h2
class=
"text-xl font-medium text-slate-800 dark:text-navy-50 lg:text-2xl"
>
Dropdown
</h2>
<div
class=
"hidden h-full py-1 sm:flex"
>
<div
class=
"h-full w-px bg-slate-300 dark:bg-navy-600"
></div>
</div>
<ul
class=
"hidden flex-wrap items-center space-x-2 sm:flex"
>
<li
class=
"flex items-center space-x-2"
>
<a
class=
"text-primary transition-colors hover:text-primary-focus dark:text-accent-light dark:hover:text-accent"
href=
"#"
>
Components
</a
>
<svg
x-ignore
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
stroke-width=
"2"
d=
"M9 5l7 7-7 7"
/>
</svg>
</li>
<li>
Dropdown
</li>
</ul>
</div>
<div
class=
"grid grid-cols-1 gap-4 sm:gap-5 lg:gap-6"
>
<!-- Basic Dropdown -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Basic Dropdown
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span
>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
Dropdowns are lightweight context menus for housing navigation
and actions. Check out code for detail of usage.
</p>
<div
class=
"inline-space mt-5 flex flex-wrap items-end"
>
<div
x-data=
"usePopper({placement:'bottom-start',offset:4})"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
class=
"btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
>
<span>
Dropdown
</span>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4 transition-transform duration-200"
:class=
"isShowPopper && 'rotate-180'"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M19 9l-7 7-7-7"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another Action
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something else
</a
>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated Link
</a
>
</li>
</ul>
</div>
</div>
</div>
<div
x-data=
"usePopper({placement:'bottom-start',offset:4})"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
class=
"btn space-x-2 rounded-full bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
>
<span>
Dropdown
</span>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4 transition-transform duration-200"
:class=
"isShowPopper && 'rotate-180'"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M19 9l-7 7-7-7"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another Action
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something else
</a
>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated Link
</a
>
</li>
</ul>
</div>
</div>
</div>
<div
x-data=
"usePopper({placement:'bottom-end',offset:4})"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another Action
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something else
</a
>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated Link
</a
>
</li>
</ul>
</div>
</div>
</div>
<div
x-data=
"usePopper({placement:'bottom-end',offset:4})"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
class=
"btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-5 w-5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another Action
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something else
</a
>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Separated Link
</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
!-- First --
>
<
div
x-data=
"
usePopper({placement:
'
bottom-start
'
,offset:4})
"
@click.outside=
"
if(isShowPopper) isShowPopper = false
"
class=
"
inline-flex
"
>
<
button
class=
"
btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90
"
x-ref=
"
popperRef
"
@click=
"
isShowPopper = !isShowPopper
"
>
<
span
>
Dropdown
<
/span
>
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-4 w-4 transition-transform duration-200
"
:class=
"
isShowPopper
&&
'
rotate-180
'"
fill=
"
none
"
viewBox=
"
0 0 24 24
"
stroke=
"
currentColor
"
stroke-width=
"
2
"
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
d=
"
M19 9l-7 7-7-7
"
/
>
<
/svg
>
<
/button
>
<
div x-ref=
"
popperRoot
"
class=
"
popper-root
"
:class=
"
isShowPopper
&&
'
show
'">
<
div
class=
"
popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700
"
>
<
ul
>
<
li
>
<
a
href=
"
#
"
class=
"
flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Action
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Another Action
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Something else
<
/a
>
<
/li
>
<
/ul
>
<
div class=
"
my-1 h-px bg-slate-150 dark:bg-navy-500
"><
/div
>
<
ul
>
<
li
>
<
a
href=
"
#
"
class=
"
flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Separated Link
<
/a
>
<
/li
>
<
/ul
>
<
/div
>
<
/div
>
<
/div
>
<
!-- Second --
>
<
div
x-data=
"
usePopper({placement:
'
bottom-start
'
,offset:4})
"
@click.outside=
"
if(isShowPopper) isShowPopper = false
"
class=
"
inline-flex
"
>
<
button
class=
"
btn space-x-2 rounded-full bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90
"
x-ref=
"
popperRef
"
@click=
"
isShowPopper = !isShowPopper
"
>
<
span
>
Dropdown
<
/span
>
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-4 w-4 transition-transform duration-200
"
:class=
"
isShowPopper
&&
'
rotate-180
'"
fill=
"
none
"
viewBox=
"
0 0 24 24
"
stroke=
"
currentColor
"
stroke-width=
"
2
"
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
d=
"
M19 9l-7 7-7-7
"
/
>
<
/svg
>
<
/button
>
<
div x-ref=
"
popperRoot
"
class=
"
popper-root
"
:class=
"
isShowPopper
&&
'
show
'">
<
div
class=
"
popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700
"
>
<
ul
>
<
li
>
<
a
href=
"
#
"
class=
"
flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Action
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Another Action
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Something else
<
/a
>
<
/li
>
<
/ul
>
<
div class=
"
my-1 h-px bg-slate-150 dark:bg-navy-500
"><
/div
>
<
ul
>
<
li
>
<
a
href=
"
#
"
class=
"
flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Separated Link
<
/a
>
<
/li
>
<
/ul
>
<
/div
>
<
/div
>
<
/div
>
<
!-- Third --
>
<
div
x-data=
"
usePopper({placement:
'
bottom-end
'
,offset:4})
"
@click.outside=
"
if(isShowPopper) isShowPopper = false
"
class=
"
inline-flex
"
>
<
button
x-ref=
"
popperRef
"
@click=
"
isShowPopper = !isShowPopper
"
class=
"
btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25
"
>
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-5 w-5
"
fill=
"
none
"
viewBox=
"
0 0 24 24
"
stroke=
"
currentColor
"
stroke-width=
"
2
"
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
d=
"
M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z
"
/
>
<
/svg
>
<
/button
>
<
div x-ref=
"
popperRoot
"
class=
"
popper-root
"
:class=
"
isShowPopper
&&
'
show
'">
<
div
class=
"
popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700
"
>
<
ul
>
<
li
>
<
a
href=
"
#
"
class=
"
flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Action
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Another Action
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Something else
<
/a
>
<
/li
>
<
/ul
>
<
div class=
"
my-1 h-px bg-slate-150 dark:bg-navy-500
"><
/div
>
<
ul
>
<
li
>
<
a
href=
"
#
"
class=
"
flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Separated Link
<
/a
>
<
/li
>
<
/ul
>
<
/div
>
<
/div
>
<
/div
>
<
!-- Fourth --
>
<
div
x-data=
"
usePopper({placement:
'
bottom-end
'
,offset:4})
"
@click.outside=
"
if(isShowPopper) isShowPopper = false
"
class=
"
inline-flex
"
>
<
button
x-ref=
"
popperRef
"
@click=
"
isShowPopper = !isShowPopper
"
class=
"
btn h-8 w-8 rounded-full p-0 hover:bg-slate-300/20 focus:bg-slate-300/20 active:bg-slate-300/25 dark:hover:bg-navy-300/20 dark:focus:bg-navy-300/20 dark:active:bg-navy-300/25
"
>
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-5 w-5
"
fill=
"
none
"
viewBox=
"
0 0 24 24
"
stroke=
"
currentColor
"
stroke-width=
"
2
"
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
d=
"
M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z
"
><
/path
>
<
/svg
>
<
/button
>
<
div x-ref=
"
popperRoot
"
class=
"
popper-root
"
:class=
"
isShowPopper
&&
'
show
'">
<
div
class=
"
popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700
"
>
<
ul
>
<
li
>
<
a
href=
"
#
"
class=
"
flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Action
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Another Action
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Something else
<
/a
>
<
/li
>
<
/ul
>
<
div class=
"
my-1 h-px bg-slate-150 dark:bg-navy-500
"><
/div
>
<
ul
>
<
li
>
<
a
href=
"
#
"
class=
"
flex items-center px-3 h-8 pr-12 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Separated Link
<
/a
>
<
/li
>
<
/ul
>
<
/div
>
<
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
<!-- Primary Actions -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Primary Actions
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span
>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
Dropdowns are lightweight context menus for housing navigation
and actions. Check out code for detail of usage.
</p>
<div
class=
"mt-5"
>
<div
x-data=
"usePopper({placement:'bottom-start',offset:4})"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
class=
"btn space-x-2 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90"
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
>
<span>
Dropdown
</span>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4 transition-transform duration-200"
:class=
"isShowPopper && 'rotate-180'"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M19 9l-7 7-7-7"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
>
Action
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
>
Another Action
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
>
Something Else
</a
>
</li>
</ul>
<div
class=
"my-1 h-px bg-slate-150 dark:bg-navy-500"
></div>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent"
>
Separated Link
</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
x-data=
"
usePopper({placement:
'
bottom-start
'
,offset:4})
"
@click.outside=
"
if(isShowPopper) isShowPopper = false
"
class=
"
inline-flex
"
>
<
button
class=
"
btn space-x-2 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90
"
x-ref=
"
popperRef
"
@click=
"
isShowPopper = !isShowPopper
"
>
<
span
>
Dropdown
<
/span
>
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-4 w-4 transition-transform duration-200
"
:class=
"
isShowPopper
&&
'
rotate-180
'"
fill=
"
none
"
viewBox=
"
0 0 24 24
"
stroke=
"
currentColor
"
stroke-width=
"
2
"
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
d=
"
M19 9l-7 7-7-7
"
/
>
<
/svg
>
<
/button
>
<
div x-ref=
"
popperRoot
"
class=
"
popper-root
"
:class=
"
isShowPopper
&&
'
show
'">
<
div
class=
"
popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700
"
>
<
ul
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent
"
>
Action
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent
"
>
Another Action
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent
"
>
Something Else
<
/a
>
<
/li
>
<
/ul
>
<
div class=
"
my-1 h-px bg-slate-150 dark:bg-navy-500
"><
/div
>
<
ul
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-primary hover:text-white focus:bg-primary focus:text-white dark:hover:bg-accent dark:focus:bg-accent
"
>
Separated Link
<
/a
>
<
/li
>
<
/ul
>
<
/div
>
<
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
<!-- Dropdown Icons -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Dropdown Icons
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span
>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
Dropdowns are lightweight context menus for housing navigation
and actions. Check out code for detail of usage.
</p>
<div
class=
"mt-5"
>
<div
x-data=
"usePopper({placement:'bottom-start',offset:4})"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
class=
"btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
>
<span>
Dropdown
</span>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4 transition-transform duration-200"
:class=
"isShowPopper && 'rotate-180'"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M19 9l-7 7-7-7"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"mt-px h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"1.5"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
/>
</svg>
<span>
View
</span></a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"1.5"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
/>
</svg>
<span>
Edit
</span></a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"1.5"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
/>
</svg>
<span>
Update
</span></a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide text-error outline-none transition-all hover:bg-error/20 focus:bg-error/20"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"1.5"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
/>
</svg>
<span>
Delete item
</span></a
>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
x-data=
"
usePopper({placement:
'
bottom-start
'
,offset:4})
"
@click.outside=
"
if(isShowPopper) isShowPopper = false
"
class=
"
inline-flex
"
>
<
button
class=
"
btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90
"
x-ref=
"
popperRef
"
@click=
"
isShowPopper = !isShowPopper
"
>
<
span
>
Dropdown
<
/span
>
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-4 w-4 transition-transform duration-200
"
:class=
"
isShowPopper
&&
'
rotate-180
'"
fill=
"
none
"
viewBox=
"
0 0 24 24
"
stroke=
"
currentColor
"
stroke-width=
"
2
"
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
d=
"
M19 9l-7 7-7-7
"
/
>
<
/svg
>
<
/button
>
<
div x-ref=
"
popperRoot
"
class=
"
popper-root
"
:class=
"
isShowPopper
&&
'
show
'">
<
div
class=
"
popper-box rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-500 dark:bg-navy-700
"
>
<
ul
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
mt-px h-4.5 w-4.5
"
fill=
"
none
"
viewBox=
"
0 0 24 24
"
stroke=
"
currentColor
"
stroke-width=
"
1.5
"
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
d=
"
M15 12a3 3 0 11-6 0 3 3 0 016 0z
"
/
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
d=
"
M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z
"
/
>
<
/svg
>
<
span
>
View
<
/span
><
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-4.5 w-4.5
"
fill=
"
none
"
viewBox=
"
0 0 24 24
"
stroke=
"
currentColor
"
stroke-width=
"
1.5
"
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
d=
"
M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z
"
/
>
<
/svg
>
<
span
>
Edit
<
/span
><
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-4.5 w-4.5
"
fill=
"
none
"
viewBox=
"
0 0 24 24
"
stroke=
"
currentColor
"
stroke-width=
"
1.5
"
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
d=
"
M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15
"
/
>
<
/svg
>
<
span
>
Update
<
/span
><
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center space-x-3 px-3 pr-8 font-medium tracking-wide text-error outline-none transition-all hover:bg-error/20 focus:bg-error/20
"
>
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-4.5 w-4.5
"
fill=
"
none
"
viewBox=
"
0 0 24 24
"
stroke=
"
currentColor
"
stroke-width=
"
1.5
"
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
d=
"
M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16
"
/
>
<
/svg
>
<
span
>
Delete item
<
/span
><
/a
>
<
/li
>
<
/ul
>
<
/div
>
<
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
<!-- Scrolled Dropdown -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
Scrolled Dropdown
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span
>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
Dropdowns are lightweight context menus for housing navigation
and actions. Check out code for detail of usage.
</p>
<div
class=
"mt-5"
>
<div
x-data=
"usePopper({placement:'bottom-start',offset:4})"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
class=
"btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
>
<span>
Dropdown
</span>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4 transition-transform duration-200"
:class=
"isShowPopper && 'rotate-180'"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M19 9l-7 7-7-7"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box h-36 overflow-y-auto rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-600 dark:bg-navy-700"
>
<ul>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Action
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Another Action
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something else
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something else
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something else
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something else
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something else
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something else
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something else
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something else
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something else
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something else
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something else
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something else
</a
>
</li>
<li>
<a
href=
"#"
class=
"flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100"
>
Something else
</a
>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
x-data=
"
usePopper({placement:
'
bottom-start
'
,offset:4})
"
@click.outside=
"
if(isShowPopper) isShowPopper = false
"
class=
"
inline-flex
"
>
<
button
class=
"
btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90
"
x-ref=
"
popperRef
"
@click=
"
isShowPopper = !isShowPopper
"
>
<
span
>
Dropdown
<
/span
>
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-4 w-4 transition-transform duration-200
"
:class=
"
isShowPopper
&&
'
rotate-180
'"
fill=
"
none
"
viewBox=
"
0 0 24 24
"
stroke=
"
currentColor
"
stroke-width=
"
2
"
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
d=
"
M19 9l-7 7-7-7
"
/
>
<
/svg
>
<
/button
>
<
div x-ref=
"
popperRoot
"
class=
"
popper-root
"
:class=
"
isShowPopper
&&
'
show
'">
<
div
class=
"
popper-box h-36 overflow-y-auto rounded-md border border-slate-150 bg-white py-1.5 font-inter dark:border-navy-600 dark:bg-navy-700
"
>
<
ul
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Action
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Another Action
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Something else
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Something else
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Something else
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Something else
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Something else
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Something else
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Something else
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Something else
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Something else
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Something else
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Something else
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Something else
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex h-8 items-center px-3 pr-8 font-medium tracking-wide outline-none transition-all hover:bg-slate-100 hover:text-slate-800 focus:bg-slate-100 focus:text-slate-800 dark:hover:bg-navy-600 dark:hover:text-navy-100 dark:focus:bg-navy-600 dark:focus:text-navy-100
"
>
Something else
<
/a
>
<
/li
>
<
/ul
>
<
/div
>
<
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
<!-- HTML Content Dropdown -->
<div
class=
"card px-4 pb-4 sm:px-5"
>
<div
class=
"my-3 flex h-8 items-center justify-between"
>
<h2
class=
"font-medium tracking-wide text-slate-700 line-clamp-1 dark:text-navy-100 lg:text-base"
>
HTML Content
</h2>
<label
class=
"inline-flex items-center space-x-2"
>
<span
class=
"text-xs text-slate-400 dark:text-navy-300"
>
Code
</span
>
<input
@
change=
"helpers.toggleCode"
class=
"form-switch h-5 w-10 rounded-full bg-slate-300 before:rounded-full before:bg-slate-50 checked:bg-primary checked:before:bg-white dark:bg-navy-900 dark:before:bg-navy-300 dark:checked:bg-accent dark:checked:before:bg-white"
type=
"checkbox"
/>
</label>
</div>
<div
class=
"max-w-xl"
>
<p>
Dropdowns are lightweight context menus for housing navigation
and actions. Check out code for detail of usage.
</p>
<div
class=
"mt-5"
>
<div
x-data=
"usePopper({placement:'bottom-start',offset:4})"
@
click.outside=
"if(isShowPopper) isShowPopper = false"
class=
"inline-flex"
>
<button
class=
"btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90"
x-ref=
"popperRef"
@
click=
"isShowPopper = !isShowPopper"
>
<span>
Dropdown
</span>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4 w-4 transition-transform duration-200"
:class=
"isShowPopper && 'rotate-180'"
fill=
"none"
viewBox=
"0 0 24 24"
stroke=
"currentColor"
stroke-width=
"2"
>
<path
stroke-linecap=
"round"
stroke-linejoin=
"round"
d=
"M19 9l-7 7-7-7"
/>
</svg>
</button>
<div
x-ref=
"popperRoot"
class=
"popper-root"
:class=
"isShowPopper && 'show'"
>
<div
class=
"popper-box w-72 rounded-md border border-slate-150 bg-white dark:border-navy-600 dark:bg-navy-700"
>
<h3
class=
"px-4 py-3 font-medium tracking-wide text-slate-700 dark:text-navy-100"
>
Only Selected People
</h3>
<label
class=
"relative flex"
>
<input
type=
"text"
class=
"form-input peer w-full border-y border-slate-150 bg-transparent px-4 py-2 pl-9 text-xs+ placeholder:text-slate-400/70 dark:border-navy-600"
placeholder=
"Type username..."
/>
<span
class=
"pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent"
>
<svg
xmlns=
"http://www.w3.org/2000/svg"
class=
"h-4.5 w-4.5 transition-colors duration-200"
fill=
"currentColor"
viewBox=
"0 0 24 24"
>
<path
d=
"M3.316 13.781l.73-.171-.73.171zm0-5.457l.73.171-.73-.171zm15.473 0l.73-.171-.73.171zm0 5.457l.73.171-.73-.171zm-5.008 5.008l-.171-.73.171.73zm-5.457 0l-.171.73.171-.73zm0-15.473l-.171-.73.171.73zm5.457 0l.171-.73-.171.73zM20.47 21.53a.75.75 0 101.06-1.06l-1.06 1.06zM4.046 13.61a11.198 11.198 0 010-5.115l-1.46-.342a12.698 12.698 0 000 5.8l1.46-.343zm14.013-5.115a11.196 11.196 0 010 5.115l1.46.342a12.698 12.698 0 000-5.8l-1.46.343zm-4.45 9.564a11.196 11.196 0 01-5.114 0l-.342 1.46c1.907.448 3.892.448 5.8 0l-.343-1.46zM8.496 4.046a11.198 11.198 0 015.115 0l.342-1.46a12.698 12.698 0 00-5.8 0l.343 1.46zm0 14.013a5.97 5.97 0 01-4.45-4.45l-1.46.343a7.47 7.47 0 005.568 5.568l.342-1.46zm5.457 1.46a7.47 7.47 0 005.568-5.567l-1.46-.342a5.97 5.97 0 01-4.45 4.45l.342 1.46zM13.61 4.046a5.97 5.97 0 014.45 4.45l1.46-.343a7.47 7.47 0 00-5.568-5.567l-.342 1.46zm-5.457-1.46a7.47 7.47 0 00-5.567 5.567l1.46.342a5.97 5.97 0 014.45-4.45l-.343-1.46zm8.652 15.28l3.665 3.664 1.06-1.06-3.665-3.665-1.06 1.06z"
/>
</svg>
</span>
</label>
<ul
class=
"my-2"
>
<li>
<a
href=
"#"
class=
"flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
<div>
<p
class=
"text-slate-700 line-clamp-1 dark:text-navy-100"
>
Simon Tods
</p>
<p
class=
"text-xs text-slate-500 dark:text-navy-300"
>
Web Developer
</p>
</div>
</a>
</li>
<li>
<a
href=
"#"
class=
"flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
>
<div
class=
"avatar h-10 w-10"
>
<div
class=
"is-initial rounded-full border border-success/30 bg-success/10 uppercase text-success"
>
jd
</div>
</div>
<div>
<p
class=
"text-slate-700 line-clamp-1 dark:text-navy-100"
>
John Doe
</p>
<p
class=
"text-xs text-slate-500 dark:text-navy-300"
>
Web Developer
</p>
</div>
</a>
</li>
<li>
<a
href=
"#"
class=
"flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
>
<div
class=
"avatar h-10 w-10"
>
<div
class=
"is-initial rounded-full bg-warning uppercase text-white"
>
KG
</div>
</div>
<div>
<p
class=
"text-slate-700 line-clamp-1 dark:text-navy-100"
>
Konnor Guzman
</p>
<p
class=
"text-xs text-slate-500 dark:text-navy-300"
>
Frontend Developer
</p>
</div>
</a>
</li>
<li>
<a
href=
"#"
class=
"flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
<div>
<p
class=
"text-slate-700 line-clamp-1 dark:text-navy-100"
>
Samantha Shelton
</p>
<p
class=
"text-xs text-slate-500 dark:text-navy-300"
>
Web Developer
</p>
</div>
</a>
</li>
<li>
<a
href=
"#"
class=
"flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600"
>
<div
class=
"avatar h-10 w-10"
>
<img
class=
"rounded-full"
src=
"{{asset('images/200x200.png')}}"
alt=
"avatar"
/>
</div>
<div>
<p
class=
"text-slate-700 line-clamp-1 dark:text-navy-100"
>
Derrick Simmons
</p>
<p
class=
"text-xs text-slate-500 dark:text-navy-300"
>
UI/UX Designer
</p>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div
class=
"code-wrapper hidden pt-4"
>
<pre
class=
"is-scrollbar-hidden max-h-96 overflow-auto rounded-lg"
x-init=
"hljs.highlightElement($el)"
>
<code
class=
"language-html"
x-ignore
>
<
div
x-data=
"
usePopper({placement:
'
bottom-start
'
,offset:4})
"
@click.outside=
"
if(isShowPopper) isShowPopper = false
"
class=
"
inline-flex
"
>
<
button
class=
"
btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90
"
x-ref=
"
popperRef
"
@click=
"
isShowPopper = !isShowPopper
"
>
<
span
>
Dropdown
<
/span
>
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-4 w-4 transition-transform duration-200
"
:class=
"
isShowPopper
&&
'
rotate-180
'"
fill=
"
none
"
viewBox=
"
0 0 24 24
"
stroke=
"
currentColor
"
stroke-width=
"
2
"
>
<
path
stroke-linecap=
"
round
"
stroke-linejoin=
"
round
"
d=
"
M19 9l-7 7-7-7
"
/
>
<
/svg
>
<
/button
>
<
div x-ref=
"
popperRoot
"
class=
"
popper-root
"
:class=
"
isShowPopper
&&
'
show
'">
<
div
class=
"
popper-box w-72 rounded-md border border-slate-150 bg-white dark:border-navy-600 dark:bg-navy-700
"
>
<
h3
class=
"
px-4 py-3 font-medium tracking-wide text-slate-700 dark:text-navy-100
"
>
Only Selected People
<
/h3
>
<
label class=
"
relative flex
">
<
input
type=
"
text
"
class=
"
form-input peer w-full border-y border-slate-150 bg-transparent px-4 py-2 pl-9 text-xs+ placeholder:text-slate-400/70 dark:border-navy-600
"
placeholder=
"
Type username...
"
/
>
<
div
class=
"
pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent
"
>
<
svg
xmlns=
"
http://www.w3.org/2000/svg
"
class=
"
h-4.5 w-4.5 transition-colors duration-200
"
fill=
"
currentColor
"
viewBox=
"
0 0 24 24
"
>
<
path
d=
"
M3.316 13.781l.73-.171-.73.171zm0-5.457l.73.171-.73-.171zm15.473 0l.73-.171-.73.171zm0 5.457l.73.171-.73-.171zm-5.008 5.008l-.171-.73.171.73zm-5.457 0l-.171.73.171-.73zm0-15.473l-.171-.73.171.73zm5.457 0l.171-.73-.171.73zM20.47 21.53a.75.75 0 101.06-1.06l-1.06 1.06zM4.046 13.61a11.198 11.198 0 010-5.115l-1.46-.342a12.698 12.698 0 000 5.8l1.46-.343zm14.013-5.115a11.196 11.196 0 010 5.115l1.46.342a12.698 12.698 0 000-5.8l-1.46.343zm-4.45 9.564a11.196 11.196 0 01-5.114 0l-.342 1.46c1.907.448 3.892.448 5.8 0l-.343-1.46zM8.496 4.046a11.198 11.198 0 015.115 0l.342-1.46a12.698 12.698 0 00-5.8 0l.343 1.46zm0 14.013a5.97 5.97 0 01-4.45-4.45l-1.46.343a7.47 7.47 0 005.568 5.568l.342-1.46zm5.457 1.46a7.47 7.47 0 005.568-5.567l-1.46-.342a5.97 5.97 0 01-4.45 4.45l.342 1.46zM13.61 4.046a5.97 5.97 0 014.45 4.45l1.46-.343a7.47 7.47 0 00-5.568-5.567l-.342 1.46zm-5.457-1.46a7.47 7.47 0 00-5.567 5.567l1.46.342a5.97 5.97 0 014.45-4.45l-.343-1.46zm8.652 15.28l3.665 3.664 1.06-1.06-3.665-3.665-1.06 1.06z
"
><
/path
>
<
/svg
>
<
/div
>
<
/label
>
<
ul class=
"
my-2
">
<
li
>
<
a
href=
"
#
"
class=
"
flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600
"
>
<
div class=
"
avatar h-10 w-10
">
<
img
class=
"
rounded-full
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
div
>
<
p class=
"
text-slate-700 line-clamp-1 dark:text-navy-100
">
Simon Tods
<
/p
>
<
p class=
"
text-xs text-slate-500 dark:text-navy-300
">
Web Developer
<
/p
>
<
/div
>
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600
"
>
<
div class=
"
avatar h-10 w-10
">
<
div
class=
"
is-initial rounded-full border border-success/30 bg-success/10 uppercase text-success
"
>
jd
<
/div
>
<
/div
>
<
div
>
<
p class=
"
text-slate-700 line-clamp-1 dark:text-navy-100
">
John Doe
<
/p
>
<
p class=
"
text-xs text-slate-500 dark:text-navy-300
">
Web Developer
<
/p
>
<
/div
>
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600
"
>
<
div class=
"
avatar h-10 w-10
">
<
div
class=
"
is-initial rounded-full bg-warning uppercase text-white
"
>
KG
<
/div
>
<
/div
>
<
div
>
<
p class=
"
text-slate-700 line-clamp-1 dark:text-navy-100
">
Konnor Guzman
<
/p
>
<
p class=
"
text-xs text-slate-500 dark:text-navy-300
">
Frontend Developer
<
/p
>
<
/div
>
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600
"
>
<
div class=
"
avatar h-10 w-10
">
<
img
class=
"
rounded-full
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
div
>
<
p class=
"
text-slate-700 line-clamp-1 dark:text-navy-100
">
Samantha Shelton
<
/p
>
<
p class=
"
text-xs text-slate-500 dark:text-navy-300
">
Web Developer
<
/p
>
<
/div
>
<
/a
>
<
/li
>
<
li
>
<
a
href=
"
#
"
class=
"
flex items-center space-x-3.5 px-4 py-2 pr-8 tracking-wide outline-none transition-all hover:bg-slate-100 focus:bg-slate-100 dark:hover:bg-navy-600 dark:focus:bg-navy-600
"
>
<
div class=
"
avatar h-10 w-10
">
<
img
class=
"
rounded-full
"
src=
"
images/200x200.png
"
alt=
"
avatar
"
/
>
<
/div
>
<
div
>
<
p class=
"
text-slate-700 line-clamp-1 dark:text-navy-100
">
Derrick Simmons
<
/p
>
<
p class=
"
text-xs text-slate-500 dark:text-navy-300
">
UI/UX Designer
<
/p
>
<
/div
>
<
/a
>
<
/li
>
<
/ul
>
<
/div
>
<
/div
>
<
/div
>
</code>
</pre>
</div>
</div>
</div>
</main>
</x-app-layout>
Prev
1
…
19
20
21
22
23
Next
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment
