tailswindcssでリボン表示。

tailwind-ribbon-simple.tsx

export default function Ribbon() {
    return (
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 p-7">
            <div
                className="relative flex items-center overflow-hidden space-x-3 rounded-lg border border-gray-300 bg-white px-6 py-5 shadow-sm focus-within:ring-2 focus-within:ring-indigo-500 focus-within:ring-offset-2 hover:border-gray-400 after:block after:absolute after:content-[''] after:border-l-[65px] after:border-l-transparent after:border-b-[65px] after:border-gray-500 after:bottom-0 after:right-0"
            >
                <div className="absolute block text-gray-200 text-xs bottom-2 right-2 z-10">既読</div>
                <div className="flex-shrink-0 py-6">
                    <img className="h-10 w-10 rounded-full"
                         src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
                         alt="" />
                </div>
                <div className="min-w-0 flex-1">
                    <a href="#" className="focus:outline-none">
                        <span className="absolute inset-0" aria-hidden="true" />
                        <p className="text-sm font-medium text-gray-900">Test</p>
                        <p className="truncate text-sm text-gray-500">Manager</p>
                    </a>
                </div>
            </div>
        </div>
    )
}