JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-57961db96b962748"></script>
<div class="addthis_responsive_sharing"> <!-- This line initiates the plugin -->
  <div id="share-this"> <!-- I want to hide this div only if the plugin is blocked or not visible on the screen for some other reason -->
    <div class="share-text">Share this!</div>
    <span class="share-arrow right-arrow" style="font-size:24px;">&#10553;</span>
  </div>
  <!-- This is the parent div for the actual social buttons. It, and the code within it is normally generated when the page loads. -->
  <div id="atrsb" class="at-resp-share-element addthis_32x32_style at-mobile addthis-smartlayers addthis-animated at4-show">
    <!-- Facebook - I pulled this from the live code just to display the FB icon -->
    <span class="at-icon-wrapper" style="background-color: rgb(59, 89, 152);">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 32 32" title="Facebook" alt="Facebook" class="at-icon at-icon-facebook" style="fill: rgb(255, 255, 255);">
        <g>
          
        </g>
      </svg>
    </span> <!-- /.Facebook -->
    
  </div> <!-- /.atrsb -->
  
</div> <!-- /.addthis_responsive_sharing>

CSS

.share-text {
	  position: relative;
	  top: 26px;
	  left: 5px;
	  font-style: italic;
	  color: #272727;
	}
	
	.share-arrow {
	  position: relative;
	  left: -5px;
	  top: 17px;
	  color: #807E7E;
	}
	
	.at-icon-wrapper {
	  border-radius: 50%;
	  height: 35px;
	  width: 35px;
	}


  }