thumbnail

Navigation

Tailwindcss Components - Navigation

kali ini saya ingin share tailwind component Navigation

Jika kalian tidak tahu atau belum menggunakan tailwindcss, kalian dapat akses link dibawah ini:

https://tailwindcss.com


  <div class="bg-white md:w-12/12 h-16 shadow-md flex justify-between items-center flex-col md:flex-row md:rounded md:m-3">
    <div class="flex justify-center items-center ml-3">
      <img 
        class="w-10 mx-3"
        src="https://tailwindcss.com/_next/static/media/tailwindcss-mark.cb8046c163f77190406dfbf4dec89848.svg" 
        alt="logo tailwindcss" 
      />
      <h3 class="text-gray-700 font-semibold text-xl cursor-default py-2 md:py-0">
        Code Stuff
      </h3>
    </div>
    <ul class="flex justify-evenly items-center w-full md:w-1/2 lg:w-1/3 bg-gray-100 md:bg-white mr-0 md:mr-5 py-2 md:py-0">
      <li class="hover:bg-green-400 px-3 py-1 rounded text-gray-700 hover:text-white font-semibold cursor-pointer">
        Home
      </li>
      <li class="hover:bg-green-400 px-3 py-1 rounded text-gray-700 hover:text-white font-semibold cursor-pointer">
        About
      </li>
      <li class="hover:bg-green-400 px-3 py-1 rounded text-gray-700 hover:text-white font-semibold cursor-pointer">
        Services
      </li>
      <li class="hover:bg-green-400 px-3 py-1 rounded text-gray-700 hover:text-white font-semibold cursor-pointer">
        Portfolio
      </li>
      <li class="hover:bg-green-400 px-3 py-1 rounded text-gray-700 hover:text-white font-semibold cursor-pointer">
        Contact
      </li>
    </ul>
  </div>

Video Tutorial

Highlight Articles

copyright @ 2023 - hartdev