Tailwind Playground
<div class="flex items-center justify-center h-screen bg-gradient-to-br from-purple-400 via-pink-500 to-red-500"> <div class="p-8 bg-white bg-opacity-20 rounded-3xl shadow-lg backdrop-blur-lg backdrop-filter"> <div class="flex items-center space-x-4"> <div class="flex-shrink-0"> <img class="h-12 w-12 rounded-xl" src="https://tailwindgenie.com/logo.png" alt="ChitChat Logo"> </div> <div> <h2 class="text-2xl font-semibold text-white">ChitChat</h2> <p class="text-white text-opacity-80">You have a new message!</p> </div> </div> </div> </div>
ChitChat
You have a new message!