Badge Tag

Component 18

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-gray-500/30 rounded-full bg-gray-500/10 p-1 text-sm text-gray-800">
            <div className="flex items-center space-x-1 bg-white border border-gray-500/30 rounded-2xl px-3 py-1">
                <svg width="16" height="17" viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.725 4.8 9 9.008 16.275 4.8M9 17.4V9m7.5 3.333V5.667a1.67 1.67 0 0 0-.833-1.442L9.833.892a1.67 1.67 0 0 0-1.666 0L2.333 4.225A1.67 1.67 0 0 0 1.5 5.667v6.666a1.67 1.67 0 0 0 .833 1.442l5.834 3.333a1.67 1.67 0 0 0 1.666 0l5.834-3.333a1.67 1.67 0 0 0 .833-1.442" stroke="#1F2937" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
                <p>Your Order</p>
            </div>
            <p className="pr-3">Track your order and stay updated!</p>
        </div>
    );
};