Tags

HTML5 ✖ JavaScript PHP MySql

<span class="tag">HTML5 <i class="tag-close">✖</i></span>
<span class="tag">JavaScript</span>
<span class="tag">PHP</span>
<span class="tag">MySql</span>

Implementation with form field

<div class="form-field">
    <input type="text" name="" class="form-input" placeholder="Add tags">

    <div class="tags">
        <span class="tag">HTML5 <i class="tag-close">✖</i></span>
        <span class="tag">JavaScript <i class="tag-close">✖</i></span>
        <span class="tag">PHP <i class="tag-close">✖</i></span>
        <span class="tag">MySql <i class="tag-close">✖</i></span>
    </div>
</div>

SASS reference

:root {
    --r-tag-color: var(--r-color-primary);
    --r-tag-background: color-mix(in srgb, var(--r-tag-color), white 90%);
    --r-tag-border-color: color-mix(in srgb, var(--r-tag-color), white 30%);
    --r-tag-text-color: var(--r-tag-color);    
}