Tailwind (with twin.macro), Emotion, NextJS and ChakraUI

Subscribe.tsx

/** @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`};
    }
  `,
}