EN TR
<div class="component component--3">
    <h3>Tags</h3>
    <p>
        Add tags to reach the right audience.
    </p>
    <div class="tags">
        <input class="tags-input" type="text" placeholder="Etiketi yazın..">
    </div>
</div>

<div class="divider"></div>

<div class="component component--3">
    <h3>Tags</h3>
    <p>
        Add tags to reach the right audience.
    </p>
    <div class="tags" data-values="adana,tayfun,test">
        <input class="tags-input" type="text" placeholder="Etiketi yazın..">
    </div>
</div>

<div class="divider"></div>

<div class="component component--1">
    <h3>Ready to bost your post?</h3>
    <p>
        Boosted shots get in front of more eyes by appearing on other pages around.
    </p>
    <div class="actions">
        <button>Cancel</button>
        <button class="active">Start</button>
    </div>
</div>

<div class="divider"></div>

<div class="component component--2">
    <h3>Link</h3>
    <ul>
        <li>
            <label>
                <input type="radio" name="link" value="1">
                To this page
            </label>
        </li>
        <li>
            <label>
                <input checked type="radio" name="link" value="1">
                My profile
            </label>
        </li>
        <li>
            <label>
                <input type="radio" name="link" value="1">
                A custom URL
            </label>
        </li>
    </ul>
</div>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:[email protected];500;700&display=swap');

* {
    padding: 0;
    margin: 0;
    list-style: none;
    border: 0;
    box-sizing: border-box;
    outline: 0;
    font-family: 'IBM Plex Sans', sans-serif
}

body {
    background: #F0F3F9;
    padding: 60px;
}

.component {
    background: #fff;
    padding: 50px;
    border-radius: 10px;
    box-shadow: 0 20px 25px -15px rgba(#090D5C, .29);
    color: #181339;
    h3 {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
    }
    p {
        font-size: 16px;
        font-weight: 500;
        line-height: 23px;
        margin-bottom: 40px;
    }
    &--1 {
        width: 373px;
        .actions {
            display: flex;
            justify-content: space-between;
            button {
                height: 48px;
                padding: 0 30px;
                border: 1px solid #B6C3DC;
                background: transparent;
                font-size: 14px;
                font-weight: 500;
                border-radius: 10px;
                cursor: pointer;
                &.active {
                    background: #FF7A7F;
                    border-color: #FF7A7F;
                    color: #fff;
                }
            }
        }
    }
    &--2 {
        width: 300px;
        ul {
            li {
                &:not(:last-child) {
                    margin-bottom: 25px;
                }
                label {
                    font-size: 16px;
                    font-weight: 500;
                    display: flex;
                    align-items: center;
                    cursor: pointer;
                    input {
                        appearance: none;
                        width: 26px;
                        min-width: 26px;
                        height: 26px;
                        border: 1px solid #B6C3DC;
                        border-radius: 50%;
                        margin-right: 15px;
                        position: relative;
                        &::before {
                            content: '';
                            width: 16px;
                            height: 16px;
                            background: #6B5CFF;
                            border-radius: 50%;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%) scale(.7);
                            opacity: 0;
                            transition: 300ms all;
                        }
                        &:checked::before {
                            opacity: 1;
                            transform: translate(-50%, -50%) scale(1);
                        }
                    }
                }
            }
        }
    }
    &--3 {
        width: 567px;
        .tags {
            border: 1px solid #B6C3DC;
            padding: 10px;
            border-radius: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            .tag {
                height: 38px;
                display: inline-flex;
                align-items: center;
                background: #F0F3F9;
                padding: 0 6px 0 15px;
                font-size: 14px;
                border-radius: 5px;
                transition: 300ms background-color, 300ms box-shadow;
                button {
                    width: 26px;
                    height: 26px;
                    background: #fff;
                    border-radius: 50%;
                    min-width: 26px;
                    margin-left: 4px;
                    cursor: pointer;
                    transition: 300ms background-color, 300ms color
                }
                &:hover {
                    background: #FFE5E6;
                    box-shadow: 0 13px 10px -10px rgba(#920006, .2);
                    button {
                        background: #FF7A7F;
                        color: #fff;
                    }
                }
            }
            input {
                flex: 1;
                min-width: 120px;
                font-size: 14px;
                padding: 0 10px;
                height: 38px;
            }
        }
    }
}

.divider {
    height: 50px;
}
function tagsInput(el, options = {}) {
    this.options = options
    this.el = el
    this.input = el.querySelector('.tags-input')
    this.tags = []

    const hiddenInput = document.createElement('input')
    hiddenInput.type = 'hidden'
    hiddenInput.name = options.name || 'tags'
    this.el.appendChild(hiddenInput)

    this.hiddenInput = hiddenInput

    const defaultTags = this.options.values || this.el.dataset.values || null

    if (defaultTags) {
        defaultTags.split(',').forEach(value => this.addTag(value))
    }

    this.input.addEventListener('keyup', function(e) {
      if (e.key === 'Enter') {

        if (e.target.value.trim() === '') {
            alert('Lütfen bir etiket girin')
            return
        }

        if (e.target.value.trim().length < this.options.minLength) {
            alert(`Minimum ${this.options.minLength} karakter olmalıdır.`)
            return
        }

        if (e.target.value.trim().length > this.options.maxLength) {
            alert(`Maksimum ${this.options.maxLength} karakter olmalıdır.`)
            return
        }

        if (this.tags.length + 1 > this.options.maxTags) {
            alert('Maksimum etiket sayısına ulaştınız, daha fazla ekleyemezsiniz!')
            return
        }

        if (this.tags.includes(e.target.value)) {
            alert(`${e.target.value} değeri zaten eklenmiş!`)
            return
        }

        this.addTag(e.target.value)
        e.target.value = ''
      }
    }.bind(this))
}

tagsInput.prototype.addTag = function(tag) {
    const span = document.createElement('span')
    span.className = 'tag'
    span.innerText = tag

    const button = document.createElement('button')
    button.innerText = 'x'
    span.appendChild(button)

    button.addEventListener('click', function() {
        span.remove()
        this.tags = this.tags.filter(t => t !== tag)
        this.hiddenInput.value = this.tags.join(',')
    }.bind(this))

    this.tags.push(tag)
    this.el.insertBefore(span, this.el.firstChild)
    this.hiddenInput.value = this.tags.join(',')
}

tagsInput.prototype.showTags = function() {
    return this.tags
}

[...document.querySelectorAll('.component--3')].forEach(component => {
    new tagsInput(component.querySelector('.tags'), {
        name: 'product_tags',
        minLength: 3,
        maxLength: 20,
        maxTags: 3
    })
})