Posts react helmet

pots.js

import React from "react";
import { Helmet } from "react-helmet";

export default () => (
  <div>
    <Helmet>
      <title>Ideas || MysiteName</title>
      <meta name="keywords" content="HTML,CSS,JavaScript" />
      <meta
        name="description"
        content="Ideas page using react helmet very easy to implement "
      />
    </Helmet>

    <h1 style={{ textAlign: "center" }}>Posts</h1>
    <div
      style={{
        display: "flex",
        margin: "2rem",
        padding: "2rem"
      }}
    >
      <div
        style={{
          backgroundColor: "#ccc",
          boxShadow: "0 2px 2px black",
          padding: "1rem"
        }}
      >
        This prevents repetitive patterns from impairing the overall visual
        impression and facilitates the comparison of different typefaces.
        Furthermore, it is advantageous when the dummy text is relatively
        realistic so that the layout impression of the final publication is not
        compromised.
      </div>
      <div
        style={{
          backgroundColor: "gold",
          boxShadow: "0 2px 2px black",
          padding: "1rem",
          marginLeft: "1rem"
        }}
      >
        This prevents repetitive patterns from impairing the overall visual
        impression and facilitates the comparison of different typefaces.
        Furthermore, it is advantageous when the dummy text is relatively
        realistic so that the layout impression of the final publication is not
        compromised.
      </div>
        </div>
        <div
            style={{
                display: "flex",
                margin: "2rem",
                padding: "2rem"
            }}
        >
            <div
                style={{
                    backgroundColor: "#ccc",
                    boxShadow: "0 2px 2px black",
                    padding: "1rem"
                }}
            >
                This prevents repetitive patterns from impairing the overall visual
                impression and facilitates the comparison of different typefaces.
                Furthermore, it is advantageous when the dummy text is relatively
                realistic so that the layout impression of the final publication is not
                compromised.
      </div>
            <div
                style={{
                    backgroundColor: "gold",
                    boxShadow: "0 2px 2px black",
                    padding: "1rem",
                    marginLeft: "1rem"
                }}
            >
                This prevents repetitive patterns from impairing the overall visual
                impression and facilitates the comparison of different typefaces.
                Furthermore, it is advantageous when the dummy text is relatively
                realistic so that the layout impression of the final publication is not
                compromised.
      </div>
        </div>
  </div>
);