Tailwind CSS Navbars - Icons and Text by Creative Tim

by CreativeTim

HTML

<link rel="stylesheet" href="https://gitcdn.link/cdn/creativetimofficial/public-assets/master/tailwind-starter-kit/jsfiddle-style.css">
<div class="p-4">
  <h1 class="font-semibold mt-8 mb-8 text-3xl" id="title">Navbars - Icons and Text</h1>
  <!-- start snippet  -->
  <nav class="relative flex flex-wrap items-center justify-between px-2 py-3 bg-pink-500 mb-3">
    <div class="container px-4 mx-auto flex flex-wrap items-center justify-between">
      <div class="w-full relative flex justify-between lg:w-auto px-4 lg:static lg:block lg:justify-start">
        <a class="text-sm font-bold leading-relaxed inline-block mr-4 py-2 whitespace-nowrap uppercase text-white" href="#pablo">pink Color</a><button class="cursor-pointer text-xl leading-none px-3 py-1 border border-solid border-transparent rounded bg-transparent block lg:hidden outline-none focus:outline-none" type="button"><span class="block relative w-6 h-px rounded-sm bg-white"></span><span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span><span class="block relative w-6 h-px rounded-sm bg-white mt-1"></span></button>
      </div>
      <div class="lg:flex flex-grow items-center" id="example-navbar-warning">
        <ul class="flex flex-col lg:flex-row list-none ml-auto">
          <li class="nav-item"><a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo"><i class="fab fa-facebook-square text-lg leading-lg text-white opacity-75"></i> <span class="ml-2">Share</span></a></li>
          <li class="nav-item"><a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo"><i class="fab fa-twitter text-lg leading-lg text-white opacity-75"></i> <span class="ml-2">Tweet</span></a></li>
          <li class="nav-item"><a class="px-3 py-2 flex items-center text-xs uppercase font-bold leading-snug text-white hover:opacity-75" href="#pablo"><i class="fab fa-pinterest text-lg leading-lg...