In this tutorial, we will learn Jquery UI Styles Tag Example Tutorial


Example:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.jqueryscript.net/demo/Easy-Stylable-jQuery-Tags-Input-Plugin-Tag-Input/src/jquery.taginput.css">
  <style type="text/css">
    .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
        color: #1c94c4;
    }
    .container{
      margin-top:150px;
    }
    body{
      background-color: #3ed68e;
    }
  </style>
</head>
  <body>
  <div class="container">
    <div class="col-md-5 col-md-offset-3">
    <h4 class="text-center">Jquery UI Styles Tag Example</h4>
    <div class="panel panel-default">
        <div class="panel-body">
          <input id="taginput-jqueryui" type="text" value="jQuery,tag,ui" />
      </div>
    </div>
    </div>    
  </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Easy-Stylable-jQuery-Tags-Input-Plugin-Tag-Input/src/jquery.taginput.src.js"></script>
<script type="text/javascript">
  jQuery(function($) {
      'use strict';
      $('.panel-default').hover(
        function(){
        $(this).addClass('panel-primary').removeClass('panel-default');
        },

        function(){
        $(this).removeClass('panel-primary').addClass('panel-default');
        }
      );
      prettyPrint();

      $('#taginput-jqueryui').taginput();

      $('#taginput-bootstrap').taginput({
          style: 'bootstrap'
      });

      $('#taginput-custom').taginput({
          style: {
            tagTpl: $('#wrapperTpl').html(),
              wrapperTpl: '<div class="custom-style">',
              deleteHandler: '.ui-icon-close'
          }
      });
  });
</script>
</html>


May this example help you.