diff options
| -rw-r--r-- | src/Card.js | 12 | ||||
| -rw-r--r-- | tailwind.config.js | 14 |
2 files changed, 14 insertions, 12 deletions
diff --git a/src/Card.js b/src/Card.js index 626cec0..86ee54d 100644 --- a/src/Card.js +++ b/src/Card.js @@ -8,21 +8,21 @@ const Card = (props) => { diff = "+" + diff.toString(); } return ( - <div className="Card bg-white rounded-lg border-2 border-orange-300 p-4 m-4"> - <Link to={props.link}> + <Link className="Card" style={{padding: 0}} to={props.link}> + <div className="group bg-white hover:bg-orange-400 rounded-lg border-2 border-orange-300 hover:border-orange-400 p-4 m-6 transition ease-in-out duration-300"> <p> - <span className="text-2xl"> + <span className="text-2xl group-hover:text-white transition ease-in-out duration-300"> {props.latest} {props.suffix}{" "} </span> - <span className="Diff text-gray-600 text-sm"> + <span className="Diff text-gray-600 group-hover:text-gray-100 text-sm transition ease-in-out duration-300"> ({diff} {props.suffix}) </span> </p> - <h3 className="text-base">{props.name}</h3> - </Link> + <h3 className="text-base group-hover:text-white transition ease-in-out duration-300">{props.name}</h3> </div> + </Link> ); }; diff --git a/tailwind.config.js b/tailwind.config.js index 3de92ff..d6359c8 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,11 +1,13 @@ module.exports = { purge: ["./src/**/*.html", "./src/**/*.jsx", "./src/**/*.js"], theme: { - extend: { - screens: { - xs: { max: "400px" }, + extend: { + screens: { + xs: { max: "400px" }, + }, }, - }, }, - }; -
\ No newline at end of file + variants: { + textColor: ["responsive", "hover", "focus", "group-hover"], + }, +}; |