<div id="root"></div>
  --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;

  font: 18px monospace;

  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  color: var(--text);
  text-align: center;

picture {
  max-width: 100%;
  display: block;

a:not([class]) {
  text-decoration-skip-ink: auto;

  background: var(--background);
  font: 18px sans-serif;

  text-align: center;

  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;

  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;

  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);

  max-width: 40em;
  margin: 1em auto;

  list-style: none;

  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,keywords}) => 
  <li key={id}>

const Tag = word =>
  <div className="tag">{word}</div>

const BookList = ({n}) =>

ReactDOM.render(<BookList />, 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.