here i'm working to adapt a project with react. I've this rendered page which gets loaded with few buttons and i want to add some padding through them (margin-left:5px). I can't bring this to work, i think i'm using the wrong approach. Any ideas?

Thank you

<style>
   .button {
      margin-left 5px;
           }
</style>
  <div className="flex flex-col items-center justify-center h-screen">
      <img className="h-48 m-4" src={logo} alt="logo" />
      <div className="flex p-6">
        <Link to={`/1`}>
          <button
            disabled={!status}
            className={
              status
                ? "bg-green-500 text-white font-bold py-2 px-4 rounded hover:bg-green-700"
                : "bg-red-500 text-white font-bold py-2 px-4 rounded bg-opacity-50 cursor-not-allowed"
            }
          >
            1
          </button>
        </Link>
        <Link to={`/2`}>
          <button
            className={
              status
                ? "bg-green-500 text-white font-bold py-2 px-4 rounded hover:bg-green-700"
                : "bg-red-500 text-white font-bold py-2 px-4 rounded bg-opacity-50 cursor-not-allowed"
            }
          >
            2
          </button>
        </Link>
        <Link to={`/3`}>
          <button
            className={
              status
                ? "bg-green-500 text-white font-bold py-2 px-4 rounded hover:bg-green-700"
                : "bg-red-500 text-white font-bold py-2 px-4 rounded bg-opacity-50 cursor-not-allowed"
            }
          >
            3
          </button>
        </Link>
      </div>
      <p className="text-sm text-gray-500 mx-2 py-2">{description}</p>
    </div>

CodePudding user response：

could this implementation help you? I use it if the component styling is already set and you want to add some more. This work for me. (The other buttons are just for margin illustration) https://codesandbox.io/s/eloquent-banzai-q619o5?file=/src/App.js

<button style={{ margin: "20px" }}>One</button>