<div id="root"></div>

.bookShelf {
  display: flex;
  gap: 1px;
  align-items: flex-end;
  /* border-bottom: 15px solid #ebaa91; */
}

body {
  background: #0b2f0c;
  height: 100vh;
  padding: 2rem 0;
  overflow: hidden;
}
html {
  overflow: hidden;
}

import React from "https://esm.sh/react@18";
import ReactDOM from "https://esm.sh/react-dom@18";

const rand = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
};

const App = () => {
  return <div className="bookShelf">{BOOKS}</div>;
};

const Book = (props) => {
  return <div className="book" {...props} />;
};

const BOOKS = [];
for (let i = 0; i < 50; i++) {
  BOOKS.push(
    <Book
      style={{
        height: rand(80, 150),
        flexGrow: rand(100, 500),
        rotate: rand(-2, 2) + "deg",
        // A library that's fun to play with, but not needed.
        // backgroundColor: Please.make_color({
        //   base_color: "orangered"
        // })
        backgroundColor: `hsl(${rand(0, 50)} ${rand(50, 80)}% ${rand(50, 60)}%)`
      }}
    />
  );
}

ReactDOM.render(<App />, document.getElementById("root"));