JSFiddle - React, Tailwind, and code Playground

by Gwyn Milcote

HTML

<link href='https://fonts.googleapis.com/css?family=Alegreya' rel='stylesheet'>

<div id='container'>
    
    <div id='header'>logo</div>
    
    <div id='content'>
        
        <p>You know Banksy, that anonymous guy who pops up in random places and leaves interesting graffiti. I often daydream about doing similar. The UK has loads of ugly walls that could be covered with birds and flowers. But as a tiny lone woman, it's not safe to be out overnight.</p>
        
        <p>So I try a different approach: paint nice things and send them to random people in the post. Someone's day is (hopefully) brightened, I get to practice my art skills, and there's no chance of mugging or murder. Win win!</p>
        
        <div class='pagination-container'></div>
        
        <div id='thumbs-container'>[generate]</div>
        
        <div class='pagination-container'></div>

    
        <p>
            <b>What materials are used?</b>
            <br>Pen, pencil, watercolour. Cheap stuff.
        </p>
        <p>
            <b>Who are you?</b>
            <br>Anonymous :) I like it, it's fun.
        </p>
        <p>
            <b>Have I seen your art before?</b>
            <br>Probably not. I've never sold or exhibited any paintings. This is just a secret hobby that no-one knows about.
        </p>
        <p>
            <b>Well, someone's selling copies...</b>
            <br>Cheeky buggers! Please send me the details ASAP and I'll get them shut down.
        </p>
        <p>
            <b>Can I request / commission something?</b>
            <br>Maybe? I have no idea how much to charge. Send me your idea and I'll see if I have time.
        </p>
        <p>
            <b>I don't like my surprise painting.</b>
            <br>Oh well. Give it away, sell for charity, or leave in a public place for some other stranger to find.
        </p>
        <p>
            <b>I do like my surprise painting!</b>
            <br>Fabulous :)
        </p>
        <p>
    ...

CSS

div, img, p, button {
    box-sizing: border-box;
}

body {
    background-color: lightblue;
    color: rgba(0, 0, 0, 0.7);
}
htl, body, button {
    font-family: 'Alegreya', sans-serif;
}

#container {
    width: 940px;
    margin: 40px auto;
}

#header {
    text-align: center;
}

#footer {
    text-align: center;
}

#content {
    background-color: #fff;
    padding: 30px 40px;
    margin: 20px 0;
    border-radius: 3px;
}

#thumbs-container {
    width: calc(100% + 40px);
    position: relative;
    left: -20px;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

#thumbs-container .thumb {
    width: 205px;
    margin: 6px;
    border: 1px solid silver;
    border-radius: 3px;
    overflow: hidden;
    padding-bottom: 4px;
    text-align: center;
}
#thumbs-container .thumb:hover {
    cursor: pointer;
    background-color: #efefef;
    border: 1px solid grey;
}
#thumbs-container .thumb-img {
    background-color: skyblue;
    height: 130px;
    margin-bottom: 4px;
}
#thumbs-container .thumb-img img {
    width: 100%;
    height: 100%;
}
#thumbs-container .thumb-name {
    padding: 4px 10px;
}
#thumbs-container .thumb-sent {
    color: grey;
    font-style: italic;
}


ul {
    list-style-type: circle;
    margin: 20px 0;
    padding-left: 15px;
}

ul li {
    margin-bottom: 10px;
}

/* PAGINATION */

div.pagination {
	width: calc(100% + 60px);
	position: relative;
	left: -30px;
	margin: 10px auto;
	text-align: center;
	/*background-color: #eee;
	border-top: 1px solid silver;
	border-bottom: 1px solid silver;*/
	padding: 5px;
}
div.pagination button {
	margin: 4px;
	border: 1px solid silver;
	color: grey;
    background-color: #fff;
	padding: 6px 12px;
    border-radius: 2px;
    font-size: 16px;
}
div.pagination button:hover {
	cursor: pointer;
	border: 1px solid silver;
	background-color: #eee;
	color: grey;
	text-decoration: none;
}
div.pagination button.page-current {
	border: 1px solid silver;
	background-color: #eee;
	color:...

JavaScript

const imagePath = "url.com";

const pieces = [

    {
        id: 1, name: "Scarlet Macaw",
        sent: "date here",
        to: "destination"
    },{
        id: 2, name: "Kohaku Koi",
        sent: "date here",
        to: "destination"
    },{
        id: 3, name: "Military Macaw",
        sent: "date here",
        to: "destination"
    },{
        id: 4, name: "Shubunkin",
        sent: "date here",
        to: "destination"
    },{
        id: 5, name: "Budgies",
        sent: "date here",
        to: "destination"
    },{
        id: 6, name: "Finches",
        sent: "date here",
        to: "destination"
    },{
        id: 7, name: "Lobster",
        sent: "date here",
        to: "destination"
    },{
        id: 8, name: "Robin",
        sent: "date here",
        to: "destination"
    },{
        id: 9, name: "Blackbird",
        sent: "date here",
        to: "destination"
    },{
        id: 10, name: "S",
        sent: "date here",
        to: "destination"
    },{
        id: 11, name: "Sthh",
        sent: "date here",
        to: "destination"
    },{
        id: 12, name: "Schhhhh",
        sent: "date here",
        to: "destination"
    },{
        id: 13, name: "Syyyy",
        sent: "date here",
        to: "destination"
    },{
        id: 14, name: "Sddd",
        sent: "date here",
        to: "destination"
    },{
        id: 15, name: "Sddd",
        sent: "date here",
        to: "destination"
    },{
        id: 16, name: "Sddd",
        sent: "date here",
        to: "destination"
    },{
        id: 17, name: "Sddd",
        sent: "date here",
        to: "destination"
    },{
        id: 18, name: "Sddd",
        sent: "date here",
        to: "destination"
    },{
        id: 19, name: "Sddd",
        sent: "date here",
        to: "destination"
    },{
        id: 20, name: "Sddd",
        sent: "date here",
        to: "destination"
    },{
        id: 21, name: "Sddd",
        sent: "date here",
        to: "destination"
   ...