JSFiddle - React, Tailwind, and code Playground

by TheNerdy97

HTML

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<link href="//cdn.datatables.net/1.10.18/css/dataTables.bootstrap.css" rel="stylesheet" />
<link href="//cdn.datatables.net/responsive/2.2.2/css/responsive.bootstrap.css" rel="stylesheet" />
<link href="//cdn.datatables.net/select/1.3.0/css/select.bootstrap.css" rel="stylesheet" />
<link href="//cdn.datatables.net/buttons/1.5.6/css/buttons.bootstrap.css" rel="stylesheet" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" integrity="sha512-ELV+xyi8IhEApPS/pSj66+Jiw+sOT1Mqkzlh8ExXihe4zfqbWkxPRi8wptXIO9g73FSlhmquFlUOuMSoXz5IRw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" integrity="sha512-57oZ/vW8ANMjR/KQ6Be9v/+/h6bq9/l3f0Oc7vn6qMqyhvPd1cvKBRWWpzu0QoneImqr2SkmO4MSqU+RpHom3Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>





<div id="filterNEWEST">

</div>


<script>
$( function() {
  $(document).tooltip();
} );
</script>





		<!-- 	<li>
			  <div class="input-group input-group-sm mb-3"></div>
			    <input type="checkbox" id="Neli-1538"   name="Characters_Filter" value="1453">
			    <label for="Neli-1538"><img src="https://i.postimg.cc/wTGR0pVx/1538.png">
			    </label> 	
			</li>	
			
			<li>
			  <input type="checkbox" id="Momo-1539"   name="Characters_Filter" value="1451">
			  <label for="Momo-1539"><img src="https://i.postimg.cc/d13KWznv/1539.png">
			        <input class="filter-input" type="number" value="1">
			  </label> 	
			</li>	
			<li>
			  <input type="checkbox" id="Isan-1540"   name="Characters_Filter" value="1540">
			  <label for="Isan-1540"><img src="https://i.postimg.cc/hjYRNp3m/1540.png">
			  </label> 	
			</li>	
			<li>
			  <input type="checkbox"...

CSS

ul {
	list-style-type: none;
  }
  
  li {
	display: inline-block;
  }
  
  input[type="checkbox"] {
	display: none;
  }
  
  label {
	border: 1px solid #fff;
	padding: 10px;
	display: block;
	position: relative;
	margin: 10px;
	cursor: pointer;
  }
  
  label:before {
	background-color: white;
	color: white;
	content: " ";
	display: block;
	border-radius: 50%;
	border: 1px solid grey;
	position: absolute;
	top: -5px;
	left: -5px;
	width: 25px;
	height: 25px;
	text-align: center;
	line-height: 28px;
	transition-duration: 0.4s;
	transform: scale(0);
  }
  
  label img {
	opacity:50%;
	width: 64px;
	height: 64px;
	margin: -20px;
	margin-bottom: -15px;
	margin-top: 4px;
  
  
  }
  
  :checked + label {
	border:2px;
	border-color:black;
	
	  
  
  }
  
  
  
  :checked + label img {

	/* box-shadow: 0 0 5px #333; */
	z-index: -1;
	opacity:100%;
	width: 64px;
	height: 64px;
	border: 4px solid;
	margin: -20px;
	margin-bottom: -15px;
	margin-top: 4px;

	
  }
  
  




.ui-tooltip {
    white-space: pre-line;
    text-align: center;
    font-weight:bold;
    position: absolute;
}

JavaScript

$(document).ready(function() {
  var data = {
  
     1553: "Aizen\n(Thousand-Year Blood War: The Agony version)" ,
    1552: "Genryusai\n(Thousand-Year Blood War: The Fire version)"
  
  };
  
  for (var i in data) {
    $('#filterNEWEST')
      .append(`<li>
      <div class="input-group input-group-sm mb-3"></div>
      <input type="checkbox" id="NEWEST-${i}" name="Characters_Filter" value="${i}" />
      <label title="${data[i]}" for="NEWEST-${i}"><img src="static/images/char/${i}.png"/> </label>
      </li>`)

  }
  });


$(document).ready(function () {
  var dataJSON =
    "https://raw.githubusercontent.com/TheNerdy97/BraveGacha.io/main/d2.json";
  var table = $("#accountsTable").DataTable({
    order: [[2, "asc"]],
    createdRow: addChildRow,

    columns: [
      {
        title: "Code",
        data: "code"
      },
      {
        title: "Orbs",
        data: "orbs",
        sortable: true,
        render: getOrbs
      },
      {
        title: "Price",
        data: "price",
        render: getPrice
      },
      {
        data: "images",
        className: "never"
      },
      {
        data: "date",
        className: "never"
      }
    ],

    deferRender: true,
    stateSave: true,
    processing: true,
    responsive: true,
    ajax: {
      url: dataJSON
    },

    columnDefs: [
      {
        width: "20%",
        targets: 0
      }
    ]
  });

  $(':checkbox[name="Characters_Filter"]').click(function () {
    var filter = "",
      regexFilter = true,
      smartFilter = false;

    filter = $('[name="' + this.name + '"]:checked')
      .map(function () {
        return (".*(" + this.value + ")");
        
      })
      .toArray()
      .join("+");

    $("#accountsTable")
      .dataTable()
      .fnFilter(filter, 3, regexFilter, smartFilter);
  });

  function addChildRow(row, data, index) {
    var accountDate = data.date;
    var accountImages = data.images;
    accountImages = JSON.stringify(accountImages);

    var ImagesString...