<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
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.