Schedule Window
A copy-paste calendars & date pickers component in pure HTML & CSS. Zero dependencies, framework-agnostic, MIT-licensed.
Calendars & Date PickersHTMLCSSany framework
Schedule Window
Copy into your project
HTML
<!-- Schedule Window — Calendars & Date Pickers -->
<div class="nuda-growth-calendar-10">
<span class="nuda-growth-calendar-10__mark" aria-hidden="true"></span>
<span class="nuda-growth-calendar-10__title">Schedule Window</span>
<span class="nuda-growth-calendar-10__meta">Ready</span>
</div>CSS
.nuda-growth-calendar-10 {
--growth-accent: #fb7185;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 9px;
min-width: 210px;
padding: 11px 12px;
border: 1px solid color-mix(in srgb,var(--growth-accent) 32%,transparent);
border-radius: 12px;
background: linear-gradient(135deg,color-mix(in srgb,var(--growth-accent) 12%,#111113),#111113);
color: #fafafa;
font: 12px ui-sans-serif,system-ui,sans-serif;
box-shadow: inset 0 1px rgba(255,255,255,.05);
transition: transform .2s ease,border-color .2s ease;
}
.nuda-growth-calendar-10:hover {
transform: translateY(-2px);
border-color: var(--growth-accent);
}
.nuda-growth-calendar-10__mark {
width: 9px;
height: 9px;
border-radius: 999px;
background: var(--growth-accent);
box-shadow: 0 0 12px color-mix(in srgb,var(--growth-accent) 70%,transparent);
}
.nuda-growth-calendar-10__title {
font-weight: 700;
letter-spacing: -.01em;
}
.nuda-growth-calendar-10__meta {
color: #a1a1aa;
font-size: 10px;
white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
.nuda-growth-calendar-10 {
transition: none;
}
.nuda-growth-calendar-10:hover {
transform: none;
}
}
How to use Schedule Window
Paste the HTML where you need it and the CSS into a global stylesheet (or a <style> tag). Every class is prefixed nuda- so it never collides with Tailwind or your own styles. Tweak the CSS custom properties to match your design system.
Works in React, Vue, Svelte, Astro, Next.js, Nuxt, Laravel Blade, Django, Rails — or a single .html file. No npm install, no build step.