JSFiddle - React, Tailwind, and code Playground

HTML

<form name="form">
  <div>
    <input name="title" placeholder="Title" />
  </div>
  <div>
    <input name="describe" placeholder="Describe" />
  </div>
  <div>
    <input name="links" placeholder="Add links separated by coma" />
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

<div id="root"></div>

CSS

body {
  background-color: #000;
}

.collects {
  min-width: 150px;
  min-height: 100px;
  padding: 10px 5px 10px 5px;
  margin-right: 20px;
  border-radius: 10px;
  display: inline-block;
  background-color: #fff;
  overflow: hidden;
}

JavaScript

const form = document.forms.form;

form.addEventListener("submit", submitHandler);

function getData() {
  return JSON.parse(localStorage.getItem("collectx")) ?? [];
}

function submitHandler(event) {
  event.preventDefault();

  const form = event.target;
  const formData = new FormData(event.target);
  const data = Object.fromEntries(formData);
  const currentData = getData();

  localStorage.setItem("collectx", JSON.stringify([...currentData, data]));

  form.reset();

  render();
}

function render() {
  const collection = getData();
  const entries = collection
    .map(
      ({
        title,
        describe,
        links
      }) => `
      <div class="collects">
        <p>Title: ${title}</p>
        <p>Describe: ${describe}</p>
        <p>Links: ${links && links
          .split(",")
          .map((link) => `<a href="${link}">${link}</a>`)
          .join("<br />")}
        </p>
      </div>`
    )
    .join("");

  document.querySelector("#root").innerHTML = `
    <div>
      ${entries}
    </div>
  `;
}

render();