Styling for React-Table component

Question

I'm trying to style a component properly. At the moment, the table works beautifully, but the style of it isn't ideal, and usually this would be easy to fix with tailwind but the components layout makes it very confusing to know exactly how to style it.

This is the example I am referencing,

https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink

Now specifically what I want to change is the group functions. Currently the use emoji's to work, I really want to to be a proper button so users understand very clearly the functionality of the component, as below.

<table className="w-full text-md bg-white shadow-md rounded mb-4" {...getTableProps()}>
          <thead>
            {headerGroups.map(headerGroup => (
              <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.map(column => (
                  <th className={td_header} {...column.getHeaderProps()}>
                    <div>
                      {column.canGroupBy ? (
                        // If the column can be grouped, let's add a toggle
                        <span {...column.getGroupByToggleProps()}>
                          {column.isGrouped ? 'Click to Un-Group 🛑 Click to Sort!' : ' Click to Group 🔮 Click to Sort!'}
                        </span>
                      ) : null}
                      <span {...column.getSortByToggleProps()}>
                        {column.render('Header')}
                        {/* Add a sort direction indicator */}
                        {column.isSorted
                          ? column.isSortedDesc
                            ? ' 🔽'
                            : ' 🔼'
                          : ''}
                      </span>
                    </div>
                    {/* Render the columns filter UI */}
                    <div>{column.canFilter ? column.render('Filter') : null}</div>
                  </th>
                ))}

Now ideally I want something like this for the group and filter toggle, taken from tailwind https://tailwindcss.com/components/buttons

<div class="inline-flex">
  <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-l">
    Group
  </button>
  <button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-r">
    Filter
  </button>
</div>

How does one go about styling this effectively, given the string it is using is not a component and does not have any styling that I can see involved?

Thanks in advance,