title: Styling for React-Table component
body: <p>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.</p>
  
  <p>This is the example I am referencing,</p>
  
  <p><a href="https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink" rel="nofollow noreferrer">https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/kitchen-sink</a></p>
  
  <p>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.</p>
  
  <pre><code>&lt;table className="w-full text-md bg-white shadow-md rounded mb-4" {...getTableProps()}&gt;
            &lt;thead&gt;
              {headerGroups.map(headerGroup =&gt; (
                &lt;tr {...headerGroup.getHeaderGroupProps()}&gt;
                  {headerGroup.headers.map(column =&gt; (
                    &lt;th className={td_header} {...column.getHeaderProps()}&gt;
                      &lt;div&gt;
                        {column.canGroupBy ? (
                          // If the column can be grouped, let's add a toggle
                          &lt;span {...column.getGroupByToggleProps()}&gt;
                            {column.isGrouped ? 'Click to Un-Group  Click to Sort!' : ' Click to Group  Click to Sort!'}
                          &lt;/span&gt;
                        ) : null}
                        &lt;span {...column.getSortByToggleProps()}&gt;
                          {column.render('Header')}
                          {/* Add a sort direction indicator */}
                          {column.isSorted
                            ? column.isSortedDesc
                              ? ' '
                              : ' '
                            : ''}
                        &lt;/span&gt;
                      &lt;/div&gt;
                      {/* Render the columns filter UI */}
                      &lt;div&gt;{column.canFilter ? column.render('Filter') : null}&lt;/div&gt;
                    &lt;/th&gt;
                  ))}
  </code></pre>
  
  <p>Now ideally I want something like this for the group and filter toggle, taken from tailwind 
  <a href="https://tailwindcss.com/components/buttons" rel="nofollow noreferrer">https://tailwindcss.com/components/buttons</a></p>
  
  <pre><code>&lt;div class="inline-flex"&gt;
    &lt;button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-l"&gt;
      Group
    &lt;/button&gt;
    &lt;button class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-r"&gt;
      Filter
    &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>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?</p>
  
  <p>Thanks in advance,</p>