Home
Framework
Theme
All
561
Forms
12
Charts
21
Navbars
38
Sidebars
26
Typography
41
Components
51
Tables
34
Cards
63
Cards Section
37
Testimonials
13
Teams Section
11
Faq
4
Headers
36
Blogs
11
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
13
Projects Section
14
Stats
7
Logo Areas
6
Authentication
10
Contact Us
5
Features
19
Pricing
7
Teams
9
Call To Actions
13
Http Codes
2
Navbars - All Examples
Discover 38 Navbars examples available in Loopple
Navbar With Logo
Navbar Complex
<div class="container-fluid py-2 px-5">
<div class="pe-md-3 d-flex align-items-center">
<div class="input-group">
<span class="input-group-text border-0 text-body bg-transparent"><i class="fas fa-search" aria-hidden="true"></i></span>
<input type="text" class="form-control border-0 bg-transparent" placeholder="Search here...">
</div>
</div>
<div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
<ul class="navbar-nav ms-auto justify-content-end">
<li class="nav-item dropdown me-sm-3 pe-2 pe-2 d-flex align-items-center">
<a href="javascript:;" class="nav-link text-body p-0" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fa fa-bell text-lg cursor-pointer" aria-hidden="true"></i>
<span class="position-absolute end-6 translate-middle p-1 bg-danger border border-white rounded-circle">
<span class="visually-hidden">New alerts</span>
</span>
</a>
<ul class="dropdown-menu dropdown-menu-end px-2 py-3 me-sm-n4" aria-labelledby="dropdownMenuButton">
<li class="mb-2">
<a class="dropdown-item border-radius-md" href="javascript:;">
<div class="d-flex py-1">
<div class="my-auto">
<img src="https://images.unsplash.com/photo-1618018352910-72bdafdc82a6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80" class="avatar avatar-sm me-3 ">
</div>
<div class="d-flex flex-column justify-content-center">
<h6 class="text-sm font-weight-normal mb-1">
<span class="font-weight-bold">New message</span> from Laur
</h6>
<p class="text-xs text-secondary mb-0">
<i class="fa fa-clock me-1" aria-hidden="true"></i>
13 minutes ago
</p>
</div>
</div>
</a>
</li>
<li class="mb-2">
<a class="dropdown-item border-radius-md" href="javascript:;">
<div class="d-flex py-1">
<div class="my-auto">
<img src="https://demos.creative-tim.com/soft-ui-dashboard-pro/assets/img/small-logos/logo-spotify.svg" class="avatar avatar-sm bg-gradient-dark me-3 ">
</div>
<div class="d-flex flex-column justify-content-center">
<h6 class="text-sm font-weight-normal mb-1">
<span class="font-weight-bold">New album</span> by Travis Scott
</h6>
<p class="text-xs text-secondary mb-0">
<i class="fa fa-clock me-1" aria-hidden="true"></i>
1 day
</p>
</div>
</div>
</a>
</li>
<li>
<a class="dropdown-item border-radius-md" href="javascript:;">
<div class="d-flex py-1">
<div class="avatar avatar-sm bg-gradient-secondary me-3 my-auto">
<svg width="12px" height="12px" viewBox="0 0 43 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>credit-card</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2169.000000, -745.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(453.000000, 454.000000)">
<path class="color-background" d="M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z" opacity="0.593633743"></path>
<path class="color-background" d="M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="d-flex flex-column justify-content-center">
<h6 class="text-sm font-weight-normal mb-1">
Payment successfully completed
</h6>
<p class="text-xs text-secondary mb-0">
<i class="fa fa-clock me-1" aria-hidden="true"></i>
2 days
</p>
</div>
</div>
</a>
</li>
</ul>
</li>
<li class="nav-item d-flex me-sm-3 pe-2 align-items-center">
<a href="javascript:;" class="nav-link text-body font-weight-bold px-0">
<i class="fa fa-user text-lg" aria-hidden="true"></i>
</a>
</li>
<li class="nav-item position-relative d-xl-none ps-3 d-flex align-items-center">
<a href="javascript:;" class="nav-link text-body p-0" id="iconNavbarSidenav">
<div class="sidenav-toggler-inner">
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
</div>
</a>
</li>
<li class="nav-item dropdown d-flex ps-sm-2 align-items-center position-relative">
<hr class="vertical dark my-0 start-0">
<a href="javascript:;" class="nav-link text-body p-0" id="dropdownMenuUser" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80" class="avatar avatar-sm shadow-sm mx-2" alt="avatar">
</a>
<ul class="dropdown-menu dropdown-menu-end px-2 py-3 me-sm-n2" aria-labelledby="dropdownMenuUser">
<li class="position-relative">
<div class="dropdown-header pt-0">
<h6 class="mb-0">Andrew Millo</h6>
<p class="mb-0 text-sm">[email protected]</p>
</div>
<hr class="horizontal dark mt-1 mb-2">
</li>
<li class="mb-1">
<a class="dropdown-item border-radius-md" href="javascript:;">
<span>Account</span>
</a>
</li>
<li class="mb-1">
<a class="dropdown-item border-radius-md" href="javascript:;">
<span>Settings</span>
</a>
</li>
<li class="mb-1">
<a class="dropdown-item border-radius-md" href="javascript:;">
<span>Payments</span>
</a>
</li>
<li class="mb-1">
<a class="dropdown-item border-radius-md" href="javascript:;">
<span>Log out</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>Navbar Simple
<div class="container-fluid py-2 px-5">
<div class="pe-md-3 d-flex align-items-center">
<div class="input-group">
<span class="input-group-text border-0 text-body bg-transparent"><i class="fas fa-search" aria-hidden="true"></i></span>
<input type="text" class="form-control border-0 bg-transparent" placeholder="Search here...">
</div>
</div>
<div class="collapse navbar-collapse mt-sm-0 mt-2 me-md-0 me-sm-4" id="navbar">
<ul class="navbar-nav ms-auto justify-content-end">
<li class="nav-item me-sm-2 pe-2 pe-2 d-flex align-items-center">
<a href="javascript:;" class="nav-link text-body p-0" id="dropdownMenuButton">
Discover
</a>
</li>
<li class="nav-item me-sm-2 pe-2 pe-2 d-flex align-items-center">
<a href="javascript:;" class="nav-link text-body p-0" id="dropdownMenuButton">Blog</a>
</li>
<li class="nav-item me-sm-2 pe-2 pe-2 d-flex align-items-center">
<a href="javascript:;" class="nav-link text-body p-0" id="dropdownMenuButton">Login</a>
</li>
<li class="nav-item dropdown d-flex ps-sm-2 align-items-center position-relative">
<hr class="vertical dark my-0 start-0">
<a href="javascript:;" class="nav-link text-body p-0" id="dropdownMenuUser" data-bs-toggle="dropdown" aria-expanded="false">
<img src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1480&q=80" class="avatar avatar-sm shadow-sm mx-2" alt="avatar">
</a>
<ul class="dropdown-menu dropdown-menu-end px-2 py-3 me-sm-n2" aria-labelledby="dropdownMenuUser">
<li class="position-relative">
<div class="dropdown-header pt-0">
<h6 class="mb-0">Andrew Millo</h6>
<p class="mb-0 text-sm">[email protected]</p>
</div>
<hr class="horizontal dark mt-1 mb-2">
</li>
<li class="mb-1">
<a class="dropdown-item border-radius-md" href="javascript:;">
<span>Account</span>
</a>
</li>
<li class="mb-1">
<a class="dropdown-item border-radius-md" href="javascript:;">
<span>Settings</span>
</a>
</li>
<li class="mb-1">
<a class="dropdown-item border-radius-md" href="javascript:;">
<span>Payments</span>
</a>
</li>
<li class="mb-1">
<a class="dropdown-item border-radius-md" href="javascript:;">
<span>Log out</span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>Navbar Double
Navbar Complex
<div class="container-fluid">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="navbar-search navbar-search-light form-inline mr-sm-3 mb-0" id="navbar-search-main">
<div class="form-group mb-0">
<div class="input-group input-group-alternative input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-search"></i></span>
</div>
<input class="form-control" placeholder="Search" type="text">
</div>
</div>
<button type="button" class="close" data-action="search-close" data-target="#navbar-search-main" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</form>
<ul class="navbar-nav align-items-center ml-md-auto ">
<li class="nav-item d-xl-none">
<div class="pr-3 sidenav-toggler sidenav-toggler-dark active" data-action="sidenav-pin" data-target="#sidenav-main">
<div class="sidenav-toggler-inner">
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
<i class="sidenav-toggler-line"></i>
</div>
</div>
</li>
<li class="nav-item d-sm-none">
<a class="nav-link" href="#" data-action="search-show" data-target="#navbar-search-main">
<i class="ni ni-zoom-split-in"></i>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bell"></i>
</a>
<div class="dropdown-menu dropdown-menu-xl dropdown-menu-right py-0 overflow-hidden">
<div class="px-3 py-3">
<h6 class="text-sm text-muted m-0">You have <strong class="text-primary">13</strong> notifications.</h6>
</div>
<div class="list-group list-group-flush">
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-1.jpg" class="avatar rounded-circle">
</div>
<div class="col ml--2">
<div class="d-flex justify-content-between align-items-center">
<div>
<h4 class="mb-0 text-sm">John Snow</h4>
</div>
<div class="text-right text-muted">
<small>2 hrs ago</small>
</div>
</div>
<p class="text-sm mb-0">Lets meet at Starbucks at 11:30. Wdyt?</p>
</div>
</div>
</a>
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets/img/theme/team-2.jpg" class="avatar rounded-circle">
</div>
<div class="col ml--2">
<div class="d-flex justify-content-between align-items-center">
<div>
<h4 class="mb-0 text-sm">John Snow</h4>
</div>
<div class="text-right text-muted">
<small>3 hrs ago</small>
</div>
</div>
<p class="text-sm mb-0">A new issue has been reported for Argon.</p>
</div>
</div>
</a>
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-3.jpg" class="avatar rounded-circle">
</div>
<div class="col ml--2">
<div class="d-flex justify-content-between align-items-center">
<div>
<h4 class="mb-0 text-sm">John Snow</h4>
</div>
<div class="text-right text-muted">
<small>5 hrs ago</small>
</div>
</div>
<p class="text-sm mb-0">Your posts have been liked a lot.</p>
</div>
</div>
</a>
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets/img/theme/team-4.jpg" class="avatar rounded-circle">
</div>
<div class="col ml--2">
<div class="d-flex justify-content-between align-items-center">
<div>
<h4 class="mb-0 text-sm">John Snow</h4>
</div>
<div class="text-right text-muted">
<small>2 hrs ago</small>
</div>
</div>
<p class="text-sm mb-0">Lets meet at Starbucks at 11:30. Wdyt?</p>
</div>
</div>
</a>
<a href="#!" class="list-group-item list-group-item-action">
<div class="row align-items-center">
<div class="col-auto">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-5.jpg" class="avatar rounded-circle">
</div>
<div class="col ml--2">
<div class="d-flex justify-content-between align-items-center">
<div>
<h4 class="mb-0 text-sm">John Snow</h4>
</div>
<div class="text-right text-muted">
<small>3 hrs ago</small>
</div>
</div>
<p class="text-sm mb-0">A new issue has been reported for Argon.</p>
</div>
</div>
</a>
</div>
<a href="#!" class="dropdown-item text-center text-primary font-weight-bold py-3">View all</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-layer-group"></i>
</a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-dark bg-default dropdown-menu-right ">
<div class="row shortcuts px-4">
<a href="#!" class="col-4 shortcut-item text-center">
<span class="shortcut-media avatar rounded-circle bg-gradient-red">
<i class="fa fa-calendar"></i>
</span>
<small class="text-white">Calendar</small>
</a>
<a href="#!" class="col-4 shortcut-item text-center">
<span class="shortcut-media avatar rounded-circle bg-gradient-orange">
<i class="fa fa-envelope"></i>
</span>
<small class="text-white">Email</small>
</a>
<a href="#!" class="col-4 shortcut-item text-center">
<span class="shortcut-media avatar rounded-circle bg-gradient-info">
<i class="fa fa-credit-card"></i>
</span>
<small class="text-white">Payments</small>
</a>
<a href="#!" class="col-4 shortcut-item text-center">
<span class="shortcut-media avatar rounded-circle bg-gradient-green">
<i class="fa fa-book"></i>
</span>
<small class="text-white">Reports</small>
</a>
<a href="#!" class="col-4 shortcut-item text-center">
<span class="shortcut-media avatar rounded-circle bg-gradient-purple">
<i class="fa fa-map"></i>
</span>
<small class="text-white">Maps</small>
</a>
<a href="#!" class="col-4 shortcut-item text-center">
<span class="shortcut-media avatar rounded-circle bg-gradient-yellow">
<i class="fa fa-store"></i>
</span>
<small class="text-white">Shop</small>
</a>
</div>
</div>
</li>
</ul>
<ul class="navbar-nav align-items-center ml-auto ml-md-0 ">
<li class="nav-item dropdown">
<a class="nav-link pr-0" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<div class="media align-items-center">
<span class="avatar avatar-sm rounded-circle">
<img alt="Image placeholder" src="https://demos.creative-tim.com/argon-dashboard/assets-old/img/theme/team-4.jpg">
</span>
<div class="media-body ml-2 d-none d-lg-block">
<span class="mb-0 text-sm font-weight-bold">John Snow</span>
</div>
</div>
</a>
<div class="dropdown-menu dropdown-menu-right ">
<div class="dropdown-header noti-title">
<h6 class="text-overflow m-0">Welcome!</h6>
</div>
<a href="#!" class="dropdown-item">
<i class="fa fa-user"></i>
<span>My profile</span>
</a>
<a href="#!" class="dropdown-item">
<i class="fa fa-tools"></i>
<span>Settings</span>
</a>
<a href="#!" class="dropdown-item">
<i class="far fa-calendar"></i>
<span>Activity</span>
</a>
<a href="#!" class="dropdown-item">
<i class="fa fa-phone"></i>
<span>Support</span>
</a>
<div class="dropdown-divider"></div>
<a href="#!" class="dropdown-item">
<i class="fa fa-sign-out-alt"></i>
<span>Logout</span>
</a>
</div>
</li>
</ul>
</div>
</div>Navbar Dark
<nav class="navbar navbar-expand-lg navbar-dark bg-gradient-dark z-index-3 py-3 draggable">
<div class="container">
<a class="navbar-brand font-weight-bold text-white" href="javascript:;" rel="tooltip" title="Designed and Coded by Creative Tim" data-placement="bottom">
Soft UI PRO
</a>
<a href="javascript:;" class="btn btn-sm bg-gradient-info btn-round mb-0 ms-auto d-lg-none d-block">Buy Now</a>
<button class="navbar-toggler shadow-none ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navigation" aria-controls="navigation" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon mt-2">
<span class="navbar-toggler-bar bar1"></span>
<span class="navbar-toggler-bar bar2"></span>
<span class="navbar-toggler-bar bar3"></span>
</span>
</button>
<div class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0" id="navigation">
<ul class="navbar-nav navbar-nav-hover mx-auto">
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" href="">
Our Story
</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" href="">
Solutions
</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" href="">
About Us
</a>
</li>
<li class="nav-item mx-2">
<a class="nav-link ps-2 d-flex justify-content-between cursor-pointer align-items-center" href="">
Contact
</a>
</li>
</ul>
<ul class="navbar-nav d-lg-block d-none">
<li class="nav-item">
<a href="javascript:;" class="btn btn-sm bg-gradient-info btn-round mb-0 me-1">Buy Now</a>
</li>
</ul>
</div>
</div>
</nav>Navbar With Breadcrumb And Search
<div class="flex items-center justify-between w-full px-4 py-1 mx-auto flex-wrap-inherit">
<nav>
<ol class="flex flex-wrap pt-1 mr-12 bg-transparent rounded-lg sm:mr-16">
<li class="text-sm leading-normal">
<a class="opacity-50 text-slate-700" href="javascript:;">Pages</a>
</li>
<li class="text-sm pl-2 capitalize leading-normal text-slate-700 before:float-left before:pr-2 before:text-gray-600 before:content-['/']" aria-current="page">Tables</li>
</ol>
<h6 class="mb-0 font-bold capitalize">Tables</h6>
</nav>
<div class="flex items-center mt-2 grow sm:mt-0 sm:mr-6 md:mr-0 lg:flex lg:basis-auto">
<div class="flex items-center md:ml-auto md:pr-4">
<div class="relative flex flex-wrap items-stretch w-full transition-all rounded-lg ease-soft">
<span class="text-sm ease-soft leading-5.6 absolute z-50 -ml-px flex h-full items-center whitespace-nowrap rounded-lg rounded-tr-none rounded-br-none border border-r-0 border-transparent bg-transparent py-2 px-2.5 text-center font-normal text-slate-500 transition-all">
<i class="fas fa-search" aria-hidden="true"></i>
</span>
<input type="text" class="pl-8.75 text-sm focus:shadow-soft-primary-outline ease-soft w-1/100 leading-5.6 relative -ml-px block min-w-0 flex-auto rounded-lg border border-solid border-gray-300 bg-white bg-clip-padding py-2 pr-3 text-gray-700 transition-all placeholder:text-gray-500 focus:border-fuchsia-300 focus:outline-none focus:transition-shadow" placeholder="Type here...">
</div>
</div>
<ul class="flex flex-row justify-end pl-0 mb-0 list-none md-max:w-full">
<li class="flex items-center">
<a href="../pages/sign-in.html" class="block px-0 py-2 text-sm font-semibold transition-all ease-nav-brand text-slate-500">
<i class="fa fa-user sm:mr-1" aria-hidden="true"></i>
<span class="hidden sm:inline">Sign In</span>
</a>
</li>
<li class="flex items-center pl-4 xl:hidden">
<a href="javascript:;" class="block p-0 text-sm transition-all ease-nav-brand text-slate-500" sidenav-trigger="">
<div class="w-4.5 overflow-hidden">
<i class="ease-soft mb-0.75 relative block h-0.5 rounded-sm bg-slate-500 transition-all"></i>
<i class="ease-soft mb-0.75 relative block h-0.5 rounded-sm bg-slate-500 transition-all"></i>
<i class="ease-soft relative block h-0.5 rounded-sm bg-slate-500 transition-all"></i>
</div>
</a>
</li>
<li class="flex items-center px-4">
<a href="javascript:;" class="p-0 text-sm transition-all ease-nav-brand text-slate-500">
<i fixed-plugin-button-nav="" class="cursor-pointer fa fa-cog" aria-hidden="true"></i>
</a>
</li>
<li class="relative flex items-center pr-2">
<p class="hidden transform-dropdown-show"></p>
<a href="javascript:;" class="block p-0 text-sm transition-all ease-nav-brand text-slate-500" dropdown-trigger="" aria-expanded="false">
<i class="cursor-pointer fa fa-bell" aria-hidden="true"></i>
</a>
<ul dropdown-menu="" class="text-sm transform-dropdown before:font-awesome before:leading-default before:duration-350 before:ease-soft lg:shadow-soft-3xl duration-250 min-w-44 before:sm:right-7.5 before:text-5.5 pointer-events-none absolute right-0 top-0 z-50 origin-top list-none rounded-lg border-0 border-solid border-transparent bg-white bg-clip-padding px-2 py-4 text-left text-slate-500 opacity-0 transition-all before:absolute before:right-2 before:left-auto before:top-0 before:z-50 before:inline-block before:font-normal before:text-white before:antialiased before:transition-all before:content-['\f0d8'] sm:-mr-6 lg:absolute lg:right-0 lg:left-auto lg:mt-2 lg:block lg:cursor-pointer">
<li class="relative mb-2">
<a class="ease-soft py-1.2 clear-both block w-full whitespace-nowrap rounded-lg bg-transparent px-4 duration-300 hover:bg-gray-200 hover:text-slate-700 lg:transition-colors" href="javascript:;">
<div class="flex py-1">
<div class="my-auto">
<img src="../assets/img/team-2.jpg" class="inline-flex items-center justify-center mr-4 text-sm text-white h-9 w-9 max-w-none rounded-xl">
</div>
<div class="flex flex-col justify-center">
<h6 class="mb-1 text-sm font-normal leading-normal">
<span class="font-semibold">New message</span> from Laur
</h6>
<p class="mb-0 text-xs leading-tight text-slate-400">
<i class="mr-1 fa fa-clock" aria-hidden="true"></i> 13 minutes ago
</p>
</div>
</div>
</a>
</li>
<li class="relative mb-2">
<a class="ease-soft py-1.2 clear-both block w-full whitespace-nowrap rounded-lg px-4 transition-colors duration-300 hover:bg-gray-200 hover:text-slate-700" href="javascript:;">
<div class="flex py-1">
<div class="my-auto">
<img src="../assets/img/small-logos/logo-spotify.svg" class="inline-flex items-center justify-center mr-4 text-sm text-white bg-gradient-to-tl from-gray-900 to-slate-800 h-9 w-9 max-w-none rounded-xl">
</div>
<div class="flex flex-col justify-center">
<h6 class="mb-1 text-sm font-normal leading-normal">
<span class="font-semibold">New album</span> by Travis Scott
</h6>
<p class="mb-0 text-xs leading-tight text-slate-400">
<i class="mr-1 fa fa-clock" aria-hidden="true"></i> 1 day
</p>
</div>
</div>
</a>
</li>
<li class="relative">
<a class="ease-soft py-1.2 clear-both block w-full whitespace-nowrap rounded-lg px-4 transition-colors duration-300 hover:bg-gray-200 hover:text-slate-700" href="javascript:;">
<div class="flex py-1">
<div class="inline-flex items-center justify-center my-auto mr-4 text-sm text-white transition-all duration-200 ease-nav-brand bg-gradient-to-tl from-slate-600 to-slate-300 h-9 w-9 rounded-xl">
<svg width="12px" height="12px" viewBox="0 0 43 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>credit-card</title>
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2169.000000, -745.000000)" fill="#FFFFFF" fill-rule="nonzero">
<g transform="translate(1716.000000, 291.000000)">
<g transform="translate(453.000000, 454.000000)">
<path class="color-background" d="M43,10.7482083 L43,3.58333333 C43,1.60354167 41.3964583,0 39.4166667,0 L3.58333333,0 C1.60354167,0 0,1.60354167 0,3.58333333 L0,10.7482083 L43,10.7482083 Z" opacity="0.593633743"></path>
<path class="color-background" d="M0,16.125 L0,32.25 C0,34.2297917 1.60354167,35.8333333 3.58333333,35.8333333 L39.4166667,35.8333333 C41.3964583,35.8333333 43,34.2297917 43,32.25 L43,16.125 L0,16.125 Z M19.7083333,26.875 L7.16666667,26.875 L7.16666667,23.2916667 L19.7083333,23.2916667 L19.7083333,26.875 Z M35.8333333,26.875 L28.6666667,26.875 L28.6666667,23.2916667 L35.8333333,23.2916667 L35.8333333,26.875 Z"></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="flex flex-col justify-center">
<h6 class="mb-1 text-sm font-normal leading-normal">Payment successfully completed</h6>
<p class="mb-0 text-xs leading-tight text-slate-400">
<i class="mr-1 fa fa-clock" aria-hidden="true"></i> 2 days
</p>
</div>
</div>
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
