01tanzaku-maker.css

#input{
  display: block;
  width: 100%;
  height: 100px;
  resize: vertical;

  font-size: 16px;
}
.settings{
  margin: 8px 0;
}
.settings__label{
  cursor: pointer;
  user-select: none;
}
.arrow{
  margin: 8px 0;
}
#output{
  display: block;
  width: 100%;
  height: auto;
  resize: vertical;

  font-size: 16px;
  cursor: pointer;
}
/*  */
.tweet-area{
  margin: 16px 0;

  text-align: center;
}
#bt-tweet{
  display: inline-block;

  border: none;
  border-radius: 8px;
  background-color: #1d9bf0;
  font-family: 'Helvetica Neue',Arial,sans-serif;
  text-decoration: none;
  color: #fff;
  cursor: pointer;
}
.bt-tweet__img{
  width: 32px;
  margin: 8px 12px;

  vertical-align: middle;
}
.bt-tweet__text{
  margin-right: 12px;
}
/*  */
#float{
  padding: 0 8px;
  position: fixed;

  border-radius: 4px;
  background-color: #E0E0E0;
  box-shadow: 0 0 2px 2px rgba(60,60,60,.4);
  pointer-events: none;
}
.s-invisible{
  visibility: hidden;
}

02tanzaku-maker.html

<textarea id="input" placeholder="短冊にしたい文章を入力">
柿くへば
　　鐘が鳴るなり
　　　　法隆寺
　　　　　　　　正岡子規
</textarea>
<div class="settings">
  <div class="settings__row">
    <label class="settings__label">
      <input type="checkbox" id="input-bold"> 太枠
    </label>
  </div>
  <div class="settings__row">
    <label class="settings__label">
      <input type="checkbox" id="input-share"> このツールの紹介文を追加
    </label>
  </div>
</div>
<div class="arrow">↓</div>
<textarea id="output"></textarea>
<div class="tweet-area">
  <a href="https://twitter.com/intent/tweet" id="bt-tweet">
    <img src="/img/icon/twitter-white.svg" alt="" class="bt-tweet__img">
    <span class="bt-tweet__text">ツイート</span>
  </a>
</div>
<div id="float" class="s-invisible">Copied!</div>

03tanzaku-maker.js

const el_input = document.getElementById('input');
const el_input_bold = document.getElementById('input-bold');
const el_input_share = document.getElementById('input-share');
const el_output = document.getElementById('output');
const el_float = document.getElementById('float');
const bt_tweet = document.getElementById('bt-tweet');
const line_tl = ['┌','┏'];
const line_tb = ['─','━'];
const line_tr = ['┐','┓'];
const line_lr = ['│','┃'];
const line_bl = ['└','┗'];
const line_br = ['┘','┛'];
const h_float = el_float.clientHeight;
let timer_float;

el_input.addEventListener('input',makeTanzaku);
el_input_bold.addEventListener('change',makeTanzaku);
el_input_share.addEventListener('change',makeTanzaku);
el_output.addEventListener('click',copyOutput);
makeTanzaku();

function makeTanzaku(){
  const line_type = (()=>{
    if(el_input_bold.checked){
      return 1;
    }else{
      return 0;
    }
  })();
  const arr_input = el_input.value.split(/\r\n|\r|\n/).filter(v=>v!='').map(v=>[...v]);
  const width = arr_input.length;
  const height = arr_input.map(v=>v.length).reduce((a,b)=>{
    return Math.max(a,b);
  },0);
  const arr_output = [];
  //上端
  arr_output.push(line_tl[line_type]+line_tb[line_type].repeat(width)+line_tr[line_type]);
  //中間
  for(let r=0;r<height;r++){
    let text = '';
    for(let c=width-1;c>=0;c--){
      if(arr_input[c][r]===undefined){
        text += '　';
      }else{
        text += arr_input[c][r];
      }
    }
    arr_output.push(line_lr[line_type]+text+line_lr[line_type]);
  }
  //下端
  arr_output.push(line_bl[line_type]+line_tb[line_type].repeat(width)+line_br[line_type]);
  //出力
  const str_output = (()=>{
    let str = arr_output.join('\n');
    if(el_input_share.checked){
      str += '\n\n' + document.title;
      str += '\n' + location.href.replace(/[#\?].*$/,'');
    }
    return str;
  })();
  const row = (()=>{
    if(el_input_share.checked){
      return height + 2 + 3;
    }else{
      return height + 2;
    }
  })();
  el_output.style.height = Math.min(row*18,500)+'px';
  el_output.value = str_output;
  //ツイート用
  bt_tweet.href = 'https://twitter.com/intent/tweet?text='+encodeURI(str_output);
}

function copyOutput(e){
  this.select();
  navigator.clipboard.writeText(this.value).then(()=>{
    clearTimeout(timer_float);
    el_float.classList.add('s-invisible');
    el_float.style.left = e.clientX+'px';
    el_float.style.top = (e.clientY-h_float)+'px';
    el_float.classList.remove('s-invisible');
    timer_float = setTimeout(()=>{
      el_float.classList.add('s-invisible');
    },1000);
  });
}