Skeleton
A sleek Skeleton component, built with TailwindCSS, providing clear, responsive, and visually appealing placeholders for loading content.
Example
example.tsx
const Example = () => {
return (
<div className="flex items-center space-x-3 animate-pulse">
<div className="size-14 rounded-full bg-[#202020]"></div>
<div className="flex flex-col space-y-2">
<div className="rounded-md h-4 w-48 bg-[#202020] "></div>
<div className="rounded-md h-4 w-40 bg-[#202020] "></div>
</div>
</div>
)
}
export default Example;
Gradient Skeleton
A sleek Gradient Skeleton component, built with TailwindCSS, providing clear, responsive, and visually appealing gradient placeholders for loading content.
Example
example.tsx
const Example = () => {
return (
<div className="flex items-center space-x-3 animate-pulse">
<div className="size-14 rounded-full bg-gradient-to-r from-[#1565C0] to-[#1D8FE1]"></div>
<div className="flex flex-col space-y-2">
<div className="rounded-md h-4 w-48 bg-gradient-to-r from-[#1565C0] to-[#1D8FE1] "></div>
<div className="rounded-md h-4 w-40 bg-gradient-to-r from-[#1565C0] to-[#1D8FE1] "></div>
</div>
</div>
)
}
export default Example;
