AnishDe12020

import { Sandpack } from "@codesandbox/sandpack-react";
import "@codesandbox/sandpack-react/dist/index.css";

AnishDe12020

npx create-react-app sandpack-demo
cd sandpack-demo

AnishDe12020

let toast = document.getElementById("toast");
document.getElementById("show-toast").addEventListener("click", function () {
  toast.classList.add("toast-active")
});

AnishDe12020

document.getElementById("close-button").addEventListener("click", function () {
  toast.classList.remove("toast-active");
})

AnishDe12020

.close-button {
  background-color: black;
  color: white;
  border: none;
  cursor: pointer;
}

AnishDe12020

<div class="toast" id="toast">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" class="icon" viewBox="0 0 24 24" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
  </svg>
  <p class="text">Some Information</p>
  <button id="close-button" class="close-button">
    &#10005;
  </button>
</div>

AnishDe12020

.toast {
  display: flex;
  align-items: center;
  position: absolute;
  top: 50px;
  right: -500px;
  background-color: black;
  border-radius: 12px;
  padding: 0.5rem 1rem;
  border: 5px solid #029c91;

AnishDe12020

.toast-active {
  right: 80px;
  opacity: 100%;
}

AnishDe12020

.toast-active {
  right: 80px;
  opacity: 100%;
}

AnishDe12020

.toast {
  display: flex;
  align-items: center;
  position: absolute;
  top: 50px;
  right: -500px;
  background-color: black;
  border-radius: 12px;
  padding: 0.5rem 1rem;
  border: 5px solid #029c91;