JSFiddle - React, Tailwind, and code Playground

by Greggg

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.19/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.19/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.19/js/uikit-icons.min.js"></script>
<div class="uk-scope">

  <div class="pb-sidebar">
    <div class="pb-sidebar-wrapper">
      <div class="pb-sidebar-content">
        <div class="uk-margin-large-top pb-sidebar-header" data-uk-grid="">
          <div class="uk-width-expand">
            <h3 class="uk-margin-remove-bottom">Home</h3>
          </div>
          <!--KAVIN ADD LIBRARY BUTTON-->
          <div class="uk-width-auto uk-flex uk-flex-middle"><a href="#pb-library-modal" data-uk-toggle class="uk-button uk-button-small uk-button-primary uk-margin-right">Library</a></div>
          <!--END-->
        </div>
        <div class="pb-sections pb-padding">
          <div class="pb-section uk-visible-toggle">
            <div class="uk-flex uk-flex-middle uk-margin-small-bottom"><label class="uk-form-label uk-text-uppercase">Section</label>
              <div class="pb-section-nav uk-margin-small-left">
                <ul class="uk-grid-collapse uk-invisible-hover" data-uk-grid="">
                  <li><a href="#" class="pb-icon-edit"></a></li>
                  <li><a href="#" class="pb-icon-copy"></a></li>
                  <!--KAVIN ADD SAVE ICON-->
                  <li><a href="#pb-modal-save-section" class="pb-icon-save" data-uk-toggle></a></li>
                  <!--END-->
                  <li><a href="#" class="pb-icon-delete"></a></li>
                </ul>
              </div>
            </div><a class="pb-add-section" data-uk-tooltip="title:Add section; pos: right; delay: 500"></a>
            <div class="pb-grids">
              <div class="pb-grid uk-visible-toggle">
                <div>
                  <div class="pb-grid-nav">
                    <ul class="uk-grid-collapse uk-flex-column...

CSS

/************************************************/
/* KAVIN TO ADD TO APP.CSS
/************************************************/

.pb-icon-save {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2212%22%20height%3D%2214%22%20viewBox%3D%220%200%2012%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23a0a0a0%22%20x%3D%225%22%20y%3D%221%22%20width%3D%221%22%20height%3D%229%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23a0a0a0%22%20points%3D%228.3%204.24%204.8%200.71%205.5%200%209%203.54%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23a0a0a0%22%20points%3D%222%203.54%204.8%200.71%205.5%201.41%202.7%204.24%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23a0a0a0%22%20points%3D%221%2013%2010%2013%2010%205%2011%205%2011%2014%200%2014%200%205%201%205%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

.pb-icon-save:hover {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2212%22%20height%3D%2214%22%20viewBox%3D%220%200%2012%2014%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23444%22%20x%3D%225%22%20y%3D%221%22%20width%3D%221%22%20height%3D%229%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23444%22%20points%3D%228.3%204.24%204.8%200.71%205.5%200%209%203.54%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23444%22%20points%3D%222%203.54%204.8%200.71%205.5%201.41%202.7%204.24%22%20%2F%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23444%22%20points%3D%221%2013%2010%2013%2010%205%2011%205%2011%2014%200%2014%200%205%201%205%22%20%2F%3E%0A%3C%2Fsvg%3E");
}


/************************************************/
/* BELOW ALREADY IN APP.CSS
/************************************************/


/************************************************/
/* UIKIT MODIFIER
/************************************************/

.uk-scope .uk-modal-close-full {
    background: transparent;
}

.uk-scope .uk-icon-button-large {
    width: 44px;
    height:...