const DataStorage = styled.div` width: 100%; height:100%; align-item: start; padding: 22vh 120px; .tableStyle{ text-align: center; } `; const Overlay = styled.div` background: rgba(255, 255, 255, 0.13); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(17.4px); -webkit-backdrop-filter: blur(17.4px); border: 1px solid rgba(255, 255, 255, 0.3); `; console.log(props.signedIn); return ( <DataStorage className="bg-black"> <button className="btn btn-light rounded-pill text-primary mb-3"> Upload </button> <Overlay className="p-3"> <table className="table tableStyle text-white"> <thead> <tr> <th scope="col">#</th> <th scope="col">No.</th> <th scope="col">File Name</th> <th scope="col">Total Size</th> <th scope="col">Create by</th> </tr> </thead> <tbody> <tr> <td>Mark</td> <th scope="row">1</th> <td>Otto</td> <td>@mdo</td> <td>@mdo</td> </tr> <tr> <td>Jacob</td> <th scope="row">2</th> <td>Thornton</td> <td>@fat</td> <td>@mdo</td> </tr> <tr> <td>Larry the Bird</td> <th scope="row">3</th> <td>@twitter</td> <td>@mdo</td> <td>@mdo</td> </tr> </tbody> </table> </Overlay> </DataStorage> );