import React from 'react'

export default props => {
  const { onClick, disabled } = props
  return (
    <button
      {...{
        onClick,
        disabled
      }}
      className='inline-flex items-center justify-center w-8 h-8 p-4 m-2 text-xl text-red-200 bg-transparent rounded-full hover:text-red-500 hover:bg-red-100 focus:outline-none focus:shadow-outline active:bg-red-300 active:text-red-700'
    >
      x
    </button>
  )
}

import React from 'react'

export default props => {
  const { onClick, disabled } = props
  return (
    <button
      {...{
        onClick,
        disabled
      }}
      className='inline-flex items-center justify-center w-8 h-8 p-4 m-2 text-red-200 bg-transparent rounded-full hover:text-red-500 hover:bg-red-100 focus:outline-none focus:shadow-outline active:bg-red-300 active:text-red-700'
    >
      x
    </button>
  )
}

--- 
+++ 
@@ -8,7 +8,7 @@
         onClick,
         disabled
       }}
-      className='inline-flex items-center justify-center w-8 h-8 p-4 m-2 text-red-200 bg-transparent rounded-full hover:text-red-500 hover:bg-red-100 focus:outline-none focus:shadow-outline active:bg-red-300 active:text-red-700'
+      className='inline-flex items-center justify-center w-8 h-8 p-4 m-2 text-xl text-red-200 bg-transparent rounded-full hover:text-red-500 hover:bg-red-100 focus:outline-none focus:shadow-outline active:bg-red-300 active:text-red-700'
     >
       x
     </button>
Make close button X larger
