Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Tailwind (with twin.macro), Emotion, NextJS and ChakraUI
/** @jsx jsx */
import { jsx, css } from '@emotion/core'
import tw from 'twin.macro'
import { Button, Input } from 'systems/Core'
export const Subscribe: React.FC = () => {
return (
<div css={styles.Root}>
<h4>Subscribe to our newsletter</h4>
<div>
The latest news, articles, and resources, sent to your inbox weekly.
</div>
<form>
<Input type="email" placeholder="Enter your email" />
<Button intent="primary">Register</Button>
</form>
</div>
)
}
const styles = {
Root: css`
${tw`mt-4`};
h4 {
${tw`text-xs text-gray-600 mb-1`};
}
div {
${tw`text-sm text-gray-500`};
}
form {
${tw`flex mt-3`};
}
input {
${tw`max-w-xs`};
}
button {
${tw`ml-4`};
}
`,
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.