Improving the UI of book cards

app/src/components/bookcard.js

@@ -3,13 +3,13 @@ import React from "react"
 import StarRatings from 'react-star-ratings';
 
 const BookCard = ({ book }) => (
-    <div className="w-56 rounded overflow-hidden shadow-lg m-3">
+    <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="w-full" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1457284880l/27220736.jpg" alt="Sunset in the mountains" />
+    <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">
+    <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> 
+        <span className="mr-2 align-middle">{ book.year }</span>
-        <StarRatings 
+        <StarRatings
           rating={ parseFloat(book.rating) }
           numberOfStars={5}
           starDimension="18px"
@@ -21,8 +21,8 @@ const BookCard = ({ book }) => (
         { book.author }
       </p>
     </div>
-    <div className="px-6 py-4">
+    <div className="w-full self-end">
-      <span className="inline-block bg-blue-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">{book.category}</span>
+      <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>
 )

app/src/pages/index.js

@@ -8,7 +8,7 @@ export default ({data}) => {
   return (
     <Layout>
       <SEO title="Home" />
-      <div className="flex flex-wrap">
+      <div className="flex flex-row flex-wrap">
       {data.allBooksJson.edges.map(function(x) {
         return (
           <BookCard book={x.node} key={x.node.id} />