Build a responsive footer with Tailwind CSS whose link groups collapse on small screens and expand on medium and up. Each group is a details element with a summary showing the group heading and a chevron that rotates when open; from md upward, force the details open with an attribute and hide the chevron so the groups read as ordinary columns. Include four groups — Product, Company, Developers and Legal — with four to six links each. Above the groups, a brand row with a wordmark, a one-line description and three social glyph buttons. Below them, a bottom bar with the copyright on the left and, on the right, a small "Back to top" link with an up arrow. Then add JavaScript that opens every group when the viewport crosses the md breakpoint and closes them again below it, so switching orientation does not leave the footer in a strange state.
Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the
finished markup? .
Build a responsive footer with Tailwind CSS whose link groups collapse on small screens and expand on medium and up. Each group is a details element with a summary showing the group heading and a chevron that rotates when open; from md upward, force the details open with an attribute and hide the chevron so the groups read as ordinary columns. Include four groups — Product, Company, Developers and Legal — with four to six links each. Above the groups, a brand row with a wordmark, a one-line description and three social glyph buttons. Below them, a bottom bar with the copyright on the left and, on the right, a small "Back to top" link with an up arrow. Then add JavaScript that opens every group when the viewport crosses the md breakpoint and closes them again below it, so switching orientation does not leave the footer in a strange state.
var groups = Array.prototype.slice.call(document.querySelectorAll(".footer-group"));
var wide = window.matchMedia("(min-width: 768px)");
function sync(matches) {
// Above md the groups are columns, so they must all be open; below, closed.
groups.forEach(function (group) {
group.open = matches;
});
}
sync(wide.matches);
if (wide.addEventListener) {
wide.addEventListener("change", function (e) {
sync(e.matches);
});
} else {
wide.addListener(function (e) {
sync(e.matches);
});
}
