Badge Tag

Component 36

About

Here is Badge Tag

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Badge Tag to your project and fits it to your theme.

Code

How Badge Tag is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import React from "react";


export default function Example() {
    return (
        <div className="flex items-center space-x-2.5 border border-blue-500/30 rounded-full bg-blue-500/20 p-1 text-sm text-blue-600">
            <div className="flex items-center space-x-1 bg-blue-500 text-white border border-blue-500 rounded-3xl px-3 pl-1 py-1">
                <img className="h-6 w-6 rounded-full" src="https://cdn.21st.dev/assets/mirror/b9/b99202059df46f381f29b4cdfd053e23e6c1f7df2e35439557ede29093194cd7.jpg" alt="userImage" />
                <p>Richard</p>
            </div>
            <p className="pr-3">Your subscription renews on 22 March</p>
        </div>
    );
};