Tailwind Dash

index.html

<nav class="flex bg-blue-900 p-3">
  <div class="flex items-center justify-between flex-wrap container mx-auto">
  <div class="flex items-center flex-shrink-0 text-white mr-6">
    <img src="https://merchantwest.co.za/sites/default/files/logo.png" class="fill-current h-8 mr-2">
  </div>
  <div class="block lg:hidden">
    <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
      <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
    </button>
  </div>
  <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
    <div class="text-sm lg:flex-grow">
     
    </div>
    <div class="text-sm">
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-blue-200 hover:text-white mr-4">
        Dasbboard
      </a>
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-blue-200 hover:text-white mr-4">
        Book a ride
      </a>
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-blue-200 hover:text-white mr-4">
        Account
      </a>
      <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-blue-200 hover:text-white">
        Sign Out
      </a>
    </div>
  </div>
  </div>
</nav>


<section class="bg-gray-200">
  <div class="container mx-auto h-48 pt-5">
    <h1 class="text-2xl font-bold text-blue-900">Heading</h1>
    <p class="text-sm text-gray-500">Logged in as Stefan Mos</p>
  </div>
</section>

<section class="container mx-auto pt-10">
  
  <div class="flex -mx-2 -mt-24">
    
    <div class="w-1/5 bg-white text-blue-900 p-4 border border-gray-300 shadow-md rounded-lg mx-2 hover:bg-blue-900 hover:text-white">
      <div class="flex items-center bg-blue-200 rounded-full w-8 h-8">
        <i class="fas fa-search text-blue-900 w-full text-center"></i>
      </div>
      <h3 class="text-md font-bold mt-2">Book a trip</h3>
    </div>
    
    <div class="w-1/5 bg-white text-blue-900 p-4 border border-gray-300 shadow-md rounded-lg mx-2 hover:bg-blue-900 hover:text-white">
      <div class="flex items-center bg-blue-200 rounded-full w-8 h-8">
        <i class="fas fa-search text-blue-900 w-full text-center"></i>
      </div>
      <h3 class="text-md font-bold mt-2">Staff list</h3>
    </div>
    
    <div class="w-1/5 bg-white text-blue-900 p-4 border border-gray-300 shadow-md rounded-lg mx-2 hover:bg-blue-900 hover:text-white">
      <div class="flex items-center bg-blue-200 rounded-full w-8 h-8">
        <i class="fas fa-search text-blue-900 w-full text-center"></i>
      </div>
      <h3 class="text-md font-bold mt-2">Queries</h3>
    </div>
    
    <div class="w-1/5 bg-white text-blue-900 p-4 border border-gray-300 shadow-md rounded-lg mx-2 hover:bg-blue-900 hover:text-white">
      <div class="flex items-center bg-blue-200 rounded-full w-8 h-8">
        <i class="fas fa-search text-blue-900 w-full text-center"></i>
      </div>
      <h3 class="text-md font-bold mt-2">Add Employee</h3>
    </div>
    
    <div class="w-1/5 bg-white text-blue-900 p-4 border border-gray-300 shadow-md rounded-lg mx-2 hover:bg-blue-900 hover:text-white">
      <div class="flex items-center bg-blue-200 rounded-full w-8 h-8">
        <i class="fas fa-search text-blue-900 w-full text-center"></i>
      </div>
      <h3 class="text-md font-bold mt-2">Trip History</h3>
    </div>
    
    
    
  </div>
  
  <hr class="border border-gray-200 my-10">
  
  <h1 class="text-2xl font-bold text-blue-900">Heading</h1>
  
  <div class="w-full bg-gray-100 h-32 my-10"></div>
  
</section>

tailwind-dash.markdown

Tailwind Dash

A Pen by Stefan Mos on CodePen.

License.