JSFiddle - React, Tailwind, and code Playground

by gmdavis62

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col-sm-6 col-edit" contenteditable="false" data-tags="99">
      
       <input type="text" placeholder="add tag">
       <div id="scroll">
        <div class="badge badge-secondary">Snow <span>&times;</span></div>
        <div class="badge badge-secondary">Leaf <span>x</span></div>
        <div class="badge badge-secondary">Cloud/Smoke <span>x</span></div>
        <div class="badge badge-secondary">Snow <span>x</span></div>
        <div class="badge badge-secondary">Leaf <span>x</span></div>
        <div class="badge badge-secondary">Cloud/Smoke <span>x</span></div>
        <div class="badge badge-secondary">Snow <span>x</span></div>
        <div class="badge badge-secondary">Leaf <span>x</span></div>
        <div class="badge badge-secondary">Cloud/Smoke <span>x</span></div>
      </div>
    </div>
  </div>  
</div>

CSS

.row {
  margin-top: 20px;
}

.col-edit {
  display: flex;
  width: 100%;
  height: calc(1.5em + .75rem + 2px);
  padding: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: .25rem;
  word-wrap:none;
  white-space:nowrap;
  overflow:hidden;
}
.col-edit:after{
  content: attr(data-tags) " ";
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 0;
  right: 0;
  font-size: 0.675rem;
  background-color: red;
  color: white;
  border-radius: 50%;
  text-align: center;
}
.col-edit input{
  border:none;
  width: 10rem;
  align-self: center;
  margin-left: .75rem;
}
#scroll{
  overflow-x: scroll;
  padding: .375rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#scroll > div{
  padding: 0.375rem 0.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-items: center;
  margin-right: 0.4rem;
  cursor: pointer;
}
#scroll > div span{
  border-left: 1px solid #666;
  text-align: center;
  color: #ccc;
  padding-left: 0.4rem;
  margin-left: 0.4rem;
}
#scroll::-webkit-scrollbar {
  /* display: none; */
}
#scroll::-webkit-scrollbar {
    width: 0px;     /* Tamaño del scroll en vertical */
    height: 2px;    /* Tamaño del scroll en horizontal */
    display: block;  /* Visibilidad scroll */
}

/* Ponemos un color de fondo y redondeamos las esquinas del thumb */
#scroll::-webkit-scrollbar-thumb {
    background: #f00;
    border-radius: 4px;
}

/* Cambiamos el fondo y agregamos una sombra cuando esté en hover */
#scroll::-webkit-scrollbar-thumb:hover {
    background: #b3b3b3;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}

/* Cambiamos el fondo cuando esté en active */
#scroll::-webkit-scrollbar-thumb:active {
    background-color: #999999;
}
/* Ponemos un color de fondo y redondeamos las esquinas del track */
#scroll::-webkit-scrollbar-track {
    background: #e1e1e1;
   ...

JavaScript

function getAmountOfTags() {
	var tags = $('#scroll > div');
	return parseInt(tags.length);
}

function setAmountOfTags() {
	var amount = getAmountOfTags();
	$('.col-edit').attr('data-tags', amount);
}

$(document).ready(function() {
	setAmountOfTags();
});
$('.col-edit input').bind('click', function() {
	setAmountOfTags();
});

$('#scroll > div').bind('click', function() {
	$(this).remove();
  setAmountOfTags();
  
});