create OutcomingMsg.js

+import React from "react";
+import styled from "styled-components";
+
+const OutcomingBox = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  padding: 20px 10px;
+  margin-top: 20px;
+  margin-right: 10px;
+`;
+
+const MsgContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const MsgBox = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #54a0ff;
+  color: white;
+  border-radius: 20px;
+  margin-bottom: 10px;
+`;
+
+const Msg = styled.span`
+  font-size: 20px;
+  padding: 20px 10px;
+`;
+
+const TimeBox = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  opacity: 0.8;
+`;
+
+const Time = styled.span`
+  font-size: 15px;
+`;
+
+export default () => {
+  return (
+    <OutcomingBox>
+      <MsgContainer>
+        <MsgBox>
+          <Msg /> Outcoming Message
+        </MsgBox>
+        <TimeBox>
+          <Time /> Monday 00:00
+        </TimeBox>
+      </MsgContainer>
+    </OutcomingBox>
+  );
+};