import React from 'react'

import styled, { injectGlobal, keyframes } from '../dist/styled-components'

export default () => {

injectGlobal`

body {

font-family: sans-serif;

}

`

// Create a <Title> react component that renders an <h1> which is

// centered, palevioletred and sized at 1.5em

const Title = styled.h1`

font-size: 1.5em;

text-align: center;

color: palevioletred;

animation: ${keyframes`from { opacity: 0; }`} 1s both;

`;

// Create a <Wrapper> react component that renders a <section> with

// some padding and a papayawhip background

const Wrapper = styled.section`

padding: 4em;

background: papayawhip;

`;

return class Example extends React.Component {

render() {

return (

<Wrapper>

<Title>Hello World, this is my first styled component!</Title>

</Wrapper>

)

}

}

}