some reformattings

added badges

src/elements/Tag/Tag.css

@@ -0,0 +1,19 @@
+.tagbtn {
+    color: white;
+    margin: 10px;
+    background-color: #3574fe;
+    border: none;
+    border-radius: 10px;
+    padding: 5px 15px 5px 15px;
+    /*font-weight: bold;*/
+    display: block;
+}
+
+.tagbtn:focus {
+    background-color: #004eff;
+    outline: none;
+}
+
+.tagbtn:hover {
+    background-color: #004eff;
+}

src/elements/Tag/Tag.js

@@ -0,0 +1,21 @@
+import React from "react";
+
+import "./Tag.css"
+
+class Tag extends React.Component {
+
+    constructor(props, context) {
+        super(props, context);
+
+        this.props = props;
+    }
+
+    render() {
+        // todo onclick events correctlyy
+        return (
+            <button className='tagbtn' onClick={this.props.onClick} data-testid="Test-Tag">{this.props.children}</button>
+        );
+    }
+}
+
+export default Tag;

src/elements/Tag/Tag.test.js

@@ -0,0 +1,19 @@
+import React from "react";
+import ReactDom from 'react-dom'
+import Tag from './Tag'
+
+import {render} from '@testing-library/react'
+import "@testing-library/jest-dom"
+
+describe('<Tag/>', function () {
+    it('renders without crashing ', function () {
+        const div = document.createElement("div");
+        ReactDom.render(<Tag/>,div);
+        ReactDom.unmountComponentAtNode(div);
+    });
+
+    it('renders childs correctly', function () {
+        const {getByTestId} = render(<Tag>test</Tag>);
+        expect(getByTestId("Test-Tag")).toHaveTextContent("test");
+    });
+});