JSFiddle - React, Tailwind, and code Playground

by XarX

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col-2">
      <button type="button" class="btn btn-success" onclick="saveInputs();">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-save-fill" viewBox="0 0 16 16">
          <path d="M8.5 1.5A1.5 1.5 0 0 1 10 0h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h6c-.314.418-.5.937-.5 1.5v7.793L4.854 6.646a.5.5 0 1 0-.708.708l3.5 3.5a.5.5 0 0 0 .708 0l3.5-3.5a.5.5 0 0 0-.708-.708L8.5 9.293V1.5z"></path>
        </svg>
        Save
      </button>
    </div>
    <div class="col-1">
        <span class="input-group-text"style="text-align: right; display: block;">Edit</span>
    </div>
    <div class="col-1">
      <div class="form-check form-switch">
        <input class="form-check-input" type="checkbox" role="switch" id="searchbox">
        <label class="form-check-label" for="flexSwitchCheckDefault"></label>
      </div>
    </div>
    <div class="col-1">
        <span class="input-group-text" style="text-align: left; display: block;">Search</span>
    </div>
    <div class="col-2">
      <button type="button" class="btn btn-danger" onclick="clearInputs()">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-fire" viewBox="0 0 16 16">
          <path d="M8 16c3.314 0 6-2 6-5.5 0-1.5-.5-4-2.5-6 .25 1.5-1.25 2-1.25 2C11 4 9 .5 6 0c.357 2 .5 4-2 6-1.25 1-2 2.729-2 4.5C2 14 4.686 16 8 16Zm0-1c-1.657 0-3-1-3-2.75 0-.75.25-2 1.25-3C6.125 10 7 10.5 7 10.5c-.375-1.25.5-3.25 2-3.5-.179 1-.25 2 1 3 .625.5 1 1.364 1 2.25C11 14 9.657 15 8 15Z" />
        </svg>
        Clear
      </button>
    </div>
  </div>

  <div class="row">
    <div class="col-7">
      <div class="input-group...

CSS

.span-size {
  width: 80px;
}
.span-size-big {
  width: 160px;
}
.btn {
  width: 100%;
}
body {
 background-color: #444; 
}
.form-switch .form-check-input {
  /*width: 8.4em;*/
  width: 100%;
  height: 1.93em;
  /*margin-left: -4em;*/
  margin-left: 0px;
  border-radius: 0em;
}

.col-2 {
    flex: 0 0 auto;
    width: 27.5%;
}
.col-1 {
    flex: 0 0 auto;
    width: 15%;
    padding: 0px;
}
.col-7 {
    flex: 0 0 auto;
    width: 100%;
}
.form-switch {
  padding: 0px;
}
.form-check {
  padding: 0px;
}

input[type="file"] {
    display: none;
}
.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
    background: #fff;
}
.container {
  position: absolute;
}

JavaScript

class dnd_data {
  constructor(name, volk, ort, fraktion, tags, info, quests) {
    this.name = name;
    this.volk = volk;
    this.ort = ort;
    this.fraktion = fraktion;
    this.tags = tags;
    this.info = info;
    this.quests = quests;
  }
}
var show_console_logs = false;
var _d = "|||"; // Divider for fields
var _d2 = "///" // Divider for data

var npc1 = new dnd_data("Toni"   , "Zwerg"   , "Hamburg"  , "Biowaffe"         , "Lieb; Clever; Herausragendes Namensgedächtnis", "---", "---");
var npc2 = new dnd_data("Patrick", "Immortal", "Hamm"     , "Studi"            , "Lieb; Clever; "                               , "<3" , "<4");
var npc3 = new dnd_data("Gerrit" , "Engel"   , "Paderborn", "Edgelords"        , "Lieb; Clever; "                               , "<3" , "<4");
var npc4 = new dnd_data("Felix"  , "Mensch"  , "Hamburg"  , "Walking Rulesbook", "Lieb; Clever; "                               , "<3" , "<4");
var npc5 = new dnd_data("Dave"   , "Mensch"  , "Hamm"     , "Studi 2.0"        , "Lieb; Clever; "                               , "<3" , "<4");

var npc_list = [];
npc_list.push(npc1);
npc_list.push(npc2);
npc_list.push(npc3);
npc_list.push(npc4);
npc_list.push(npc5);
var current_npc_being_edited = -1;

function searchSel(_input_, searchArea) {
  var numDetections = 0;
  var lastDetected = -1;
  var detected = [];
  if (document.getElementById("searchbox").checked) {
    var split_input = _input_.split(";");
    for (var search = 0; search < split_input.length; search++) {
      if (show_console_logs) console.log("Searching for: " + split_input[search].replace(/\s/g, '') + " in " + searchArea);
      for (var i = 0; i < npc_list.length; i++) {
        if (searchArea == "name") {
          if (npc_list[i].name.toLowerCase().indexOf(split_input[search].toLowerCase()) != -1) {
            numDetections++;
            lastDetected = i;
            detected.push(i);
          } else if (show_console_logs) console.log(npc_list[i].name.toLowerCase() + "...