Tengo una barra de navegación que contiene un campo de búsqueda y un menú desplegable de redes sociales que aparecen debajo de la barra de navegación si están activos. Vi en otros sitios web pequeñas "flechas" que conectan visualmente los elementos de la segunda fila con el primero así: 
¿Cómo puedo lograr lo mismo y siempre asegurarme de que la flecha también apunte al elemento principal correcto (visualmente)? Esta es mi barra de navegación (de alguna manera el JavaScript no funciona): https://play.tailwindcss.com/qksxyrh24P
1>>cree un div con la misma altura y ancho y gírelo 45 grados.
2>>haga que su posición sea índice z absoluto de 2 y del mismo color que su campo desplegable
3>> asegúrese de agregar algo de espacio entre su campo de búsqueda y el campo desplegable
4>> use las propiedades de arriba a la izquierda para colocarlo apropiadamente
5>> luego simplemente agregue la clase de espectáculo que está usando para mostrar u ocultar el link desplegable