speaker-technical talks in events

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^6.3.0",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
@@ -35,5 +36,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^9.8.8",
+    "postcss": "^7.0.39",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.16"
   }
 }

src/App.js

@@ -1,7 +1,7 @@
 import React from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import Navbar from "./Components/navbar/Navbar";
-
+import "tailwindcss/tailwind.css"
 // importing pages
 import Home from "./Pages/home/Home";
 import About from "./Pages/about/About";

src/Pages/events/Events.css

@@ -0,0 +1,51 @@
+.header{
+    text-align:center;
+
+    font-size:xx-large;
+
+}
+.background{
+    background: linear-gradient(307.47deg, #45108A 9.23%, #3D065F 66.85%, #200554 112.51%);
+}
+.speaker{
+  background: #3A065E;
+  border-radius: 8px;
+    max-width: 100%;
+    max-height: 100%;
+    flex-direction: row;
+    display:flex;
+    justify-content: center;
+    align-items: center;
+
+    border: 1px solid rgb(85, 64, 94);
+    padding: 20px;
+    margin: 20px;
+    margin-left: auto;
+    margin-right: auto;
+
+  }
+  .combine_speaker{
+    column-count: 1;
+    margin-top: 2rem;
+
+
+  }
+  img{
+    max-width: 100%;
+    max-height: 100%;
+  }
+  .portrait {
+    height: 80px;
+    width: 30px;
+}
+
+  .text{
+    margin-left: 2rem;
+    position: relative;
+  }
+
+
+.h2,h5{
+   margin-top: 1rem;
+   margin-bottom: 1rem;
+}

src/Pages/events/Events.js

@@ -1,10 +1,52 @@
 import React from 'react'
+import "./Events.css"
+import logo from "../events/logo.png"
 
 const Events = () => {
     return (
-        <div>
-            <h1>Events Page</h1>
-        </div>
+        <div className="background">
+            <h1 className="header">Speakers Line Up - Technical Talks</h1>
+           <div className="combine_speaker">
+            <div className="speaker" >
+               <img src={logo} alt="Logo" />
+          <div className="text">
+              <h2>Jacob Robinson</h2>
+              <h5>Product Designer @ Cred </h5>
+              <p>Now that we’ve seen the three main uses of git checkout on branches, it's important to discuss the “detached HEAD” state. Remember that the HEAD is Git’s way of referring to the current snapshot. “detached HEAD” state.</p></div>  
+
+
+            </div>
+
+            <div className="speaker" >
+               <img src={logo} alt="Logo" />
+          <div className="text">
+              <h2>Jacob Robinson</h2>
+              <h5>Product Designer @ Cred </h5>
+              <p>Now that we’ve seen the three main uses of git checkout on branches, it's important to discuss the “detached HEAD” state. Remember that the HEAD is Git’s way of referring to the current snapshot. “detached HEAD” state.</p></div>  
+
+
+            </div>
+
+            <div className="speaker" >
+               <img src={logo} alt="Logo" />
+          <div className="text">
+              <h2>Jacob Robinson</h2>
+              <h5>Product Designer @ Cred </h5>
+              <p>Now that we’ve seen the three main uses of git checkout on branches, it's important to discuss the “detached HEAD” state. Remember that the HEAD is Git’s way of referring to the current snapshot. “detached HEAD” state.</p></div>  
+
+
+            </div>
+
+
+
+
+    </div>
+  {/*<div class=" md:mx-auto bg-purple-700 text-center border-purple-700">
+  If you don’t plan to use the container class in your project, you can disable it entirely by setting the container property to false in the corePlugins section of your config file
+  </div>*/}
+
+
+</div>
     )
 }
 

src/craco.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+    style: {
+      postcss: {
+        plugins: [
+          require('tailwindcss'),
+          require('autoprefixer'),
+        ],
+      },
+    },
+  }

tailwind.config.js

@@ -0,0 +1,11 @@
+module.exports = {
+  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
+  darkMode: false, // or 'media' or 'class'
+  theme: {
+    extend: {},
+  },
+  variants: {
+    extend: {},
+  },
+  plugins: [],
+}