JSFiddle - React, Tailwind, and code Playground

by Yair Even Or

HTML

<div id="root"></div>

CSS

@property --color-a {
  syntax: '<color>';
  inherits: false;
  initial-value: red;
}

@property --color-b {
  syntax: '<color>';
  inherits: false;
  initial-value: green;
}

React

import * as React from "https://cdn.skypack.dev/react@^16.13.1";
import * as ReactDOM from "https://cdn.skypack.dev/react-dom@^16.13.1";
import styled from "https://cdn.skypack.dev/styled-components";

const StyledInput1 = styled.input`
  transition: all 1s;
  color: black;
  font-size: 20px;
  background: green;
  margin: 20px;
  padding: 20px;
  &:hover {
    background: red;
    color: white;
  }
`;
const StyledInput2 = styled.input`
  color: black;
  font-size: 20px;
  background: linear-gradient(180deg, var(--color-a) 0%, var(--color-b) 100%);
  margin: 20px;
  padding: 20px;
  transition: 1s, --color-a 1s, --color-b 1s;
  
  &:hover {
    --color-a: green;
    --color-b: red;
    color: white;
  }
`;
const App = () => (
  <>
    <StyledInput1 type="submit" value="StyledInput1" />
    <StyledInput2 type="submit" value="StyledInput2" />
  </>
);

ReactDOM.render(<App />, document.getElementById("root"));