Add semantic-ui component for search input field, adjust css

Co-Authored-By: Kachulio1 <jngugi88@gmail.com>

Author: bryszard

src/assets/UsersList.css

@@ -1,4 +1,8 @@
 h1 {
   font-size: 50px !important;
   padding: 20px !important;
-}
+}
+
+.users-list-search-input {
+  margin-bottom: 20px;
+}

src/containers/UsersList.js

@@ -1,5 +1,5 @@
 import React, { Component, Fragment } from 'react'
-import { Header, Card, Grid, Container } from 'semantic-ui-react'
+import { Header, Card, Grid, Container, Input } from 'semantic-ui-react'
 import Paginate from '../components/Paginate'
 import PaginationLinks from '../components/PaginationLinks'
 import { connect } from 'react-redux'
@@ -83,6 +83,7 @@ export class UsersList extends Component {
             <Grid.Row>
               <Grid.Column width={12}>
                 <Header as='h1'>Volunteers Directory</Header>
+                <Input className='users-list-search-input' fluid icon='search' placeholder='Search...' />
                 <Card.Group centered itemsPerRow={3}>
                   <Paginate
                     items={usersList}