XW
x Wong

Task Notification Dashboard - Copy this Html, Bootstrap Component to your project

<div class="col-3"> <div id="sidebar-right" class="sidebar sidebar-right"> <div class="slimScrollDiv" style="position: relative; overflow: hidden; width: auto; height: 100%;"><div data-scrollbar="true" data-height="100%" data-init="true" style="overflow: hidden; width: auto; height: 100%;"> <ul class="nav nav-tabs" role="tablist"> <li class="width-half active"><a href="#today" data-toggle="tab">Today</a></li> <li class="width-half"><a href="#notifications" data-toggle="tab">Notifications</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="today"> <ul class="nav"> <li class="nav-date"> Sunday, May 31 st </li> <li class="divider"></li> <li class="nav-header">Tasks</li> <li> <ul class="notification-list"> <li> <div class="media"><i class="fa fa-cog"></i></div> <div class="info"> <div class="title"><a href="javascript:;">Your scheduled post has been published</a></div> <div class="time"><span>Just now</span></div> <div class="desc"><span>Aenean lobortis libero libero, vitae imperdiet dolor dictum id.</span></div> </div> </li> <li> <div class="media"><i class="fa fa-shield"></i></div> <div class="info"> <div class="title"><a href="javascript:;">Turn on the firewall</a></div> <div class="time"><span>Today, 7.08am</span></div> <div class="desc"><span>Donec at augue in mi egestas luctus fermentum et ex.</span></div> </div> </li> <li> <div class="media"><i class="fa fa-user-plus"></i></div> <div class="info"> <div class="title"><a href="javascript:;">Added 2 admin user</a></div> <div class="time"><span>Today, 6.40am</span></div> <div class="desc"><span>Quisque elementum urna placerat mi vestibulum lacinia.</span></div> </div> </li> </ul> </li> <li class="divider"></li> </ul> </div> </div> </div><div class="slimScrollBar ui-draggable" style="width: 7px; position: absolute; top: 0px; opacity: 0.4; display: none; border-radius: 7px; z-index: 99; right: 0px; height: 974px; background: rgb(0, 0, 0);"></div><div class="slimScrollRail" style="width: 7px; height: 100%; position: absolute; top: 0px; display: none; border-radius: 7px; opacity: 0.2; z-index: 90; right: 0px; background: rgb(51, 51, 51);"></div></div> </div> </div> design this at dark theme

Prompt
Component Preview

About

Task Notification Dashboard - A sleek dark-themed task list showing due notifications, professionally built with HTML and Bootstrap. View and copy code!

Share

Last updated 1 month ago