Tailwind responsive breakpoint viewer

1-tailwindbreaks.html

<!-- TAILWIND CSS RESPONSIVE SIZE -->
<span class="text-xs text-gray-200 tailwind-breaks">
  <span class="inline-block sm:hidden">XS</span>
  <span class="hidden sm:inline-block md:hidden">SM</span>
  <span class="hidden md:inline-block lg:hidden">MD</span>
  <span class="hidden lg:inline-block xl:hidden">LG</span>
  <span class="hidden xl:inline-block">XL</span>
</span>

2-bootstrap4.6.html

<!-- BOOTSTRAP 4.6 VERSION -->
<li class="bootstrapsize">
    <span class="d-xs-block d-sm-none d-md-none d-lg-none d-xl-none">XS</span>
    <span class="d-none d-sm-block d-md-none d-lg-none d-xl-none">SM</span>
    <span class="d-none d-sm-none d-md-block d-lg-none d-xl-none">MD</span>
    <span class="d-none d-sm-none d-md-none d-lg-block d-xl-none">LG</span>
    <span class="d-none d-sm-none d-md-none d-lg-none d-xl-block">XL</span>
</li>

Version that it's shown floating and you can scroll and see the responsive size, also added 2XL breakpoint.

React version

<div className="sticky z-50 top-0 text-2xl text-white flex items-center justify-center rounded-full bg-yellow-400 font-semibold w-32 h-32">
        <span className="inline-block sm:hidden">XS</span>
        <span className="hidden sm:inline-block md:hidden">SM</span>
        <span className="hidden md:inline-block lg:hidden">MD</span>
        <span className="hidden lg:inline-block xl:hidden">LG</span>
        <span className="hidden xl:inline-block">XL</span>
        <span className="hidden 2xl:inline-block">2XL</span>
      </div>

If you're using html, just replace className by class

I've built a free chrome extension Tailwind responsive breakpoint display if anyone is looking to not adding their own code.