Tags.

<!-- Tags Section -->
<section class="section">
            <h2>Tags</h2>

            <!-- Basic Tags -->
            <div class="tag-showcase">
                <h3>Basic Tags</h3>
                <div class="tag-group">
                    <span class="tag">Default</span>
                    <span class="tag tag-outline">Outline</span>
                    <span class="tag tag-soft">Soft</span>
                    <span class="tag tag-ghost">Ghost</span>
                </div>
            </div>

            <!-- Status Tags -->
            <div class="tag-showcase">
                <h3>Status Tags</h3>
                <div class="tag-group">
                    <span class="tag tag-success">
                        <i class="fas fa-check"></i>
                        Active
                    </span>
                    <span class="tag tag-warning">
                        <i class="fas fa-clock"></i>
                        Pending
                    </span>
                    <span class="tag tag-danger">
                        <i class="fas fa-times"></i>
                        Rejected
                    </span>
                    <span class="tag tag-info">
                        <i class="fas fa-info"></i>
                        Info
                    </span>
                </div>
            </div>

            <!-- Rounded Tags -->
            <div class="tag-showcase">
                <h3>Rounded Tags</h3>
                <div class="tag-group">
                    <span class="tag tag-rounded">Design</span>
                    <span class="tag tag-rounded tag-outline">UI/UX</span>
                    <span class="tag tag-rounded tag-soft">Frontend</span>
                    <span class="tag tag-rounded tag-ghost">Development</span>
                </div>
            </div>

            <!-- Size Variants -->
            <div class="tag-showcase">
                <h3>Sizes</h3>
                <div class="tag-group">
                    <span class="tag tag-sm">Small</span>
                    <span class="tag">Default</span>
                    <span class="tag tag-lg">Large</span>
                </div>
            </div>

            <!-- Removable Tags -->
            <div class="tag-showcase">
                <h3>Removable Tags</h3>
                <div class="tag-group">
                    <span class="tag tag-removable">
                        React
                        <button class="tag-remove" aria-label="Remove tag">×</button>
                    </span>
                    <span class="tag tag-removable tag-outline">
                        TypeScript
                        <button class="tag-remove" aria-label="Remove tag">×</button>
                    </span>
                    <span class="tag tag-removable tag-soft">
                        JavaScript
                        <button class="tag-remove" aria-label="Remove tag">×</button>
                    </span>
                </div>
            </div>
        </section>