Horror
React HTML elements with CSS-in-JS
npm i horror
GitHub<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>