<a class="navbar-brand fw-semibold" href="#">
        Orbit
      </a>

<li class="nav-item">
            <a class="nav-link active" href="#">
              Dashboard
            </a>
          </li>

<li class="nav-item">
            <a class="nav-link" href="#">
              Projects
            </a>
          </li>

</ul>

</div>

</div>
  </nav>

<div>
        <span class="text-secondary small text-uppercase">
          Workspace overview
        </span>

<h1 class="display-6 fw-semibold mt-1 mb-2">
          Good afternoon
        </h1>

<p class="text-secondary mb-0">
          Here’s what your team is working on today.
        </p>
      </div>

<button class="btn btn-outline-light btn-sm">
          Export
        </button>

<button
          class="btn btn-primary btn-sm"
          data-bs-toggle="modal"
          data-bs-target="#taskModal"
        >
          Create task
        </button>

</div>

<span class="text-secondary small">
                Active projects
              </span>

</div>

</div>

</div>
      </div>

<span class="text-secondary small">
                Tasks completed
              </span>

</div>

<div class="small text-secondary mt-1">
              This month
            </div>

</div>

</div>
      </div>

<span class="text-secondary small">
              Team utilization
            </span>

</div>

</div>
      </div>

<span class="text-secondary small">
              Productivity score
            </span>

<span class="badge text-bg-success mt-2">
              Excellent
            </span>

</div>

</div>
      </div>

</div>

<div>
                <h5 class="mb-1">
                  Current projects
                </h5>

<span class="text-secondary small">
                  Progress across active initiatives
                </span>
              </div>

</div>

<div>
                  <div class="fw-medium">
                    Nova Mobile App
                  </div>

<span class="text-secondary small">
                    Product Design
                  </span>
                </div>

</div>

</div>

<div>
                  <div class="fw-medium">
                    Analytics Platform
                  </div>

<span class="text-secondary small">
                    Engineering
                  </span>
                </div>

</div>

</div>

<div>
                  <div class="fw-medium">
                    Design System
                  </div>

<span class="text-secondary small">
                    UX Infrastructure
                  </span>
                </div>

</div>

</div>

<h5 class="mb-1">
              Activity
            </h5>

<p class="text-secondary small mb-4">
              Latest updates
            </p>

<div>
                <div class="small">
                  Maya completed
                  <strong>Homepage redesign</strong>
                </div>

<div class="text-secondary activity-time">
                  8 minutes ago
                </div>
              </div>

</div>

<div>
                <div class="small">
                  Daniel deployed
                  <strong>API v2.4</strong>
                </div>

<div class="text-secondary activity-time">
                  34 minutes ago
                </div>
              </div>

</div>

<div>
                <div class="small">
                  Sarah added 6 tasks to
                  <strong>Analytics</strong>
                </div>

</div>

<li class="nav-item">
            <button
              class="nav-link active"
              data-bs-toggle="tab"
              data-bs-target="#tasks"
            >
              Tasks
            </button>
          </li>

<li class="nav-item">
            <button
              class="nav-link"
              data-bs-toggle="tab"
              data-bs-target="#notes"
            >
              Notes
            </button>
          </li>

<li class="nav-item">
            <button
              class="nav-link"
              data-bs-toggle="tab"
              data-bs-target="#files"
            >
              Files
            </button>
          </li>

</ul>

<span>
                  Review mobile onboarding flow
                </span>

<span class="badge text-bg-warning">
                  Today
                </span>

</div>

<span>
                  Finalize dashboard components
                </span>

<span class="badge text-bg-primary">
                  Tomorrow
                </span>

</div>

<span>
                  User testing session
                </span>

<span class="badge text-bg-secondary">
                  Friday
                </span>

</div>

<div
            class="tab-pane fade"
            id="notes"
          >
            <p class="text-secondary mb-0">
              Team notes and project documentation will appear here.
            </p>
          </div>

<div
            class="tab-pane fade"
            id="files"
          >
            <p class="text-secondary mb-0">
              Shared workspace files will appear here.
            </p>
          </div>

</div>

</main>

</div>

<h5 class="modal-title">
          Create new task
        </h5>

</div>

<label class="form-label">
            Priority
          </label>

<option>Low</option>
            <option selected>Medium</option>
            <option>High</option>

</select>

</div>

<div>

<label class="form-label">
            Description
          </label>

</div>

<button
          class="btn btn-outline-secondary"
          data-bs-dismiss="modal"
        >
          Cancel
        </button>

<button
          class="btn btn-primary"
          id="createTask"
        >
          Create task
        </button>

</div>

body {
  background: #0b0d10;
}

.navbar {
  background:
    rgba(18, 20, 24, .92);

backdrop-filter: blur(16px);
}

.dashboard-card {
  background:
    linear-gradient(
      145deg,
      #171a1f,
      #111317
    );

color: #f8f9fa;

border:
    1px solid
    rgba(255,255,255,.08);

border-radius: 16px;

box-shadow:
    0 15px 35px
    rgba(0,0,0,.15);
}

.dashboard-card:hover {
  border-color:
    rgba(255,255,255,.14);
}

.progress-thin {
  height: 5px;

background:
    rgba(255,255,255,.08);
}

.project-row {
  padding:
    18px 0;

border-bottom:
    1px solid
    rgba(255,255,255,.07);
}

.project-row:first-of-type {
  padding-top: 4px;
}

.project-row:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.activity-item {
  position: relative;

display: flex;

gap: 13px;

padding-bottom: 25px;
}

.activity-item:not(:last-child)::after {
  content: "";

position: absolute;

left: 5px;
  top: 15px;

width: 1px;
  height:
    calc(100% - 8px);

background:
    rgba(255,255,255,.1);
}

.activity-dot {
  width: 11px;
  height: 11px;

margin-top: 4px;

border-radius: 50%;

flex-shrink: 0;
}

.activity-time {
  margin-top: 4px;

font-size: 11px;
}

.nav-tabs .nav-link {
  color:
    rgba(255,255,255,.5);

border: 0;
  border-bottom:
    2px solid transparent;
}

.nav-tabs .nav-link:hover {
  color: white;
}

.nav-tabs .nav-link.active {
  color: white;

background: transparent;

border-bottom-color:
    var(--bs-primary);
}

.form-control::placeholder {
  color:
    rgba(255,255,255,.3);
}

Liveweave: Generative AI Web Editor & HTML/CSS/JS Playground