Horror

npm i horror

<Div css={{
  padding: '64px'
}}>
  <H1 css={{
    margin: 0,
    marginBottom: '32px',
    display: 'inline-block',
    fontSize: '48px',
    paddingTop: '8px',
    paddingBottom: '8px',
    paddingLeft: '32px',
    paddingRight: '32px',
    color: 'white',
    backgroundColor: 'red',
    transform: 'skew(-6deg)',
    '@media screen and (min-width: 48em)': {
      fontSize: '64px'
    }
  }}>
    Horror
  </H1>
  <P css={{
    margin: 0,
    marginBottom: '32px',
    fontSize: '20px',
    fontWeight: 'bold'
  }}>
    React HTML elements with CSS-in-JS
  </P>
  <Pre css={{
    fontFamily: 'Menlo, monospace',
    fontSize: '14px',
    color: 'red'
  }}>
    npm i horror
  </Pre>
  <A href='https://github.com/jxnblk/horror'
    css={{
      textDecoration: 'none',
      fontWeight: 'bold',
      display: 'inline-block',
      padding: '16px',
      borderRadius: '4px',
      color: 'white',
      backgroundColor: 'red',
      '&:hover': {
        backgroundColor: '#900',
      }
    }}>
    GitHub
  </A>
</Div>