<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<body>
    <div id="contains">
        <label for="title" class="title">Title</label>
        <input type="text" id="title" name="title">
        <label for="url" class="url">URL</label>
        <input type="url" id="url" name="url">
        <label for="tag" class="tag">Tag</label>
        <input type="text" id="tag" name="tag">
        <button id="submit">Generate</button>
    </div>
    <div class="result">
        <textarea class="result_text" type="text" rows="5"></textarea>
        <button class="copy_btn"><i class="fas fa-clipboard"></i></button>
    </div>
</body>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
  margin: 2rem 0;
}
.title, .url, .tag{
    align-self: flex-start;
    font-size: 0.9rem;
    font-family: 'Montserrat', sans-serif;
    margin-top: 1rem;
    padding-left: 1rem;
}
#title, #url, #tag{
    border: 2px solid black;
    border-radius: 0.5rem;
    font-family: 'Montserrat', sans-serif;
    text-align: center;
    outline: none;
}

#submit, .copy_btn{
    font-size: 1.3rem;
    padding: 0.2rem 0.8rem;
    margin-top: 2rem;
    background-color: black;
    color: white;
    border: 2px solid transparent;
    outline: none;
    border-radius: 0.5rem;
    transform: scale(1);
    transition: transform 0.1s ease-out;
}
.copy_btn{
    margin: 0 0 0 1rem;
    height: 3.5rem;
}
#submit:hover, .copy_btn:hover{
    cursor: pointer;
    transform: scale(0.95);
}

.result{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 0;
}
div#contains{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}
textarea{
    width: 21rem;
    border: 2px solid black;
    border-radius: 0.5rem;
    font-family: 'Courier New', Courier, monospace;
}
input[type="text"], input[type="url"]{
    width: 400px;
    height: 50px;
}

let title = document.querySelector("#title");
let url = document.querySelector("#url");
let tag = document.querySelector("#tag");
let result = document.querySelector(".result_text");
let submit_btn = document.querySelector("#submit");
let copy_btn = document.querySelector(".copy_btn");


function generate(title, url, tag){
    let final_string = `<a href="${url}"><div class="link"><div class="banner">${tag}</div>${title}</div></a>`;
    result.value = final_string;
}

function copy(){
    result.select();
    document.execCommand("copy");
}

submit_btn.addEventListener("click", () => {
    generate(title.value, url.value, tag.value);
    title.value = "";
    url.value = "";
    tag.value = "";
});

copy_btn.addEventListener("click", () => {
    copy();
})

window.addEventListener("unload", () => {
    result.value = "";
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.