JSFiddle - React, Tailwind, and code Playground

by Aishwarya L

HTML

<textarea id="textbox" rows="1" cols="30"></textarea>	<a href="#" download="info.txt" class="button">Download</a>

CSS

textarea {
    position: absolute;
    top: 30%;
    left: 48%;
}
a {
    position: absolute;
    top:50%;
    left: 50%;
    text-align: center;
    text-decoration: none;
}
a:link, a:visited {
    display: block;
    font-weight: bold;
    color: #000;
    border:2px solid #98bf21;
    width: 120px;
    height: 20px;
    border-radius: 25px;
    text-align: center;
    padding: 4px;
    text-decoration: none;
}
a:hover, a:active {
    background-color: #98bf21;
    color: #fff;
}

JavaScript

var anchor = document.querySelector('a#button');
var textbox = document.querySelector('#textbox');
anchor.onclick = function () {
    anchor.href = (textbox.value);
    anchor.download = 'info.txt';
};