<header class="navbar-wrapper d-flex align-center justify-around box-shadow-lg"> <h1 class="brand headline-lg p-4">Brand</h1> <div class="search-box d-flex align-center justify-between my-4 w-50"> <input type="text" class="search-input w-100 p-2 m-2 text-sm" placeholder="Search for products..." required /> <button type="submit" class="btn btn-icon p-4"> <i class="fas fa-search text-md"></i> </button> </div> <ul class="nav-links d-flex align-center"> <li> <button class="btn btn-primary rounded-sm text-sm p-4">Login</button> </li> <li class="p-relative text-md icon-badge-wrapper m-4"> <i class="fas fa-shopping-cart"></i> <span class="badge icon-badge-position text-sm font-wt-bold rounded-full p-absolute">5</span> </li> <li class="p-relative text-md icon-badge-wrapper m-4"> <i class="fas fa-heart"></i> <span class="badge icon-badge-position text-sm font-wt-bold rounded-full p-absolute">7</span> </li> </ul> </header>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter