Create Cookie Banner with React JS and custom CSS-CodePudding

Hello I am new to React Js and Iam not great with CSS and struggling.

I am trying to implement a basic cookie banner design. Here is the overall code of what I've tried so far

JS:

import React from "react";
import { withWidth } from "@material-ui/core";
import style from './Cookie.module.css';

function Cookies(props) {
    return (
        <React.Fragment>

            <div ref={props.forwardedRef}>





                <div className={style.cookies}>
                    <div className={style.content}>
                        <p className={style.header}>We use cookies on this site to enhance your user experience</p>

                        <p className={style.message}> By clicking any link on this page you are giving your consent for us to set cookies. Detailed information, also on the right to withdraw consent, can be found in the <a href="/" target="_blank" rel="noreferrer">website's privacy policy.</a></p>

                        <div className={style.click}>
                            <button className={style.button}>
                                Yes I agree
                            </button>
                        </div>

                    </div>

                </div>

            </div>
        </React.Fragment >
    )
}
export default withWidth()(Cookies);

CSS:

.cookies {
  overflow: hidden;
  background-color: #333;
  position: fixed;
  bottom: 0;
  width: 100%;
}

.content {

  padding-left: 100px;
  padding-top: 5px;
}

.header {
  color: #FFFFFF;
  font-size: 20px;
}

.message {
  color: #FFFFFF;
  font-size: 16px;
}

.click {
  left: 0;
}

.button {
  background-color: #3f7edf;
  color: #FFFFFF;
  font-size: 13px;
  height: 50px;
  width: 100px;
  border-radius: 5px;
  border-color: #3f7edf;
}

I tried adding my custom CSS and implementing a basic UI for cookie banner.

Here is my current Cookie Banner: CURRENT DESIGN

Here is the design I am trying to accomplish: MY GAOL

CodePudding user response：

Try to chagne your content css class to this

.content {
    max-width: 1200px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

CodePudding user response：

You can wrap your header and message div in another div like this

<div className={style.cookies}>
  <div className={style.content}>
    <div className={style.main}>
      <p className={style.header}>We use cookies on this site to enhance your user experience</p>
      <p className={style.message}> By clicking any link on this page you are giving your consent for us to set cookies. Detailed information, also on the right to withdraw consent, can be found in the <a href="/" target="_blank" rel="noreferrer">website's privacy policy.</a></p>
    </div>
    <div className={style.click}>
      <button className={style.button}>Yes I agree</button>
    </div>
  </div>
</div>

and add this to css file :

.content {
  padding-left: 100px;
  padding-top: 5px;
  display: flex;
  justify-content:center;
  align-items:flex-end
}
.main{
  width: 55%
}

.click {
  width:45%;
  margin-right: 5px
  left: 0;
}