Skip to content

Instantly share code, notes, and snippets.

@MrYakobo

MrYakobo/daisyui-cdn.html

Created June 3, 2025 19:28
Show Gist options
  • Save MrYakobo/b0ba646c59e5107fad33d808202a983b to your computer and use it in GitHub Desktop.
Save MrYakobo/b0ba646c59e5107fad33d808202a983b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
daisyui-cdn.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Tailwind CSS via CDN -->
<link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" />
<script type="module" src="https://unpkg.com/cally"></script>
<script>
function show_calendar() {
document.getElementById('value').innerHTML = document.getElementById('calendar').value
}
</script>
</head>
<body data-theme="emerald" class="h-screen py-8">
<span data-theme="retro">This span will always use retro theme!</span>
<button class="btn btn-primary border mx-auto block">Click me</button>
<div class="filter">
<input class="btn filter-reset" type="radio" name="metaframeworks" aria-label="All" />
<input class="btn" type="radio" name="metaframeworks" aria-label="Sveltekit" />
<input class="btn" type="radio" name="metaframeworks" aria-label="Nuxt" />
<input class="btn" type="radio" name="metaframeworks" aria-label="Next.js" />
</div>
<div class=""></div>
<!-- name of each tab group should be unique -->
<div class="tabs tabs-lift">
<input type="radio" name="my_tabs_3" class="tab" aria-label="Tab 1" />
<div class="tab-content bg-base-100 border-base-300 p-6">Tab content 1</div>
<input type="radio" name="my_tabs_3" class="tab" aria-label="Tab 2" checked="checked" />
<div class="tab-content bg-base-100 border-base-300 p-6">Tab content 2</div>
<input type="radio" name="my_tabs_3" class="tab" aria-label="Tab 3" />
<div class="tab-content bg-base-100 border-base-300 p-6">Tab content 3</div>
<calendar-date id="calendar" onchange="show_calendar()"
class="cally bg-base-100 border border-base-300 shadow-lg rounded-box">
<svg aria-label="Previous" class="fill-current size-4" slot="previous" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path fill="currentColor" d="M15.75 19.5 8.25 12l7.5-7.5"></path>
</svg>
<svg aria-label="Next" class="fill-current size-4" slot="next" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24">
<path fill="currentColor" d="m8.25 4.5 7.5 7.5-7.5 7.5"></path>
</svg>
<calendar-month></calendar-month>
</calendar-date>
<div id="value">CONTENTS</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment