<div id="root"></div>
:root{
--background: #232349;
--text: #cecbf8;
--pink: #f40099;
--yellow: #f5e43c;
--blue: #00f7f7;
--purple: #363663;
--gradient: linear-gradient(135deg, var(--yellow), var(--pink), var(--blue));
}
*, *:before, *:after {
box-sizing: border-box;
}
html{
font: 18px monospace;
}
body{
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
color: var(--text);
text-align: center;
}
img,
picture {
max-width: 100%;
display: block;
}
a:not([class]) {
text-decoration-skip-ink: auto;
}
html{
background: var(--background);
font: 18px sans-serif;
}
body{
text-align: center;
}
h1{
font-family: sans-serif;
text-transform: uppercase;
letter-spacing: 0.3em;
text-align: center;
font-size: 48px;
display: inline-block;
margin: 10px auto;
background: var(--gradient);
background-clip: text;
-webkit-background-clip: text;
-moz-background-clip: text;
text-fill-color: transparent;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
background-size: 100%;
-webkit-box-decoration-break: clone;
}
h2{
display: block;
font-size: 32px;
color: var(--white);
}
textarea, input{
background: var(--purple);
color: var(--text);
font-size: 24px;
padding: 0.6em 1em;
border: none;
border-radius: 0.6em;
outline: none;
display: flex;
margin: 0 auto;
}
button{
color: var(--blue);
background: transparent;
border: 1px var(--blue) solid;
padding: 8px;
text-transform: uppercase;
letter-spacing: 0.4em;
min-width: 10em;
margin: 4px;
}
button:hover, button:active, button:focus{
background: var(--blue);
color: var(--background);
}
p{
max-width: 40em;
margin: 1em auto;
}
ul{
list-style: none;
}
img{
display: block;
width: 200px;
margin: 0 auto;
}
.tag{
display: inline-block;
background: var(--blue);
color: var(--background);
padding: 4px;
border-radius: 4px;
margin-right: 4px;
}
import React from "https://cdn.skypack.dev/react"
import ReactDOM from "https://cdn.skypack.dev/react-dom"
const books = [
{ id: "B09123N2QN",
title: "Learn To Code With JavaScript",
author: "Darren Jones",
price: 2260,
pages: 425,
cover: "https://m.media-amazon.com/images/I/412KSS+3fjL._SX260_.jpg",
keywords: ["coding", "javascript", "beginner"]
},
{ id: "B088P9Q6BB",
title: "JavaScript: The Definitive Guide",
author: "David Flanagan",
price: 2399,
pages: 708,
cover: "https://m.media-amazon.com/images/I/51wijnc-Y8L._SX260_.jpg",
keywords: ["rhino", "javascript", "mastery"]
},
{ id: "B07C96Q217",
title: "Eloquent JavaScript",
author: "Marijn Haverbeke",
price: 1994,
pages: 474,
cover: "https://m.media-amazon.com/images/I/51-5ZXYtcML.jpg",
keywords: ["eloquent", "javascript", "modern"]
},
]
const Book = ({id,title,cover}) =>
<li key={id}>
<h2>{title}</h2>
<img alt={`cover of ${title}`} src={cover} />
</li>
const BookList = ({n}) =>
<div>
<h1>Books</h1>
<ul>
{books.slice(0,n).map(Book)}
</ul>
</div>
ReactDOM.render(<BookList n={2} />, document.getElementById("root"))
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.