<div class="container py-5">
<h3 class="fw-bold mb-3">Upcoming events</h3>
<div class="list-group">
<div class="list-group-item d-flex align-items-center gap-3">
<div class="text-center rounded p-2 bg-primary text-white" style="min-width:60px">
<div class="small">FEB</div>
<div class="fw-bold fs-4">16</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-0">Bootstrap 5 Live Workshop</h6><small class="text-muted"><i class="bi bi-clock me-1"></i>10:00 AM · Online</small>
</div><a href="#" class="btn btn-outline-primary btn-sm">Join</a>
</div>
<div class="list-group-item d-flex align-items-center gap-3">
<div class="text-center rounded p-2 bg-success text-white" style="min-width:60px">
<div class="small">FEB</div>
<div class="fw-bold fs-4">19</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-0">Freelancing Meetup Dhaka</h6><small class="text-muted"><i class="bi bi-geo-alt me-1"></i>6:00 PM · Gulshan</small>
</div><a href="#" class="btn btn-outline-success btn-sm">RSVP</a>
</div>
<div class="list-group-item d-flex align-items-center gap-3">
<div class="text-center rounded p-2 bg-warning text-dark" style="min-width:60px">
<div class="small">FEB</div>
<div class="fw-bold fs-4">24</div>
</div>
<div class="flex-grow-1">
<h6 class="mb-0">Design Systems 101</h6><small class="text-muted"><i class="bi bi-camera-video me-1"></i>3:00 PM · YouTube Live</small>
</div><a href="#" class="btn btn-outline-warning btn-sm">Notify me</a>
</div>
</div>
</div>