JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.15.0/vis.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.15.0/vis.css">
<p>
  image icon and background is not printable. how to fix that
</p>

<div id="visualization"></div>

CSS

.vis-item.vis-line {
        position: absolute;
        border-width: 2px;
        border-color: red;
      }
      
      .vis-item.vis-box {
        border-width: 1;
        text-align: left !important;
        background-color: transparent !important;
        border-left-width: 1px;
        border-color: red;
      }
 .vis-item-content:after {
                width: 40px;
                height: 40px;
                background-color: transparent;
                background: url("https://image.flaticon.com/icons/svg/306/306470.svg");
                background-size: 40px 40px;
                content: "";
                position: absolute;
                z-index: 2 !important;
         	}

JavaScript

var container = document.getElementById('visualization');

  
   var items = new vis.DataSet([
    {id: 'A', content: 'Period A', start: '2014-01-16', end: '2014-01-22', type: 'background'},
    {id: 'B', content: 'Period B', start: '2014-01-25', end: '2014-01-30', type: 'background', className: 'negative'},
    {id: 1, content: 'item 1<br>start', start: '2014-01-23'},
    {id: 2, content: 'item 2', start: '2014-01-18'},
    {id: 3, content: 'item 3', start: '2014-01-21'},
    {id: 6, content: 'item 6', start: '2014-01-26'}
  ]);
    var options = {
     showCurrentTime: true,
     orientation: {axis: 'both', item: 'top'}, 
     height: 400,
     margin: {
         axis: 100
    }
  };
  var timeline = new vis.Timeline(container, items, options);
  // add event listener