completed: https://github.com/oscghana/oscghana-website/issues/10#iss…

package.json

@@ -9,7 +9,7 @@
     "gatsby-image": "^2.2.34",
     "gatsby-plugin-manifest": "^2.2.31",
     "gatsby-plugin-offline": "^3.0.27",
-    "gatsby-plugin-postcss": "^2.1.18",
+    "gatsby-plugin-postcss": "^2.1.19",
     "gatsby-plugin-react-helmet": "^3.1.16",
     "gatsby-plugin-sharp": "^2.3.5",
     "gatsby-source-filesystem": "^2.1.40",

src/components/Button.js

@@ -0,0 +1,8 @@
+import React from "react"
+import "../styles/components.css"
+
+const Button = ({ className, children }) => (
+  <button className={className}>{children}</button>
+)
+
+export default Button

src/components/Image.js

@@ -0,0 +1,8 @@
+import React from "react"
+import "../styles/global.css"
+
+const Image = ({ imageItem, alt }) => (
+  <img className="header__osc-logo" src={imageItem} alt={alt} />
+)
+
+export default Image

src/pages/index.js

@@ -2,6 +2,7 @@ import React from "react"
 import Ghana from "../images/home/ghana.svg"
 
 const IndexPage = () => {
+  return <div></div>
   return (
     <div>
       {/* A demo display text, delete before actual development */}

src/styles/components.css

@@ -0,0 +1,24 @@
+.primary-button {
+  width: 200px;
+  height: 70px;
+  text-align: center;
+  letter-spacing: 0;
+  opacity: 1;
+  background: #3da739 0% 0% no-repeat padding-box;
+  box-shadow: 0px 1px 4px #00000029;
+  color: #ffffff;
+  border-radius: 5px;
+  font: 20px "Poppins";
+}
+.secondary-button {
+  width: 200px;
+  height: 70px;
+  text-align: center;
+  letter-spacing: 0;
+  opacity: 1;
+  box-shadow: 0px 1px 4px #00000029;
+  color: #3da739;
+  border-radius: 5px;
+  border: 2px solid #3da73966;
+  font: 20px "Poppins";
+}

tailwind.config.js

@@ -1,7 +1,13 @@
 module.exports = {
+  plugins: [
+    // ...
+    require("tailwindcss"),
+    require("autoprefixer"),
+    // ...
+  ],
   theme: {
-    extend: {}
+    extend: {},
   },
   variants: {},
-  plugins: []
+  plugins: [],
 }