JSFiddle - React, Tailwind, and code Playground

by Alexey Ukolov

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="wrapper">
    <div class="main">
      <div class="container">
          <input value='vk.com' type="text" placeholder = 'Напишите ссылку: ' id='give_link'>
           <button id='btn_create_link'>Создать ссылку</button>
      </div>
    </div>
    <section>
      <div class="container">
        <input type="text" placeholder = 'Вот ваша ссылка!' id='receive_link'>
      </div>
    </section>
  </div>
</body>
</html>

CSS

.container{
  display: flex;
  flex-direction: column;
  
  width: 20%;
}

.container button{
  margin-top: 30px;
  padding: 20px;
  background: darkred;
  color: white;
  border: none;
}

section .container input{
  margin-top: 50px;
  width: 150%;
  height: 50px;
  padding-left: 20px;
}

JavaScript

const give_link = document.getElementById('give_link')
const receive_link = document.getElementById('receive_link')
const btn_create_link = document.getElementById('btn_create_link')

btn_create_link.onclick = function() {
	receive_link.value = `<a href="">give_link.value</a>`;
}