0
612
ViewsHow to add arrows to elements with Tailwind CSS?
I have a navbar that contains a Search field and a Social Network dropdown which both show up below the navbar if they are active.
I saw on other websites small "arrows" that connect the second row elements visually with the first one like this:
How can I achieve the same and always make sure that the arrow is also pointing to the correct parent element (visually)? This is my navbar (somehow the JavaScript doesn't work): https://play.tailwindcss.com/qksxyrh24P
1 answers
Answer question0
1>>create a div with same height and width and rotate it by 45 deg.
2>>make it's postion absolute z indiex of 2 and same color as your dropdown field
3>> make sure to add some space between your search field and dropdownfield
4>> use top left properties to place it appropriatly
5>> then just add show class that you are using to show or hide the dropdown link