TTC
Theo's Typesafe Cult•5w ago
JCo

Cannot get pre-release ribbon/banner to show properly.

Anyone know how to fix this? If you try it, it always seems to be poitioned super weirdly and always off the screen.
export const PreReleaseBanner = () => (
    <div className="fixed top-0 left-0 w-20 h-20 overflow-hidden z-[100] pointer-events-none">
        <div className="absolute top-0 left-0 w-64 h-6 bg-gradient-to-br from-pink-400 via-purple-400 to-blue-400 bg-opacity-70 backdrop-blur-sm border border-white/30 transform origin-top-left -rotate-45 flex items-center justify-center text-xs font-bold uppercase text-white">
            Pre-Release Build
        </div>
    </div>
);
export const PreReleaseBanner = () => (
    <div className="fixed top-0 left-0 w-20 h-20 overflow-hidden z-[100] pointer-events-none">
        <div className="absolute top-0 left-0 w-64 h-6 bg-gradient-to-br from-pink-400 via-purple-400 to-blue-400 bg-opacity-70 backdrop-blur-sm border border-white/30 transform origin-top-left -rotate-45 flex items-center justify-center text-xs font-bold uppercase text-white">
            Pre-Release Build
        </div>
    </div>
);
No description
3 Replies
JCo
JCoOP•5w ago
Its meant to be in the top left, but all you see is like a corner of it.
Adam The Great
Adam The Great•5w ago
because rotate css is weird, it's equivalent of "transform: rotate(45)" you'll need to move the thing down and if you want the banner to be seamless it'll need to be bigger and slight offset to the left as well i think in css they set the anchor point for rotation in top left you're probably used to programs putting anchor point in the center, cuz that's just more intuitive but they can't exactly change it anymore cuz then a ton of websites will break
JCo
JCoOP•5w ago
Thanks for your insights. I’ll take a look and see if tailwind has an origin-center

Did you find this page helpful?