Copy Create a demo booking panel with Tailwind CSS: a left column with the host avatar, host name and role, the meeting length with a clock glyph, the timezone, and three bullet points about what the call covers. A right column shows a horizontal row of selectable day chips (weekday abbreviation over the date number) with one selected in dark, then a grid of time-slot buttons where one is disabled, and a full-width confirm button below. Stack the columns on mobile. Then add JavaScript that makes the picker behave: selecting a day highlights it and loads that day's slots — each day offers different availability, and a day with none shows a "fully booked" message — selecting a slot highlights it and clears when the day changes, and the confirm button stays disabled until both are chosen, then names the exact day and time it will book.<section class="mx-auto max-w-3xl px-6 py-16">
<div class="grid gap-8 rounded-2xl border border-neutral-200 bg-white p-8 md:grid-cols-2">
<div>
<span class="h-12 w-12 rounded-full bg-neutral-200"></span>
<h2 class="mt-4 text-lg font-semibold text-neutral-900">Product walkthrough</h2>
<p class="mt-1 text-sm text-neutral-500">with Jordan Reyes, Solutions Engineer</p>
<div class="mt-4 space-y-1.5 text-sm text-neutral-600">
<p class="flex items-center gap-2"><span class="text-neutral-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3.5 2"/></svg></span> 30 minutes</p>
<p class="flex items-center gap-2"><span class="text-neutral-400"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="M20 10c0 5-8 11-8 11S4 15 4 10a8 8 0 1 1 16 0Z"/><circle cx="12" cy="10" r="2.5"/></svg></span> Europe/Berlin (CET)</p>
</div>
<ul class="mt-6 space-y-2 border-t border-neutral-100 pt-6 text-sm text-neutral-600">
<li class="flex gap-2"><span class="text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> A live tour of your actual use case</li>
<li class="flex gap-2"><span class="text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> Pricing for your seat count</li>
<li class="flex gap-2"><span class="text-neutral-900"><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> Security and procurement questions</li>
</ul>
</div>
<div>
<p class="text-sm font-medium text-neutral-900">Choose a day</p>
<div id="days" class="mt-3 flex gap-2 overflow-x-auto pb-1">
<button data-day="Mon 18" class="shrink-0 rounded-xl border border-neutral-200 px-3.5 py-2 text-center hover:bg-neutral-50">
<span class="block text-[10px] uppercase text-neutral-400">Mon</span><span class="block text-sm font-medium text-neutral-900">18</span>
</button>
<button data-day="Tue 19" class="shrink-0 rounded-xl border border-neutral-200 px-3.5 py-2 text-center hover:bg-neutral-50">
<span class="block text-[10px] uppercase text-neutral-400">Tue</span><span class="block text-sm font-medium text-neutral-900">19</span>
</button>
<button data-day="Wed 20" class="shrink-0 rounded-xl border border-neutral-200 px-3.5 py-2 text-center hover:bg-neutral-50">
<span class="block text-[10px] uppercase text-neutral-400">Wed</span><span class="block text-sm font-medium text-neutral-900">20</span>
</button>
<button data-day="Thu 21" class="shrink-0 rounded-xl border border-neutral-200 px-3.5 py-2 text-center hover:bg-neutral-50">
<span class="block text-[10px] uppercase text-neutral-400">Thu</span><span class="block text-sm font-medium text-neutral-900">21</span>
</button>
</div>
<p class="mt-6 text-sm font-medium text-neutral-900">Available times</p>
<div id="slots" class="mt-3 grid grid-cols-2 gap-2 text-sm"></div>
<button id="confirm" disabled class="mt-5 w-full cursor-not-allowed rounded-xl bg-neutral-900 py-2.5 text-sm font-medium text-white opacity-40 hover:bg-neutral-800">Select a day and time</button>
</div>
</div>
</section>// Availability per day — "booked" slots render disabled.
var AVAILABILITY = {
"Mon 18": [["09:00", true], ["10:30", true], ["13:00", false], ["15:00", true]],
"Tue 19": [["09:00", true], ["10:30", true], ["13:00", true], ["14:30", false], ["16:00", true], ["17:30", true]],
"Wed 20": [["11:00", true], ["13:30", true], ["16:00", false]],
"Thu 21": []
};
var dayButtons = [].slice.call(document.querySelectorAll("#days [data-day]"));
var slotGrid = document.getElementById("slots");
var confirm = document.getElementById("confirm");
var DAY_ON = "shrink-0 rounded-xl bg-neutral-900 px-3.5 py-2 text-center";
var DAY_OFF = "shrink-0 rounded-xl border border-neutral-200 px-3.5 py-2 text-center hover:bg-neutral-50";
var day = null;
var time = null;
function paintDays() {
dayButtons.forEach(function (button) {
var on = button.getAttribute("data-day") === day;
button.className = on ? DAY_ON : DAY_OFF;
// The date numeral has to invert with the chip behind it.
button.children[1].className =
"block text-sm font-medium " + (on ? "text-white" : "text-neutral-900");
});
}
function paintConfirm() {
var ready = Boolean(day && time);
confirm.disabled = !ready;
confirm.classList.toggle("opacity-40", !ready);
confirm.classList.toggle("cursor-not-allowed", !ready);
confirm.textContent = ready ? "Confirm " + day + ", " + time : "Select a day and time";
}
function renderSlots() {
slotGrid.innerHTML = "";
var slots = AVAILABILITY[day] || [];
if (day && slots.length === 0) {
var none = document.createElement("p");
none.className = "col-span-2 rounded-xl bg-neutral-50 py-6 text-center text-sm text-neutral-500";
none.textContent = "Fully booked — try another day.";
slotGrid.appendChild(none);
return;
}
slots.forEach(function (slot) {
var label = slot[0];
var open = slot[1];
var button = document.createElement("button");
button.textContent = label;
if (!open) {
button.disabled = true;
button.className = "cursor-not-allowed rounded-xl border border-neutral-100 py-2.5 text-neutral-300";
} else if (label === time) {
button.className = "rounded-xl border border-neutral-900 bg-neutral-900 py-2.5 font-medium text-white";
} else {
button.className = "rounded-xl border border-neutral-200 py-2.5 text-neutral-700 hover:bg-neutral-50";
}
button.addEventListener("click", function () {
if (!open) return;
time = label;
renderSlots();
paintConfirm();
});
slotGrid.appendChild(button);
});
}
dayButtons.forEach(function (button) {
button.addEventListener("click", function () {
day = button.getAttribute("data-day");
time = null; // a slot only means something within its day
paintDays();
renderSlots();
paintConfirm();
});
});
day = "Tue 19";
paintDays();
renderSlots();
paintConfirm(); 