Breakpoints overlay w/ Tailwind

Breakpoints.jsx

// Requires Tailwind CSS v2.0+

export default function Breakpoints() {
  return (
    <div className="absolute inset-x-0 bottom-0 z-50 bg-red-500 py-4 text-center text-2xl text-black opacity-30  sm:bg-blue-500 md:bg-yellow-500 lg:bg-purple-500 xl:bg-orange-500 2xl:bg-white">
      <span className="sm:hidden">No Breakpoint</span>
      <span className="hidden sm:block md:hidden">sm &gt;= 640px</span>
      <span className="hidden md:block lg:hidden">md &gt;= 768px</span>
      <span className="hidden lg:block xl:hidden">lg &gt;= 1024px</span>
      <span className="hidden xl:block 2xl:hidden">xl &gt;= 1280px</span>
      <span className="hidden 2xl:block">2xl &gt;= 1536px</span>
    </div>
  );
}