src/components/pages/News.css

+.news-extra {
+  color: grey;
+  font-size: 0.75em;
+  font-style: italic;
+  font-family: fantasy;
+  text-align: justify;
+}
+
+.news-text {
+  font-size: 1.15em;
+  font-family: Arial, Helvetica, sans-serif;
+  text-align: justify;
+}

src/components/pages/Statistics.js

+import { Container, Menu } from 'semantic-ui-react';
+import React, { Component } from 'react';
+
+import Events from './Events';
+import LeaderBoard from './LeaderBoard';
+import Presence from './Presence';
+
+export default class Statistics extends Component {
+  // eslint-disable-next-line react/state-in-constructor
+  state = { activeItem: 'events' };
+
+  handleItemClick = (e, { name }) => this.setState({ activeItem: name });
+
+  render() {
+    const { activeItem } = this.state;
+    return (
+      <div>
+        <Container
+          textAlign="center"
+          style={{ paddingBottom: '5em', paddingTop: '1em' }}
+        >
+          <Menu tabular attached="top" size="huge" compact>
+            <Menu.Item
+              name="events"
+              active={activeItem === 'events'}
+              onClick={this.handleItemClick}
+            >
+              Alkalmak
+            </Menu.Item>
+            <Menu.Item
+              name="presence"
+              active={activeItem === 'presence'}
+              onClick={this.handleItemClick}
+            >
+              Jelenlét
+            </Menu.Item>
+            <Menu.Item
+              name="leaderboard"
+              active={activeItem === 'leaderboard'}
+              onClick={this.handleItemClick}
+            >
+              Ranglista
+            </Menu.Item>
+          </Menu>
+          {activeItem === 'events' ? <Events /> : ''}
+          {activeItem === 'presence' ? <Presence /> : ''}
+          {activeItem === 'leaderboard' ? <LeaderBoard /> : ''}
+        </Container>
+      </div>
+    );
+  }
+}

src/config.js.temp

-export const APIKEY = '';

src/index.css

-body {
-  margin: 0;
-  padding: 0;
-  font-family: sans-serif;
-}