<div id="root"></div>
body {
margin: 0;
}
import { styled } from "https://cdn.skypack.dev/@stitches/react";
import React from "https://cdn.skypack.dev/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";
const BRAND_COLOR = "#F06D06";
const Button = styled("button", {
background: "none",
border: `2px solid ${BRAND_COLOR}`,
color: BRAND_COLOR,
borderRadius: "3px",
padding: "1rem 2rem",
margin: "0.5rem",
"&:hover": {
color: "black"
},
variants: {
type: {
primary: {
backgroundColor: BRAND_COLOR,
color: "white"
}
}
}
});
const Container = styled("div", {
display: "grid",
height: "100vh",
placeItems: "center"
});
const App = () => {
return (
<Container>
<div>
<Button>Normal Button</Button>
<Button type="primary">Primary Button</Button>
</div>
</Container>
);
};
ReactDOM.render(<App />, document.getElementById("root"));
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.