Make basic version work using bootstrap.

app/src/components/bookcard.js

@@ -1,30 +1,22 @@
 import PropTypes from "prop-types"
 import React from "react"
 import StarRatings from 'react-star-ratings';
+import { Card, Row, Col } from 'react-bootstrap';
 
 const BookCard = ({ book }) => (
-    <div className="mx-auto flex-grow-0 w-11/12 md:w-56 rounded-lg overflow-hidden shadow-lg m-3 flex flex-column flex-wrap items-stretch">
-    <img className="self-start" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1457284880l/27220736.jpg" alt="Sunset in the mountains" />
-    <div className="px-6 py-4 w-full content-start">
-      <div className="font-bold text-xl mb-0">{ book.title }</div>
-      <div className="text-gray-700 font-bold text-base mb-1">
-        <span className="mr-2 align-middle">{ book.year }</span>
-        <StarRatings
-          rating={ parseFloat(book.rating) }
-          numberOfStars={5}
-          starDimension="18px"
-          starSpacing="1px"
-          starRatedColor="#fa604a"
-        />
-      </div>
-      <p className="text-gray-700 text-base">
-        { book.author }
-      </p>
-    </div>
-    <div className="w-full self-end">
-      <span className="inline-block bg-blue-600 px-3 py-1 text-lg font-semibold text-gray-100 mr-2 w-full text-center">{book.category}</span>
-    </div>
-  </div>
+  <Card style={{ width: '44rem', height: '12rem' }}>
+    <Row>
+      <Col>
+        <Card.Img variant="side" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1457284880l/27220736.jpg" />
+      </Col>
+      <Col>
+        <Card.Body>
+          <Card.Title>{book.title}</Card.Title>
+          <Card.Subtitle className="mb-2 text-muted">{book.author}</Card.Subtitle>
+        </Card.Body>
+      </Col>
+    </Row>
+  </Card>
 )
 
 BookCard.propTypes = {
@@ -32,7 +24,7 @@ BookCard.propTypes = {
 }
 
 BookCard.defaultProps = {
-  book:{},
+  book: {},
 }
 
 export default BookCard

app/src/components/layout.js

@@ -11,6 +11,7 @@ import { useStaticQuery, graphql } from "gatsby"
 
 import Header from "./header"
 import "./layout.css"
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 const Layout = ({ children }) => {
   const data = useStaticQuery(graphql`

app/src/pages/index.js

@@ -4,6 +4,8 @@ import { graphql } from 'gatsby'
 import Layout from "../components/layout"
 import SEO from "../components/seo"
 import BookCard from "../components/bookcard"
+import SideBar from "../components/sidebar";
+import {Container, Row, Col} from 'react-bootstrap';
 
 function myFunction(setEnd, end) {
   if (document.documentElement.clientHeight+document.documentElement.scrollTop>=document.documentElement.scrollHeight) {
@@ -19,17 +21,24 @@ export default ({data}) => {
   return (
     <Layout>
       <SEO title="Home" />
-      <div className="flex flex-row flex-wrap">
-      {data.allBooksJson.edges.map(function(x, index) {
-        if(index<end){
-          return (
-            <BookCard book={x.node} key={x.node.id} />
-          )
-        }else{
-          return null;
-        }
-      })}
-      </div>
+      <Container fluid>
+        <Row>
+          <Col xs={2}>
+            <SideBar />
+          </Col>
+          <Col>
+              {data.allBooksJson.edges.map(function(x, index) {
+                  if(index<end){
+                    return (
+                      <BookCard book={x.node} key={x.node.id} />
+                    )
+                  }else{
+                    return null;
+                  }
+              })}
+          </Col>
+        </Row>
+      </Container>
     </Layout>
   )
 }

app/src/styles/global.css

@@ -1,5 +0,0 @@
-@tailwind base;
-
-@tailwind components;
-
-@tailwind utilities;