import React from "react"; import Heading from "./Heading"; import Nav from "./Nav"; class Header extends React.Component { render() { return <header className="header"> <Heading></Heading> <Nav></Nav> </header>; } } export default Header; import React from "react"; class Heading extends React.Component { render() { return <h1 className="heading">Hello, world!</h1>; } } export default Heading; import React from "react"; import ListItem from "./ListItem"; class Nav extends React.Component { render() { return <nav className="nav"> <ul className="list"> <ListItem /> <ListItem /> </ul> </nav>; } } export default Nav; import React from "react"; class ListItem extends React.Component { render() { return <li className="list-item" />; } } export default ListItem; import React from "react"; import Form from "./Form"; class Main extends React.Component { render() { return <main className="main"> <Form></Form> </main>; } } export default Main; import React from "react"; import Field from "./Field"; class Form extends React.Component { render() { return <form action> <Field></Field> </form>; } } export default Form; import React from "react"; import Label from "./Label"; import Input from "./Input"; class Field extends React.Component { render() { return <div className="field"> <Label></Label> <Input /> </div>; } } export default Field; import React from "react"; class Label extends React.Component { render() { return <label htmlFor="input">Input<span>label</span></label>; } } export default Label; import React from "react"; class Input extends React.Component { render() { return <input type="text" id="input" />; } } export default Input;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter