Skip to content

Instantly share code, notes, and snippets.

@itznur07

itznur07/chat-notificaition-with-tailwindcss.markdown

Created December 21, 2022 16:55
Show Gist options
  • Save itznur07/c3f557eff1b92f9a5044f58182bf7023 to your computer and use it in GitHub Desktop.
Save itznur07/c3f557eff1b92f9a5044f58182bf7023 to your computer and use it in GitHub Desktop.
Download ZIP
Chat notificaition with tailwindcss
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind</title>
</head>
<body>
<!-- Chat Notification Design Start -->
<div class="bg-black w-screen overflow-hidden h-screen">
<div class="mt-20 p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-6 p-absolute ">
<div class="shrick-0">
<img class="w-12 h-12" src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.shareicon.net%2Fdata%2F2015%2F08%2F10%2F83196_chat_1024x1024.png&f=1&nofb=1&ipt=b976bf697db3ba0ab658d4ac29c8c2425daf9858dd357782607523b3c85c7ac6&ipo=images" alt="ChitChat Logo">
</div>
<div>
<h4 class="text-xl font-medium text-black">ChitChat</h4>
<p class="text-gray">You have a new message!</p>
</div>
</div>
</div>
</body>
</html>
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment