Time Clock

Employee time tracking widget with clock in/out, break management, work counters, and activity history.

Clock-In State (Not Clocked In)

Preview

09:15:32

Friday, February 7, 2026

Not Clocked In

Today's Activity

No activity recorded yet

<div class="time-clock" style="max-width: 380px;">
  <div class="time-clock-display">
    <p class="time-clock-time">09:15<span class="time-clock-time-seconds">:32</span></p>
    <p class="time-clock-date">Friday, February 7, 2026</p>
    <div class="time-clock-status">
      <span class="time-clock-status-dot"></span>
      Not Clocked In
    </div>
  </div>
  <div class="time-clock-actions">
    <button class="btn btn-success btn-lg">Clock In</button>
  </div>
  <div class="time-clock-history">
    <h4 class="time-clock-history-title">Today's Activity</h4>
    <div class="time-clock-history-empty">No activity recorded yet</div>
  </div>
</div>

Requires: ux.min.css

<div class="bg-base-100 rounded-box shadow-md overflow-hidden max-w-sm">
  <div class="text-center py-10 px-6 bg-linear-to-b from-base-100 to-base-200">
    <p class="text-6xl font-extralight tabular-nums tracking-tight m-0">09:15<span class="text-3xl text-base-content/60 align-super ml-1">:32</span></p>
    <p class="text-base text-base-content/60 mt-2 m-0">Friday, February 7, 2026</p>
    <div class="inline-flex items-center gap-2 px-4 py-1 rounded-full text-sm font-medium mt-4 bg-base-200 text-base-content/60">
      <span class="w-2 h-2 rounded-full bg-base-300"></span>
      Not Clocked In
    </div>
  </div>
  <div class="flex gap-4 p-6">
    <button class="btn btn-success btn-lg flex-1">Clock In</button>
  </div>
  <div class="px-6 pb-6">
    <h4 class="font-semibold uppercase text-sm text-base-content/60 tracking-wider mb-4">Today's Activity</h4>
    <p class="text-center text-sm text-base-content/40 py-6">No activity recorded yet</p>
  </div>
</div>

Requires: tw.min.css

// Clock in action
document.querySelector('.btn-success').addEventListener('click', () => {
  const clock = document.querySelector('.time-clock');
  clock.classList.add('time-clock-clocked-in');
  // Update status text and start tracking
});

Clocked-In State

Preview

14:32:07

Friday, February 7, 2026

Working

5h 17m

Worked

0h 30m

Break

2h 43m

Remaining

Today's Activity

Clock In
09:15
Break Start
12:00
Break End
12:30

<div class="time-clock time-clock-clocked-in" style="max-width: 380px;">
  <div class="time-clock-display">
    <p class="time-clock-time">14:32<span class="time-clock-time-seconds">:07</span></p>
    <p class="time-clock-date">Friday, February 7, 2026</p>
    <div class="time-clock-status">
      <span class="time-clock-status-dot"></span>
      Working
    </div>
  </div>
  <div class="time-clock-counter">
    <div class="time-clock-counter-item">
      <div class="time-clock-counter-value">5h 17m</div>
      <div class="time-clock-counter-label">Worked</div>
    </div>
    <div class="time-clock-counter-item">
      <div class="time-clock-counter-value">0h 30m</div>
      <div class="time-clock-counter-label">Break</div>
    </div>
    <div class="time-clock-counter-item">
      <div class="time-clock-counter-value">2h 43m</div>
      <div class="time-clock-counter-label">Remaining</div>
    </div>
  </div>
  <div class="time-clock-actions">
    <button class="btn btn-warning">Start Break</button>
    <button class="btn btn-error btn-outline">Clock Out</button>
  </div>
  <div class="time-clock-history">
    <h4 class="time-clock-history-title">Today's Activity</h4>
    <ul class="time-clock-history-list">
      <li class="time-clock-history-item">
        <div class="time-clock-history-type">
          <span class="time-clock-history-icon time-clock-history-icon-clock-in">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 11 12 14 22 4"/></svg>
          </span>
          Clock In
        </div>
        <span class="time-clock-history-time">09:15</span>
      </li>
      <li class="time-clock-history-item">
        <div class="time-clock-history-type">
          <span class="time-clock-history-icon time-clock-history-icon-break-start">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
          </span>
          Break Start
        </div>
        <span class="time-clock-history-time">12:00</span>
      </li>
      <li class="time-clock-history-item">
        <div class="time-clock-history-type">
          <span class="time-clock-history-icon time-clock-history-icon-break-end">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
          </span>
          Break End
        </div>
        <span class="time-clock-history-time">12:30</span>
      </li>
    </ul>
  </div>
</div>

Requires: ux.min.css

<div class="bg-base-100 rounded-box shadow-md overflow-hidden max-w-sm">
  <div class="text-center py-10 px-6 bg-linear-to-b from-base-100 to-base-200">
    <p class="text-6xl font-extralight tabular-nums tracking-tight m-0">14:32<span class="text-3xl text-base-content/60 align-super ml-1">:07</span></p>
    <p class="text-base text-base-content/60 mt-2 m-0">Friday, February 7, 2026</p>
    <div class="inline-flex items-center gap-2 px-4 py-1 rounded-full text-sm font-medium mt-4 bg-success/15 text-success">
      <span class="w-2 h-2 rounded-full bg-success animate-pulse"></span>
      Working
    </div>
  </div>
  <div class="flex justify-center gap-8 py-6 px-6 border-t border-b border-base-300">
    <div class="text-center">
      <div class="text-2xl font-semibold tabular-nums">5h 17m</div>
      <div class="text-xs uppercase text-base-content/40 tracking-wider mt-1">Worked</div>
    </div>
    <div class="text-center">
      <div class="text-2xl font-semibold tabular-nums">0h 30m</div>
      <div class="text-xs uppercase text-base-content/40 tracking-wider mt-1">Break</div>
    </div>
    <div class="text-center">
      <div class="text-2xl font-semibold tabular-nums">2h 43m</div>
      <div class="text-xs uppercase text-base-content/40 tracking-wider mt-1">Remaining</div>
    </div>
  </div>
  <div class="flex gap-4 p-6">
    <button class="btn btn-warning flex-1">Start Break</button>
    <button class="btn btn-error btn-outline flex-1">Clock Out</button>
  </div>
</div>

Requires: tw.min.css

// Toggle between working and break
const breakBtn = document.querySelector('.btn-warning');
breakBtn.addEventListener('click', () => {
  const clock = document.querySelector('.time-clock');
  clock.classList.remove('time-clock-clocked-in');
  clock.classList.add('time-clock-on-break');
});

// Clock out
const clockOutBtn = document.querySelector('.btn-error');
clockOutBtn.addEventListener('click', () => {
  const clock = document.querySelector('.time-clock');
  clock.classList.remove('time-clock-clocked-in');
  // Show confirmation dialog or reset state
});

On-Break State

Preview

12:18:45

Friday, February 7, 2026

On Break

3h 03m

Worked

0h 18m

Break

4h 57m

Remaining

<div class="time-clock time-clock-on-break" style="max-width: 380px;">
  <div class="time-clock-display">
    <p class="time-clock-time">12:18<span class="time-clock-time-seconds">:45</span></p>
    <p class="time-clock-date">Friday, February 7, 2026</p>
    <div class="time-clock-status">
      <span class="time-clock-status-dot"></span>
      On Break
    </div>
  </div>
  <div class="time-clock-counter">
    <div class="time-clock-counter-item">
      <div class="time-clock-counter-value">3h 03m</div>
      <div class="time-clock-counter-label">Worked</div>
    </div>
    <div class="time-clock-counter-item">
      <div class="time-clock-counter-value">0h 18m</div>
      <div class="time-clock-counter-label">Break</div>
    </div>
    <div class="time-clock-counter-item">
      <div class="time-clock-counter-value">4h 57m</div>
      <div class="time-clock-counter-label">Remaining</div>
    </div>
  </div>
  <div class="time-clock-actions">
    <button class="btn btn-primary btn-lg">End Break</button>
  </div>
</div>

Requires: ux.min.css

<div class="bg-base-100 rounded-box shadow-md overflow-hidden max-w-sm">
  <div class="text-center py-10 px-6 bg-linear-to-b from-base-100 to-base-200">
    <p class="text-6xl font-extralight tabular-nums tracking-tight m-0">12:18<span class="text-3xl text-base-content/60 align-super ml-1">:45</span></p>
    <p class="text-base text-base-content/60 mt-2 m-0">Friday, February 7, 2026</p>
    <div class="inline-flex items-center gap-2 px-4 py-1 rounded-full text-sm font-medium mt-4 bg-warning/15 text-warning">
      <span class="w-2 h-2 rounded-full bg-warning animate-pulse"></span>
      On Break
    </div>
  </div>
  <div class="flex justify-center gap-8 py-6 px-6 border-t border-b border-base-300">
    <div class="text-center">
      <div class="text-2xl font-semibold tabular-nums">3h 03m</div>
      <div class="text-xs uppercase text-base-content/40 tracking-wider mt-1">Worked</div>
    </div>
    <div class="text-center">
      <div class="text-2xl font-semibold tabular-nums">0h 18m</div>
      <div class="text-xs uppercase text-base-content/40 tracking-wider mt-1">Break</div>
    </div>
    <div class="text-center">
      <div class="text-2xl font-semibold tabular-nums">4h 57m</div>
      <div class="text-xs uppercase text-base-content/40 tracking-wider mt-1">Remaining</div>
    </div>
  </div>
  <div class="flex gap-4 p-6">
    <button class="btn btn-primary btn-lg flex-1">End Break</button>
  </div>
</div>

Requires: tw.min.css

// End break and resume working
document.querySelector('.btn-primary').addEventListener('click', () => {
  const clock = document.querySelector('.time-clock');
  clock.classList.remove('time-clock-on-break');
  clock.classList.add('time-clock-clocked-in');
});

Compact Variant

Preview

16:45:12

Friday, February 7, 2026

Working

7h 30m

Worked

0h 30m

Break

0h 00m

Remaining

<div class="time-clock time-clock-compact time-clock-clocked-in" style="max-width: 380px;">
  <div class="time-clock-display">
    <p class="time-clock-time">16:45<span class="time-clock-time-seconds">:12</span></p>
    <p class="time-clock-date">Friday, February 7, 2026</p>
    <div class="time-clock-status">
      <span class="time-clock-status-dot"></span>
      Working
    </div>
  </div>
  <div class="time-clock-counter">
    <div class="time-clock-counter-item">
      <div class="time-clock-counter-value">7h 30m</div>
      <div class="time-clock-counter-label">Worked</div>
    </div>
    <div class="time-clock-counter-item">
      <div class="time-clock-counter-value">0h 30m</div>
      <div class="time-clock-counter-label">Break</div>
    </div>
    <div class="time-clock-counter-item">
      <div class="time-clock-counter-value">0h 00m</div>
      <div class="time-clock-counter-label">Remaining</div>
    </div>
  </div>
  <div class="time-clock-actions">
    <button class="btn btn-error">Clock Out</button>
  </div>
</div>

Requires: ux.min.css

<div class="bg-base-100 rounded-box shadow-md overflow-hidden max-w-sm">
  <div class="text-center py-6 px-4 bg-linear-to-b from-base-100 to-base-200">
    <p class="text-4xl font-extralight tabular-nums tracking-tight m-0">16:45<span class="text-xl text-base-content/60 align-super ml-1">:12</span></p>
    <p class="text-sm text-base-content/60 mt-1 m-0">Friday, February 7, 2026</p>
    <div class="inline-flex items-center gap-2 px-3 py-0.5 rounded-full text-xs font-medium mt-3 bg-success/15 text-success">
      <span class="w-2 h-2 rounded-full bg-success animate-pulse"></span>
      Working
    </div>
  </div>
  <div class="flex justify-center gap-6 py-4 px-4 border-t border-b border-base-300">
    <div class="text-center">
      <div class="text-lg font-semibold tabular-nums">7h 30m</div>
      <div class="text-xs uppercase text-base-content/40 tracking-wider mt-0.5">Worked</div>
    </div>
    <div class="text-center">
      <div class="text-lg font-semibold tabular-nums">0h 30m</div>
      <div class="text-xs uppercase text-base-content/40 tracking-wider mt-0.5">Break</div>
    </div>
    <div class="text-center">
      <div class="text-lg font-semibold tabular-nums">0h 00m</div>
      <div class="text-xs uppercase text-base-content/40 tracking-wider mt-0.5">Remaining</div>
    </div>
  </div>
  <div class="flex gap-3 p-4">
    <button class="btn color-error flex-1">Clock Out</button>
  </div>
</div>

Requires: tw.min.css

// No JS needed — compact is a CSS-only size variant

Classes Reference

Class	Description
`.time-clock`	Base container with shadow and rounded corners
`.time-clock-clocked-in`	Clocked-in state (green status)
`.time-clock-on-break`	On-break state (yellow status)
`.time-clock-compact`	Compact variant with smaller time and padding
`.time-clock.glass`	Glass morphism variant
`.time-clock-display`	Top section with time, date, and status
`.time-clock-time`	Large time display (tabular-nums)
`.time-clock-time-seconds`	Seconds portion (smaller, muted)
`.time-clock-date`	Date text below time
`.time-clock-status`	Status pill with dot and label
`.time-clock-status-dot`	Animated status indicator dot
`.time-clock-counter`	Work hours counter section
`.time-clock-counter-item`	Individual counter (value + label)
`.time-clock-counter-value`	Counter value text
`.time-clock-counter-label`	Counter label (uppercase, muted)
`.time-clock-actions`	Action buttons container
`.time-clock-actions-stacked`	Vertical stacked buttons layout
`.time-clock-history`	Activity history section
`.time-clock-history-title`	History section heading
`.time-clock-history-list`	Scrollable history list
`.time-clock-history-item`	Single history entry row
`.time-clock-history-type`	Entry type with icon and label
`.time-clock-history-icon`	Colored icon circle
`.time-clock-history-icon-clock-in`	Green clock-in icon
`.time-clock-history-icon-clock-out`	Red clock-out icon
`.time-clock-history-icon-break-start`	Yellow break-start icon
`.time-clock-history-icon-break-end`	Blue break-end icon
`.time-clock-history-time`	Timestamp for history entry
`.time-clock-history-empty`	Empty state message